Re: Une DB ? - LinuxFr.org

[^] # Re: Une DB ?

Posté par b.gwen le 04 avril 2015 à 13:50. En réponse au message accélérer l'affichage de graphe dans Navigateur. Évalué à 1. Dernière modification le 04 avril 2015 à 14:31.

Bonjour , Après vérification ,et nombreuses tentatives je suis toujours dans l'impasse avec aucune valeur affiché sur ma page http://192.168.1.19/Graph/tempChart.html.
Quand je lance la commande /home/www/Graph# python readTemp.py dans putty ca fonctionne bien ,

DLFP

Le dossier Webdata ,et le fichier base de donnée data_DS18B20.rrd se rempli bien .Est ce que mon probleme ne viens pas de tempChart.html ?

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta content="text/html; charset=utf-8" http-equiv="content-type" />
 <title>Temperature history</title>
 <!-- Le styles -->
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
 <style type="text/css">
 body {
 padding-top: 60px;
 padding-bottom: 40px;
 }
 </style>
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" rel="stylesheet">

 <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
 <!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 <!-- Le fav and touch icons -->
 <link rel="shortcut icon" href="ico/favicon.ico">
 </head>
 <body>

 <script type="text/javascript">
 // read sensors labels from DS18B20Status.txt file
 function GetLabels(){
 var request = new XMLHttpRequest();
 request.open("Get","/webdata/DS18B20Status.txt",false);
 request.send(null);
 var AllText = request.responseText;
 var K= AllText.split(/\r\n|\n/);
 var Item=[]
 for( i in K) {
 if(K[i].length==0) continue;
 var L = K[i].split(/,/);
 Item.push([L[0],L[2]]);
 }
 return Item;
 }
 // return everything after the question mark

 function GetUrlParameter() {
 idx = window.location.href.indexOf("?");
 if( idx < 0 ) return "";
 return window.location.href.substring(idx+1);
 }
 urlParameter = GetUrlParameter();
 </script>

 <div class="navbar navbar-inverse navbar-fixed-top">
 <div class="navbar-inner">
 <div class="container-fluid">
 <a class="brand" href="/index.html">Temperature</a>
 <div class="nav-collapse collapse">
 <ul class="nav">
 <li class="active"><a href="/index.html">Home</a></li>
 </ul>
 </div><!--/.nav-collapse -->
 </div>
 </div>
 </div>
 <div class="container-fluid">
 <div class="row-fluid">
 <div class="span2">
 <div class="well sidebar-nav">
 <ul class="nav nav-list">
 <li class="nav-header">Temperature</li>
 <script tyep="text/javascript">
 var qparser = document.createElement('a');
 qparser.href = window.location.href;
 var frame1url = qparser.protocol + "//" + qparser.host + qparser.pathname;
 document.write('<li><a href="' + frame1url + '?3h">Last 3h</a></li>');
 document.write('<li><a href="' + frame1url + '?24h">Last 24h</a></li>');
 document.write('<li><a href="' + frame1url + '?48h">Last 48h</a></li>');
 document.write('<li><a href="' + frame1url + '?1w">Last week</a></li>');
 document.write('<li><a href="' + frame1url + '?1m">Last month</a></li>');
 document.write('<li><a href="' + frame1url + '?3m">Last 3 month</a></li>');
 document.write('<li><a href="' + frame1url + '?1y">Last year</a></li>');
 </script>
 </ul>
 </div><!--/.well -->
 </div><!--/span-->
 <div class="span10">
 <div id="content">
 </div>
 </div><!--/span-->
 </div><!--/row-->
 <hr>
 </div><!--/.fluid-container-->
 <!-- Le javascript ================================================== -->
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js" charset="UTF-8"></script>
<!-- <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.1/highcharts.js" charset="UTF-8"></script> -->
 <script type="text/javascript" src="/charts/js/highcharts.js" charset="UTF-8"></script>

 <script type="text/javascript">
 var Labels = GetLabels();
 var all;
