Home forums Using CanvasJS Data from Ajax is not updating Chart

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  elbowwilham 11 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #9780

    elbowwilham
    Member
    <!DOCTYPE HTML>
    <html>
    <head>
    <script src="js/jquery.js"></script> 
    <script src="../library/canvasjs/canvasjs.min.js"></script>
    
    	<script type="text/javascript">
    	window.onload = function () {
    
          var dps = [{x: 1, y: 10}];   //dataPoints. 
    
          var chart = new CanvasJS.Chart("chartContainer",{
          	title :{
          		text: "Live Data"
          	},
          	axisX: {						
          		title: "Axis X Title"
          	},
          	axisY: {						
          		title: "Units"
          	},
          	data: [{
          		type: "line",
          		dataPoints : dps
          	}]
          });
    
          chart.render();
          var xVal = dps.length + 1;
          var yVal = 20;	
          var updateInterval = 1000;
    
    var updateChart = function () {
    $.getJSON('ajax/mikrotikTraffic.php', function (result) {
    
    dps.splice(0, dps.length);
    
    $.each(result, function (index, value) {
    dps.push(value);
    console.log(result);
    });
    });
    
    chart.render();
    };
    
    /*
    			var updateChart = function () {
              $.getJSON('ajax/mikrotikTraffic.php', function (result) {
               console.log(result);
              chart.options.data[0].dataPoints = result;
      });
    
    chart.render();
    };
    */
    
    /*      //var updateChart = function () {
          var ip = '10.26.29.50';	
          	
          //	yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
             // yVal = bandwidthCheck(ip);  
            
          	dps.push({x: xVal,y: yVal});
          	
          	xVal++;
          	if (dps.length >  10 )
          	{
          		dps.shift();				
          	}
    
          	chart.render();		
    
    	// update chart after specified time. 
    
    };
     */
    
    function bandwidthCheck(ip) {
    //show the cards associated with this set
    
        //var ajax_load = "<img src='../../images/processing.gif' width='20' alt='loading...' />";
        //$('#apResults'+equip_id).html(ajax_load);
       
       $.getJSON('ajax/mikrotikTraffic.php', function (result) {
    
          chart.options.data[0].dataPoints = result;
     });
     
     /*  
        $.ajax({
            type: "POST",
            url: "ajax/mikrotikTraffic.php",
            data:{ip: ip},
            //dataType: 'html',
            success: function(responseText) {
              //$('#apResults'+equip_id).html(responseText).addClass('equipresults');
              console.log(responseText);
              //handleData(responseText);
           }
        });
        //return false;
      */
    }
    
    setInterval(function(){updateChart()}, updateInterval); 
    }
    </script>
    <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    	<div id="chartContainer" style="height: 300px; width: 100%;">
    	</div>
    </body>
    </html>

    I have tried several ways to update my chart. I can see that the data is coming over in the console, but the chart is not rendering the new data.

    Here is my script running: https://alohab.com/customer/crm_admin/realtimeTraffic.php

    #9781

    Vishwas R
    Keymaster

    We just looked into your JSON API and its returning 0 every time. If you can make it return some data we would be able help you in updating the chart.

    #9782

    elbowwilham
    Member

    Thank you for looking at this.
    Sorry, it is pulling data from a Router that I had turned off over night. I have verified that when the router is on, it is not 0. I can leave the router on though.

    • This reply was modified 11 months, 1 week ago by  elbowwilham.
    #9784

    elbowwilham
    Member

    I got it to work.
    I was also able to get it to work with 2 lines.
    Let me know if you want me to show my code.

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

You must be logged in to reply to this topic.