You must be logged in to post your query.
Home › Forums › Chart Support › Dynamic charts
Hi, Found this code that display a value from a microcontroller on a web page. How can I use this together with your dynamic charts? If we take your Found this code that display a value from a microcontroller on a web page. How can I use this together with your dynamic charts? If we take your dynamic line chart demo as a exemple. I would like to replace the random numbers with the value held in “temp1”.
//Stefan
<!DOCTYPE html> <html> <script> function GetInput() { nocache = "&nocache=" + Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseXML != null) { // extract XML data from XML file (containing switch states and analog value) document.getElementById("temp1").innerHTML = this.responseXML.getElementsByTagName('temp')[0].childNodes[0].nodeValue; } } } } request.open("GET", "ajax_inputs" + nocache, true); request.send(null); setTimeout('GetArduinoInputs()', 1000); } </script> <body onload="GetInput()"> Temperatur: <span id="temp1">...</span> </body> </html>
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = function () { var dps = []; // dataPoints var chart = new CanvasJS.Chart("chartContainer",{ title :{ text: "Live Random Data" }, data: [{ type: "line", dataPoints: dps }] }); var xVal = 0; var yVal = 100; var updateInterval = 20; var dataLength = 500; // number of dataPoints visible at any point var updateChart = function (count) { count = count || 1; // count is number of times loop runs to generate random dataPoints. for (var j = 0; j < count; j++) { yVal = yVal + Math.round(5 + Math.random() *(-5-5)); dps.push({ x: xVal, y: yVal }); xVal++; }; if (dps.length > dataLength) { dps.shift(); } chart.render(); }; // generates first set of dataPoints updateChart(dataLength); // update chart after specified time. setInterval(function(){updateChart()}, updateInterval); } </script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width:100%;"> </div> </body> </html>
You must be logged in to reply to this topic. Login/Register