Home Forums Chart Support Dynamic charts

Dynamic charts

Viewing 1 post (of 1 total)
  • #9142

    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>
    • This topic was modified 8 years, 8 months ago by StefanA.
    • This topic was modified 8 years, 8 months ago by StefanA.
    • This topic was modified 8 years, 8 months ago by StefanA.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.