Home forums Using CanvasJS Real time multi series graph from JSON

This topic contains 2 replies, has 2 voices, and was last updated by  Vulpe 3 months, 4 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21869

    Vulpe
    Member

    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://canvasjs.com/assets/script/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.

    #21873

    Priyanka M S
    Member

    Vulpe,

    Please take a look at this jsfiddle.

    __
    Priyanka M S
    Team CanvasJS

    #21874

    Vulpe
    Member

    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.