You must be logged in to post your query.
Home › Forums › Chart Support › Updating a chart using a JSON file
Tagged: javascript, JSON
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>
@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
You must be logged in to reply to this topic. Login/Register