RGRAPH

Autre bibliothèque de graphiques : http://www.highcharts.com/

Exemple d’affichage Température et Humidité :

H&M

1°) récupérez et placez sur votre site l’abrorescence de la librairie RGraph que vous trouverez ici

2°) dans la page  HTML placez le code dans le script :

 <!DOCTYPE html >  
 <html>  
 <head>  
  <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />  
  <script src="RGraph/libraries/RGraph.common.core.js" ></script>  
  <script src="RGraph/libraries/RGraph.common.dynamic.js"></script>  <!-- Just needed for dynamic features -->  
  <script src="RGraph/libraries/RGraph.common.annotate.js"></script> <!-- Just needed for annotating -->  
  <script src="RGraph/libraries/RGraph.common.context.js"></script>  <!-- Just needed for context menus -->  
  <script src="RGraph/libraries/RGraph.common.effects.js"></script>  <!-- Just needed for visual effects -->  
  <script src="RGraph/libraries/RGraph.common.key.js"></script>    <!-- Just needed for keys -->  
  <script src="RGraph/libraries/RGraph.common.resizing.js"></script> <!-- Just needed for resizing -->  
  <script src="RGraph/libraries/RGraph.common.tooltips.js"></script> <!-- Just needed for tooltips -->  
  <script src="RGraph/libraries/RGraph.common.zoom.js"></script>   <!-- Just needed for zoom -->  
  <script src="RGraph/libraries/RGraph.bar.js"></script>       <!-- Just needed for Bar charts -->  
  <script src="RGraph/libraries/RGraph.bipolar.js"></script>     <!-- Just needed for Bi-polar charts -->  
  <script src="RGraph/libraries/RGraph.cornergauge.js"></script>   <!-- Just needed for CornerGauge charts -->  
  <script src="RGraph/libraries/RGraph.fuel.js"></script>       <!-- Just needed for Fuel charts -->  
  <script src="RGraph/libraries/RGraph.funnel.js"></script>      <!-- Just needed for Funnel charts -->  
  <script src="RGraph/libraries/RGraph.gantt.js"></script>      <!-- Just needed for Gantt charts -->  
  <script src="RGraph/libraries/RGraph.gauge.js"></script>      <!-- Just needed for Gauge charts -->  
  <script src="RGraph/libraries/RGraph.hbar.js"></script>       <!-- Just needed for Horizontal Bar charts -->  
  <script src="RGraph/libraries/RGraph.hprogress.js"></script>    <!-- Just needed for Horizontal Progress bars -->  
  <script src="RGraph/libraries/RGraph.led.js"></script>       <!-- Just needed for LED charts -->  
  <script src="RGraph/libraries/RGraph.line.js"></script>       <!-- Just needed for Line charts -->  
  <script src="RGraph/libraries/RGraph.meter.js"></script>      <!-- Just needed for Meter charts -->  
  <script src="RGraph/libraries/RGraph.odo.js"></script>       <!-- Just needed for Odometers -->  
  <script src="RGraph/libraries/RGraph.pie.js"></script>       <!-- Just needed for Pie AND Donut charts -->  
  <script src="RGraph/libraries/RGraph.radar.js"></script>      <!-- Just needed for Radar charts -->  
  <script src="RGraph/libraries/RGraph.rose.js"></script>       <!-- Just needed for Rose charts -->  
  <script src="RGraph/libraries/RGraph.rscatter.js"></script>     <!-- Just needed for Rscatter charts -->  
  <script src="RGraph/libraries/RGraph.scatter.js"></script>     <!-- Just needed for Scatter charts -->  
  <script src="RGraph/libraries/RGraph.thermometer.js"></script>   <!-- Just needed for Thermometer charts -->  
  <script src="RGraph/libraries/RGraph.vprogress.js"></script>    <!-- Just needed for Vertical Progress bars -->  
  <script src="RGraph/libraries/RGraph.waterfall.js"></script>    <!-- Just needed for Waterfall charts -->  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
  <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->  
  <title>Humidity and temperature</title>  
  <meta name="robots" content="noindex,nofollow" />  
  <meta name="description" content="A basic Thermometer and Humidity" />    
 </head>  
 <body>  
   <h1>Humidity and temperature</h1>  
   <canvas id="cvs" width="400" height="300">[No canvas support]</canvas>  
   <canvas id="thermo" width="100" height="400">[No canvas support]</canvas>  
 <script>  
   /**  
   * Optional callback function that's called when the effect is complete  
   */  
   function myCallback (obj)  
   {  
     // ...  
   }  
   $(document).ready(function ()  
   {  
   GetClock();  
   var thermometer = new RGraph.Thermometer({  
         id: 'thermo',  
         min: 0,  
         max: 100,  
         value: 50  
       }).grow({frames: 10}, myCallback)  
    var odo = new RGraph.Odometer({  
       id: 'cvs',  
       min: 0,  
       max: 100,  
       value: 40,  
       options: {  
         green: {  
           max: 60  
         },  
         red: {  
           min: 80  
         },  
         label: {  
           area: 30 //-- Epaisseur zone blanche  
         },  
         needle: {  
           thickness: 2 //-- De l'aiguille  
         }  
       }  
     }).grow();  
    })  
   //-- Afichage de la date et de l'heure  
   function GetClock(){  
    var d=new Date();  
    var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;  
    if(nhour==0){ap=" AM";nhour=12;}  
    else if(nhour<12){ap=" AM";}  
    else if(nhour==12){ap=" PM";}  
    else if(nhour>12){ap=" PM";nhour-=12;}  
    if(nyear<1000) nyear+=1900;  
    if(nmin<=9) nmin="0"+nmin;  
    if(nsec<=9) nsec="0"+nsec;  
    document.getElementById('clockbox').innerHTML=""+ndate+"/"+(nmonth+1)+"/"+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";  
   }  
 </script>    
   <div id="clockbox"></div>  
 </body>  
 </html>  

