create dynamic line chart use interval to make axisY move

[rayateng]

I’m a new one in this program, I need help from all of you so please forgive me if I say something wrong.
My problem about interval value because of it has very small value to increase so in graph have look not good of axisY.
Please help me :(

[Suyash Singh]

@rayateng,

Are you looking for interval?
If this doesn’t suit your requirements, can you please share pictorial representation or jsfiddle reproducing the issue you are facing so that we can understand it better & help you out.

__
Suyash Singh
Team CanvasJS

[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>

[rayateng]

I’m sorry maybe you hard to understand my meaning. But please test on my code you will see axisY has many interval so how can I custom it?

• This reply was modified 6 years, 5 months ago by rayateng. Reason: write wrong

[Suyash Singh]

@rayateng,

The interval you are setting for axisY is small, which is why labels start overlapping after a few updates. Setting interval to a larger value or letting CanvasJS handle it automatically (by commenting out the interval) should work fine in your case.

___
Suyash Singh
Team CanvasJS

[rayateng]

Thank you very much for your help. Could I ask you some about how to show back to default template of chart line?

[Suyash Singh]

@rayateng,

You can reset the interval back to CanvasJS defaults by setting it to null & re-rendering the chart.

If this doesn’t suit your requirements, can you please brief us about your requirements more so that we can understand it better & help you out.

___
Suyash Singh
Team CanvasJS

[rayateng]

Thank you brother for help me :)