Home forums Using CanvasJS Updating a chart using a JSON file

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20385

    saul_romero
    Member

    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>

    #20390

    Vishwas R
    Keymaster

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.