Exemple avec actualisation automatique toute les minutes et lecture des valeurs en provenance d’un JSON :

 <!DOCTYPE html >  
 <html>  
 <head>  
  <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />  
  <script src="RGraph/libraries/RGraph.common.core.js" ></script>  
  <script src="RGraph/libraries/RGraph.common.dynamic.js"></script>  <!-- Just needed for dynamic features -->  
  <script src="RGraph/libraries/RGraph.common.effects.js"></script>  <!-- Just needed for visual effects -->  
  <script src="RGraph/libraries/RGraph.odo.js"></script>       <!-- Just needed for Odometers -->  
  <script src="RGraph/libraries/RGraph.thermometer.js"></script>   <!-- Just needed for Thermometer charts -->  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
  <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->  
  <title>Humidity and temperature</title>  
  <meta name="robots" content="noindex,nofollow" />  
  <meta name="description" content="A basic Thermometer and Humidity" />    
 </head>  
 <body onload="doRefrechTemp()">  
   <h1>Humidity and temperature</h1>  
   <canvas id="cvs" width="400" height="300">[No canvas support]</canvas>  
   <canvas id="thermo" width="100" height="400">[No canvas support]</canvas>  
 <script language="javascript" type="text/javascript">  
   /*  
   * Actualisation toute les minutes de la température et de l'humidité    
   */  
   var temp=10;  
   var humi=10;   
   //-- Afichage de la date et de l'heure  
   function GetClock(){  
    var d=new Date();  
    var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;  
    if(nhour==0){ap=" AM";nhour=12;}  
    else if(nhour<12){ap=" AM";}  
    else if(nhour==12){ap=" PM";}  
    else if(nhour>12){ap=" PM";nhour-=12;}  
    if(nyear<1000) nyear+=1900;  
    if(nmin<=9) nmin="0"+nmin;  
    if(nsec<=9) nsec="0"+nsec;  
    document.getElementById('clockbox').innerHTML=""+ndate+"/"+(nmonth+1)+"/"+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";  
   }  
   //---  
   function doRefrechTemp()  
   {  
   var data_file = "getTempArduino.php"; //-- Exemple Return {"temp":10,"humi":80}  
   var http_request = new XMLHttpRequest();  
   GetClock();  
   try{  
    // Opera 8.0+, Firefox, Chrome, Safari  
    http_request = new XMLHttpRequest();  
   }catch (e){  
    // Internet Explorer Browsers  
    try{  
      http_request = new ActiveXObject("Msxml2.XMLHTTP");  
    }catch (e) {  
      try{  
       http_request = new ActiveXObject("Microsoft.XMLHTTP");  
      }catch (e){  
       // Something went wrong  
       alert("Your browser broke!");  
       return false;  
      }  
    }  
   }  
   http_request.onreadystatechange = function(){  
    if (http_request.readyState == 4 )  
    {  
     // Javascript function JSON.parse to parse JSON data  
     var jsonObj = JSON.parse(http_request.responseText);  
     temp=jsonObj.temp;  
     humi=jsonObj.humi;        
   //--- RGRAPH SECTION --- //////////  
    /**  
   * Optional callback function that's called when the effect is complete  
   */  
   function myCallback (obj)  
   {  
     // ...  
   }  
   var thermometer = new RGraph.Thermometer({  
         id: 'thermo',  
         min: 0,  
         max: 100,  
         value: temp  
       }).grow({frames: 10}, myCallback)  
    var odo = new RGraph.Odometer({  
       id: 'cvs',  
       min: 0,  
       max: 100,  
       value: humi,  
       options: {  
         green: {  
           max: 60  
         },  
         red: {  
           min: 80  
         },  
         label: {  
           area: 30 //-- Epaisseur zone blanche  
         },  
         needle: {  
           thickness: 2 //-- De l'aiguille  
         }  
       }  
     }).grow();  
   ////////////  
        }  
    }  
   http_request.open("GET", data_file, true);  
   http_request.send();   
   setTimeout("doRefrechTemp()", 10000);}                   
 </script>    
   <div id="clockbox"></div>  
 </body>  
 </html>  

