Autre bibliothèque de graphiques : http://www.highcharts.com/
Exemple d’affichage Température et Humidité :
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 :
<!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>
AndroLogiciels 
Laisser un commentaire