<!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="https://cdn.canvasjs.com/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
.
