Updating a chart using a JSON file

[saul_romero]

Hi team, I have a question I want to use a JSON file to create a chart but I want that my chart has an animation using the json data from the beginning to the last record of the JSON file. It is possible ?? now I have a script how load a json file and this update the information if one new record is storing in my database.
I let you my code:
`<script>
var dataLength = 0;
var data = [];
var Rate = 60; //
var updateInterval = 60 * 1000 / (data.length * Rate);

function sortDataPoints(dps, par)
{
var swapped;
do {
swapped = false;
for (var i = 0; i < dps.length – 1; i++) {
if (dps[i][par] > dps[i + 1][par]) {
var temp = dps[i];
dps[i] = dps[i + 1];
dps[i + 1] = temp;
swapped = true;
}
}
} while (swapped);
}

function updateChart() {
$.getJSON(“myfile.json”, function (result) {
if (dataLength !== result.length) {
for (var i = dataLength; i < result.length; i++) {
data.push({
x: parseFloat(result[i].y),
y: parseFloat(result[i].x)
});
// set maximum length to create chart
if (data.length > 500) {
data.shift(); }
}
dataLength = result.length;
sortDataPoints(data, “x”);
chart.render();
}
});
}
CanvasJS.addColorSet(“greenShades”,
[//colorSet Array
“#2F4F4F”,
“#008080”,
“#2E8B57”,
“#3CB371”,
“#90EE90”
]);
var chart = new CanvasJS.Chart(“chart”, {
backgroundColor: “transparent”,
colorSet: “greenShades”,
animationEnabled: true,
theme: “theme3”,
legend:{
fontSize: 12,
},
panEnabled: true,
title: {
text: “I”,
},
axisX: {
lineThickness:0,
tickThickness:0,
valueFormatString:” “,//space
},
axisY: {
lineThickness:0,
tickThickness: 0,
gridThickness: 0,
},
data: [{
showInLegend: false,
toolTipContent: “”,
//legendText: valor,
markerSize: 0,
color:”black”,
type: “line”, dataPoints: data}],
});
setInterval(updatechart,updateInterval);
</script>

[Vishwas R]

@saul_romero,

Animation happens only on first render of chart, as of now. And the code you have shared seems to be working fine with animation. Please take a look at this jsfiddle.

If this doesn’t fulfill your requirements or if you are facing any other issues, can you please create a jsfiddle and share it with us so that we can understand it better and help you out?

—
Vishwas R
Team CanvasJS