function computeSunrise(e, t) {
 var n = 13.408056;
 var r = 52.518611;
 var i = 90.83333333333333;
 var s = Math.PI / 180;
 var o = 180 / Math.PI;
 var u = n / 15;
 var a;
 if (t) {
 a = e + (6 - u) / 24
 } else {
 a = e + (18 - u) / 24
 }
 M = .9856 * a - 3.289;
 L = M + 1.916 * Math.sin(M * s) + .02 * Math.sin(2 * M * s) + 282.634;
 if (L > 360) {
 L = L - 360
 } else if (L < 0) {
 L = L + 360
 }
 RA = o * Math.atan(.91764 * Math.tan(L * s));
 if (RA > 360) {
 RA = RA - 360
 } else if (RA < 0) {
 RA = RA + 360
 }
 Lquadrant = Math.floor(L / 90) * 90;
 RAquadrant = Math.floor(RA / 90) * 90;
 RA = RA + (Lquadrant - RAquadrant);
 RA = RA / 15;
 sinDec = .39782 * Math.sin(L * s);
 cosDec = Math.cos(Math.asin(sinDec));
 cosH = (Math.cos(i * s) - sinDec * Math.sin(r * s)) / (cosDec * Math.cos(r * s));
 var f;
 if (t) {
 f = 360 - o * Math.acos(cosH)
 } else {
 f = o * Math.acos(cosH)
 }
 f = f / 15;
 T = f + RA - .06571 * a - 6.622;
 UT = T - u;
 if (UT > 24) {
 UT = UT - 24
 } else if (UT < 0) {
 UT = UT + 24
 }
 localT = UT + 1;
 return localT * 3600 * 1e3
}
function dayOfYear() {
 var e = Math.floor((new Date).setFullYear((new Date).getFullYear(), 0, 1) / 864e5);
 var t = Math.ceil((new Date).getTime() / 864e5);
 var n = t - e;
 return n
}
Highcharts.setOptions({
 global: {
 useUTC: false
 }
});
options = {
 chart: {
 renderTo: "content",
 type: "spline"
 },
 title: {
 text: "Temperatures of the last 24h"
 },
 subtitle: {
 text: ""
 },
 xAxis: {
 type: "datetime",
 dateTimeLabelFormats: {
 hour: "%H. %M"
 }
 },
 yAxis: [{
 title: {
 text: "T (°C)"
 }
 },
 {
 title: {
 text: "Humidity (%)"
 },
 opposite: true
 }],
 tooltip: {
 formatter: function() {
 if(this.series.name == '#1-Humidity')
 {
 return "<b>" + this.series.name + "</b><br/>" + Highcharts.dateFormat("%H:%M", this.x) + ": " + this.y.toFixed(1) + "%"
 }
 else if(this.series.name == '#2-Humidity')
 {
 return "<b>" + this.series.name + "</b><br/>" + Highcharts.dateFormat("%H:%M", this.x) + ": " + this.y.toFixed(1) + "%"
 }
 else
 { 
 return "<b>" + this.series.name + "</b><br/>" + Highcharts.dateFormat("%H:%M", this.x) + ": " + this.y.toFixed(1) + "°C"
 }
 }
 }, 
 plotOptions: {
 series: {
 marker: {
 radius: 2
 }
 }
 },
 lineWidth: 1,
 series: []
}
 // multiple parameters decoder
 function gup( name ){
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
 var regexS = "[\\?&]"+name+"=([^&#]*)"; 
 var regex = new RegExp( regexS ); 
 var results = regex.exec( window.location.href ); 
 if( results == null ) return ""; 
 else return results[1];}
 // return everything after the question mark

 function GetUrlParameters() {
 idx = window.location.href.indexOf("?");
 if( idx < 0 ) return "";
 return window.location.href.substring(idx+1);
 }
 function GetChartXml() {
 switch(urlParameter)
 {
 case "3h":
 case "48h":
 case "1w":
 case "1m":
 case "3m":
 case "1y":
 return "webdata/temperature" + urlParameter + ".xml";
 }
 return "webdata/temperature24h.xml";
 }
 function GetSerieYAxis(sName)
 {
// only one axis for DS18B20 
// switch(sName)
// {
// case "hm2_dht22": return 1;
// case "hm_dht22": return 1;
// }
 return 0;
 }

 function GetSerieName(sName)
 {
 for(i in Labels) {
 if(sName == Labels[i][0]) return Labels[i][1];
 }
 // didn't found it just put the internal Id
 return sName;
 }

 function GetChartTitle()
 {
 switch(urlParameter)
 {
 case "3h":
 return "Last 3 hours temperature";
 case "48h":
 return "Last 48 hours temperature";
 case "1w":
 return "Last week temperature";
 case "1m":
 return "Last month temperature";
 case "3m":
 return "Last 3 months temperature";
 case "1y":
 return "Last year temperature";
 }
 return "Last 24 hours temperature";
 }

 function GetNumberOfDays()
 {
 switch(urlParameter)
 {
 case "3h":
 return 1;
 case "48h":
 return 2;
 case "1w":
 return 7;
 case "1m":
 return 31;
 case "3m":
 return 0;
 case "1y":
 return 0;
 }
 return 1;
 } 
 $(document).ready(function() {
 $.ajax({
 type: "GET",
 url: GetChartXml(),
 dataType: "xml",
 success: function(xml) {
 var series = []

 //define series
 $(xml).find("entry").each(function() {
 var seriesOptions;
 seriesOptions = {
 name: GetSerieName($(this).text()),
 yAxis: GetSerieYAxis($(this).text()),
data: []
 }
 options.series.push(seriesOptions);
 });
 //populate with data
 $(xml).find("row").each(function() {
 var t = parseInt($(this).find("t").text()) * 1000
 $(this).find("v").each(function(index) {
 var v = parseFloat($(this).text())
 v = v || null
 if (v != null) {
 options.series[index].data.push([t, v])
 };
 });
 });
 options.title.text = GetChartTitle();
 $.each(series, function(index) {
 options.series.push(series[index]);
 });
 //add sunrise and sunset
 options.xAxis.plotBands = []
 var nday= GetNumberOfDays();

 for (var i = nday; i >= 0; i--) {
 var d = new Date();
 d.setHours(0,0,0,0);
 d.setDate(d.getDate()-i);
 var sunrise = d.getTime()+computeSunrise(dayOfYear(), true);
 var sunset = d.getTime()+computeSunrise(dayOfYear(), false);
 options.xAxis.plotBands.push({
 from: sunrise,
 to: sunset,
 color: '#FCFFC5' 
 }); 
 };
 chart = new Highcharts.Chart(options);
 }
 });
 });
 </script> 
</body>
</html>