Home › Forums › Chart Support › Dynamic charts

Dynamic charts

Viewing 1 post (of 1 total)
  • July 2, 2015 at 10:56 pm #9142

    StefanA

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

You must be logged in to reply to this topic.