You must be logged in to post your query.
Home › Forums › Chart Support › Real time multi series graph from JSON
Hello,
I am trying to graph multiple series of data on one chart using one JSON data source. I also want them to be able to update in real time together, although it isn’t that important.
The code I am using for the chart is as follows
<html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; border-right:1px solid #bbb; } li:last-child { border-right: none; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #004299; } </style> </head> <body style="background-image:url(http://www.example.com/bgimage.gif)"> <ul> <li><a class="active" href="Home.php">Home</a></li> <li><a href="https://192.168.0.109/phpmyadmin/">PhPmyAdmin</a></li> <li><a href="timecanvasConn.php">Graph</a></li> <li><a href="multiaxes.php">MultiGraph</a></li> <li><a href="list.php">Data List</a></li> <li><a href="timecanvas.php">Live Chart</a></li> <li style="float:right"><a href="about.html">About</a></li> </ul> <meta charset="utf-8"/> <script type="text/javascript"> window.onload = function() { var data = [[][][][]]; var dataPoints = []; var dataPoints2 = []; var dataPoints3 = []; var dataPoints4 = []; var chart; $.getJSON('TLight.php', function(data) { $.each(data, function(key, value){ dataPoints.push({x:(value)["x"], y:(value["y"]), y2:(value["y2"]),y3:(value["y3"]),y4:(value["y4"])}); }); chart = new CanvasJS.Chart("chartContainer",{ title:{ text:"Live Chart with dataPoints from External JSON" }, zoomEnabled: true, axisX:{ scaleBreaks:{ autoCalculate: true, maxNumberOfAutoBreaks: 5, collapsibleThreshold: "15%" }, }, zoomType: "xy", //backgroundColor: "#bdcfed", animationEnabled: true, animationDuration: 5000, exportEnabled: true, theme: "dark1", data: [{ showInLegend: true, legendText: "LS1", markerType: "circle", markerSize: 6, markerColor: "red", axisYIndex: 0, axisYType: "Primary", xValueType: "dateTime", xValueFormatString: "YYYY-MM-DD HH:mm:ss", toolTipContent: "x:{x}, y: {y}", type: "line", dataPoints : dataPoints, },{{ showInLegend: true, legendText: "LS2", markerType: "square", markerSize: 6, markerColor: "yellow", axisYIndex: 1, xValueType: "dateTime", xValueFormatString: "YYYY-MM-DD HH:mm:ss", toolTipContent: "x:{x}, y: {y}", type: "line", dataPoints : dataPoints, },{{ showInLegend: true, legendText: "LS3", markerType: "green", markerSize: 6, markerColor: "red", axisYIndex: 2, xValueType: "dateTime", xValueFormatString: "YYYY-MM-DD HH:mm:ss", toolTipContent: "x:{x}, y: {y}", type: "line", dataPoints : dataPoints, },{{ showInLegend: true, legendText: "LS4", markerType: "cross", markerSize: 6, markerColor: "blue", axisYIndex: 3, xValueType: "dateTime", xValueFormatString: "YYYY-MM-DD HH:mm:ss", toolTipContent: "x:{x}, y: {y}", type: "line", dataPoints : dataPoints, }] }); chart.render(); updateChart(); }); var updateInterval = 2000; function updateChart() { $.getJSON('TLight.php', function(result) { chart.options.data[0].dataPoints = result; chart.render(); }); chart.render(); //setTimeout(function(){updateChart()}, updateInterval); }; var timeoutId; function startLiveChart() { timeoutId = setInterval(function () { updateChart() }, updateInterval); $('#StartButton').unbind('click', startLiveChart); $('#StopButton').bind('click', stopLiveChart); } function stopLiveChart() { clearTimeout(timeoutId); $('#StopButton').unbind('click', stopLiveChart); $('#StartButton').bind('click', startLiveChart); } $('#StartButton').bind('click', startLiveChart); } </script> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </head> <body> <div style="margin-left:35%"> <style type="text/css"> #StartButton { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } #StartButton:hover {background-color:#3e8e41} #StartButton:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } #StopButton { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #f44336; border: none; border-radius: 15px; box-shadow: 0 9px #999; } #StopButton:hover {background-color:#cc0000} #StopButton:active { background-color: #cc0000; box-shadow: 0 5px #666; transform: translateY(4px); } </style> </div> <div id="chartContainer" style="height: 500px; width: 100%;"></div> <button id="StartButton" class="btn btn-success" type="submit" value="Start">Start Live Chart</button> <button id="StopButton" class="btn btn-danger" type="submit" value="Stop">Stop Live Chart</button> </body> </html>
The JSON data looks like this https://api.myjson.com/bins/1dwyg6 Although I am pulling the data straight from a locally hosted database.
Any help would be greatly appreciated.
Vulpe,
Please take a look at this jsfiddle.
__ Priyanka M S Team CanvasJS
Thank you very much, that works perfectly.
You must be logged in to reply to this topic. Login/Register