Affichage dynamique de la courbe de température :

H&M

 <!DOCTYPE html >  
 <html>  
 <head>  
  <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />  
  <script src="RGraph/libraries/RGraph.common.core.js" ></script>   
  <script src="RGraph/libraries/RGraph.common.dynamic.js"></script> <!-- Just needed for dynamic features -->   
  <script src="RGraph/libraries/RGraph.common.annotate.js"></script> <!-- Just needed for annotating -->   
  <script src="RGraph/libraries/RGraph.common.context.js"></script> <!-- Just needed for context menus -->   
  <script src="RGraph/libraries/RGraph.common.effects.js"></script> <!-- Just needed for visual effects -->   
  <script src="RGraph/libraries/RGraph.common.key.js"></script>  <!-- Just needed for keys -->   
  <script src="RGraph/libraries/RGraph.common.resizing.js"></script> <!-- Just needed for resizing -->   
  <script src="RGraph/libraries/RGraph.common.tooltips.js"></script> <!-- Just needed for tooltips -->   
  <script src="RGraph/libraries/RGraph.common.zoom.js"></script>  <!-- Just needed for zoom -->   
  <script src="RGraph/libraries/RGraph.bar.js"></script>    <!-- Just needed for Bar charts -->   
  <script src="RGraph/libraries/RGraph.bipolar.js"></script>   <!-- Just needed for Bi-polar charts -->   
  <script src="RGraph/libraries/RGraph.cornergauge.js"></script>  <!-- Just needed for CornerGauge charts -->   
  <script src="RGraph/libraries/RGraph.fuel.js"></script>    <!-- Just needed for Fuel charts -->   
  <script src="RGraph/libraries/RGraph.funnel.js"></script>   <!-- Just needed for Funnel charts -->   
  <script src="RGraph/libraries/RGraph.gantt.js"></script>   <!-- Just needed for Gantt charts -->   
  <script src="RGraph/libraries/RGraph.gauge.js"></script>   <!-- Just needed for Gauge charts -->   
  <script src="RGraph/libraries/RGraph.hbar.js"></script>    <!-- Just needed for Horizontal Bar charts -->   
  <script src="RGraph/libraries/RGraph.hprogress.js"></script>  <!-- Just needed for Horizontal Progress bars -->   
  <script src="RGraph/libraries/RGraph.led.js"></script>    <!-- Just needed for LED charts -->   
  <script src="RGraph/libraries/RGraph.line.js"></script>    <!-- Just needed for Line charts -->   
  <script src="RGraph/libraries/RGraph.meter.js"></script>   <!-- Just needed for Meter charts -->   
  <script src="RGraph/libraries/RGraph.odo.js"></script>    <!-- Just needed for Odometers -->   
  <script src="RGraph/libraries/RGraph.pie.js"></script>    <!-- Just needed for Pie AND Donut charts -->   
  <script src="RGraph/libraries/RGraph.radar.js"></script>   <!-- Just needed for Radar charts -->   
  <script src="RGraph/libraries/RGraph.rose.js"></script>    <!-- Just needed for Rose charts -->   
  <script src="RGraph/libraries/RGraph.rscatter.js"></script>   <!-- Just needed for Rscatter charts -->   
  <script src="RGraph/libraries/RGraph.scatter.js"></script>   <!-- Just needed for Scatter charts -->   
  <script src="RGraph/libraries/RGraph.thermometer.js"></script>  <!-- Just needed for Thermometer charts -->   
  <script src="RGraph/libraries/RGraph.vprogress.js"></script>  <!-- Just needed for Vertical Progress bars -->   
  <script src="RGraph/libraries/RGraph.waterfall.js"></script>  <!-- Just needed for Waterfall charts -->   
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>   
  <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->   
  <title>Humidity and temperature</title>  
  <meta name="robots" content="noindex,nofollow" />  
  <meta name="description" content="A basic Thermometer and Humidity" />    
 </head>  
 <body onload="doRefrechTemp()">  
   <h1>Humidity and temperature</h1>  
 <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>  
 <script language="javascript" type="text/javascript">  
   /*  
   * Actualisation toute les minutes de la température et de l'humidité    
   */  
   var temp=10;  
   var humi=10;   
   /////  
    d1 = [];  
   l  = 0; // The letter 'L' - NOT a one  
   // Pre-pad the arrays with null values  
   for (var i=0; i<600; ++i) {  
     d1.push(null);  
   }  
   var obj = null;  
   //-- Afichage de la date et de l'heure  
   function GetClock(){  
    var d=new Date();  
    var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;  
    if(nhour==0){ap=" AM";nhour=12;}  
    else if(nhour<12){ap=" AM";}  
    else if(nhour==12){ap=" PM";}  
    else if(nhour>12){ap=" PM";nhour-=12;}  
    if(nyear<1000) nyear+=1900;  
    if(nmin<=9) nmin="0"+nmin;  
    if(nsec<=9) nsec="0"+nsec;  
    document.getElementById('clockbox').innerHTML=""+ndate+"/"+(nmonth+1)+"/"+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";  
   }  
   //---  
   function doRefrechTemp()  
   {  
   var data_file = "getTempArduino.php"; //-- Exemple Return {"temp":10,"humi":80}  
   var http_request = new XMLHttpRequest();  
   GetClock();  
   try{  
    // Opera 8.0+, Firefox, Chrome, Safari  
    http_request = new XMLHttpRequest();  
   }catch (e){  
    // Internet Explorer Browsers  
    try{  
      http_request = new ActiveXObject("Msxml2.XMLHTTP");  
    }catch (e) {  
      try{  
       http_request = new ActiveXObject("Microsoft.XMLHTTP");  
      }catch (e){  
       // Something went wrong  
       alert("Your browser broke!");  
       return false;  
      }  
    }  
   }  
   http_request.onreadystatechange = function(){  
    if (http_request.readyState == 4 )  
    {  
     // Javascript function JSON.parse to parse JSON data  
     var jsonObj = JSON.parse(http_request.responseText);  
     temp=jsonObj.temp;  
     humi=jsonObj.humi;        
   //--- RGRAPH SECTION --- //////////  
   function getGraph(id, d1)  
   {  
     // After creating the chart, it's stored on the global window object  
     if (!obj) {  
       obj = new RGraph.Line({  
         id: id,  
         data: d1,  
         options: {  
           background: {  
             color: 'white',  
             grid: {  
               vlines: false,  
               border: false  
             }  
           },  
           title: {  
             self: 'Temperature',  
             vpos: 0.5,  
             xaxis: {  
               self: 'Last minute',  
               pos: 0.5  
             }  
           },  
           colors: ['red'],  
           linewidth: 1, //-- 0.5  
           yaxispos: 'right',  
           ymax: 50,  
           xticks: 2,  
           filled: true,  
         //   numyticks: 2,  
           shadow: {  
             color: '#aaa',  
             blur: 5  
           },  
           tickmarks: null,  
          // ylabels: {  
           //   count: 2  
           // }  
         }  
       })  
       var grad = obj.context.createLinearGradient(0,0,0,250);  
       grad.addColorStop(0, '#efefef');  
       grad.addColorStop(0.9, 'rgba(0,0,0,0)');  
       obj.set('fillstyle', [grad]);  
     }  
     return obj;  
   }  
   function drawGraph ()  
   {  
     // "cache" this in a local variable  
     var _RG = RGraph;  
     RGraph.clear(document.getElementById("cvs"));  
     var graph = getGraph('cvs', d1);  
     graph.draw();  
     // Add some data to the data arrays  
     d1.push(temp);  
     if (d1.length > 600) {  
       d1 = _RG.array_shift(d1);  
     }  
     obj.original_data[0] = d1;  
   }  
    drawGraph();  
   ////////////  
        }  
    }  
   http_request.open("GET", data_file, true);  
   http_request.send();   
   setTimeout("doRefrechTemp()", 10000);}                   
 </script>    
   <div id="clockbox"></div>  
 </body>  
 </html>  

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Articles récents
Commentaires récents
fatima sur Bienvenue !
AdminDroid sur Bienvenue !
fatima sur Bienvenue !
Archives
Catégories
%d blogueurs aiment cette page :