Home › Forums › Chart Support › Real time multi series graph from JSON

Real time multi series graph from JSON

Viewing 3 posts - 1 through 3 (of 3 total)
  • July 18, 2018 at 1:30 pm #21869

    Vulpe

    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.

    July 18, 2018 at 5:53 pm #21873

    Priyanka M S

    Vulpe,

    Please take a look at this jsfiddle.

    __
    Priyanka M S
    Team CanvasJS

    July 18, 2018 at 7:02 pm #21874

    Vulpe

    Thank you very much, that works perfectly.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.