Highcharts : draw a chart with data from XMLHttpRequest () -
Highcharts : draw a chart with data from XMLHttpRequest () -
i begin in javascript...
i draw chart info xmlhttprequest () yaxis. receive info server this:
function cgi_return_data_conso_elec() { var xhr = new xmlhttprequest(); xhr.open("get", "/cgi-bin/return_data_conso_elec?01/04/2015", true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readystate == 4 && (xhr.status == 200 || xhr.status == 0)) { var array_reponse = xhr.responsetext.split("/"); var data1 = array_reponse[1]; alert(data1); } else { //document.getelementbyid("text_test").innerhtml = "wait..."; } } } the value of data1 = 333,2682,2823,1749,624,860,4450,2402,2552,2199,605,794,2433,4060,821,692,477,1005,2904,2438,2066,1652,1672,1544 draw graph this:
$('#container').highcharts ({ chart: { type: 'column' }, title: { text: 'conso elec' }, subtitle: { text: 'source: patate.com' }, xaxis: { categories: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'], labels: { rotation: - 90, //align: 'right', x: -26, y: 15 //distance: 100, //padding: 175 //format: '{value} km' } //crosshair: true }, yaxis: { min: 0, title: { text: 'conso (wh)' } }, plotoptions: { column: { pointpadding: 0, borderwidth: 0 } }, series: [{ name: 'berlin', data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1,42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] }] }); i want replace info of "berlin" variable "data1" can not !!
my html page:
<!doctype html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="test_style.css" /> <script type="text/javascript" src="/lib-js/jquery.min.js"></script> <script src="/lib-js/highcharts/highcharts.js"></script> <script src="/lib-js/highcharts/modules/exporting.js"></script> <script src="test_code_js.js"></script> <title>test graph info conso elec</title> </head> <body onload="cgi_return_data_conso_elec();"><!-- lance la fonction au chargement de la page --> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html> i know must used: "series.data.push(parsefloat(item));"
but can not have set in code...
if can help me, happy ... give thanks in advance
thank reply. here solution works:
function graph_teleinfo() { var xhr = new xmlhttprequest(); xhr.open("get", "/cgi-bin/return_data_conso_elec?01/04/2016", true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readystate == 4 && (xhr.status == 200 || xhr.status == 0)) { var array_reponse = xhr.responsetext.split("/");//separe les differents champs du str reponse var data_tempo; var data1 = new array(); data_tempo = array_reponse[1].split(","); //alert(data2.length); var data3 = new array(); data3 = array_reponse[2].split(","); //alert(data3); (var = 0; < data_tempo.length; i++) { data1[i] = parsefloat(data_tempo[i]);//stock les valeur du str contenu dans "xhr.responsetext" dans le tableau et les transforme en float }//fin for... //----------------------------------------------- //construit le graph $('#container').highcharts ({ chart: { type: 'column' }, title: { text: '01/04/2015' }, subtitle: { text: 'source: raspi-elec' }, xaxis: { categories: data3, labels: { rotation: - 90, align: 'right', //x: -30 , //y: 15 } }, yaxis: { min: 0, title: { text: '(wh)' }, labels: { }, }, tooltip: { usehtml: true, pointformat: '{point.y} wh' }, plotoptions: { column: { pointpadding: 0, borderwidth: 0 } }, series: [{ name: 'consommation électrique', data: data1 }] }); //----------------------------------------------- } else { //document.getelementbyid("text_test").innerhtml = "wait..."; } } }//fin fonction graph_teleinfo() highcharts xmlhttprequest cgi
Comments
Post a Comment