Reply To: create dynamic line chart use interval to make axisY move

[rayateng]

this is my code:
<script>
window.onload = function () {

var dps = []; // dataPoints
var chart = new CanvasJS.Chart(“chartContainer”, {
title :{
text: “Dynamic Data”
},
data: [{
type: “spline”,
markerType: “none”, //”circle”, “square”, “cross”, “none”
lineThickness: 4,
color: “black”,
dataPoints: dps
}]
});

var xVal = 0;
var yVal = 0;
var updateInterval = 100;
var dataLength = 1; // number of dataPoints visible at any point
var ms = 0;

var updateChart = function (count) {

count = count || 1;

for (var j = 0; j < count; j++) {
yVal = Math.floor(100 * Math.pow(Math.E, 0.00006 * ms)) / 100;
dps.push({
x: xVal,
y: yVal
});
xVal = xVal+0.02;
ms=ms+100;
}
console.log(‘X= ‘+JSON.stringify(xVal)+’ Y= ‘+JSON.stringify(yVal));

//=========== yVal ==================
if(yVal <= 1.8){
chart.options.axisY = {
gridThickness: 0,
suffix: “x”,
viewportMinimum:1,
viewportMaximum:1.8,
interval:0.2,
};
}
else if(yVal <= 3.03){
chart.options.axisY = {
gridThickness: 0,
suffix: “x”,
viewportMinimum:1,
interval:0.01,
};
}
//=========== xVal ==================
if(xVal <= 1.9800000000000013){
chart.options.axisX = {
viewportMinimum:0,
viewportMaximum:2,
interval:0.5,
};
}
else if(xVal <= 3.700000000000003){
chart.options.axisX = {
viewportMinimum:0,
interval:0.5,
};
}
chart.render();
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);

}
</script>