Home forums Using CanvasJS Cant update Dynamic Chart via AJax JSON for Candle Stick

This topic contains 6 replies, has 2 voices, and was last updated by  Indranil Deo 2 weeks, 6 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16144

    tandemco
    Member

    Here is the data the JSON is returning:
    “{x: 1,y:[3888.6890, 3884.5881,3884.5881,3884.5881]},{x: 2,y:[3884.5881, 3885.0891,3883.7894,3885.0891]},{x: 3,y:[3885.0891, 3885.4895,3884.1890,3885.4895]},{x: 4,y:[3885.4895, 3885.7891,3881.9871,3885.7891]},{x: 5,y:[3885.7891, 3886.5883,3878.0870,3886.5883]},{x: 6,y:[3886.5883, 3882.5873,3882.4870,3882.5873]},{x: 7,y:[3882.5873, 3882.4876,3882.4874,3882.4876]},{x: 8,y:[3882.4876, 3883.3880,3882.5899,3883.3880]},{x: 9,y:[3883.3880, 3884.7892,3885.0893,3884.7892]},{x: 10,y:[3884.7892, 3886.4906,3885.4907,3886.4906]},{x: 11,y:[3886.4906, 3885.4907,3885.3891,3885.4907]},{x: 12,y:[3885.4907, 3886.3905,3886.3900,3886.3905]},{x: 13,y:[3886.3905, 3886.3908,3885.9904,3886.3908]},{x: 14,y:[3886.3908, 3886.9000,3886.9400,3886.9000]},{x: 15,y:[3886.9000, 3887.3905,3887.3900,3887.3905]},{x: 16,y:[3887.3905, 3888.0902,3884.1905,3888.0902]},{x: 17,y:[3888.0902, 3884.1909,3884.1905,3884.1909]},{x: 18,y:[3884.1909, 3886.6903,3886.6901,3886.6903]},{x: 19,y:[3886.6903, 3888.3920,3888.3920,3888.3920]},{x: 20,y:[3888.3920, 3889.0900,3888.1900,3889.0900]},{x: 21,y:[3889.0900, 3889.1920,3887.6923,3889.1920]},{x: 22,y:[3889.1920, 3888.7925,3888.4921,3888.7925]},{x: 23,y:[3888.7925, 3889.1927,3889.3921,3889.1927]},{x: 24,y:[3889.1927, 3889.8970,3889.8920,3889.8970]}”

    function to update graph:
    function getValuesChart() {

    var scriptUrl = “controller.php?route=graph”;
    $.ajax({
    url: scriptUrl,
    type: ‘get’,
    dataType: ‘json’,
    async: false,
    success: function(data) {
    dps = data;
    }
    });

    var charts = $(“.chartContainer”).CanvasJSChart({

    data: [
    {
    dataPoints: dps
    }]
    });

    charts.render();
    }

    If i hardcode and paste this and set dps to the json above, it plots fine, but via jquery, it doesnt, the code before to initiate the graph and update it is:

    chart = new CanvasJS.Chart(“chartContainer”,
    {
    zoomEnabled: true,
    animationEnabled: true,
    axisY: {
    logarithmic: true,
    includeZero: false,
    // minimum: 3665,
    // maximum: 3910,
    tickThickness: 0,
    gridThickness:0
    },
    axisX: {
    interval:1,
    // minimum: new Date(‘2017-09-26 14:14:00’)
    },
    data: [
    {
    type: “candlestick”,
    risingColor: “green”,
    color: “red”,
    markerBorderColor: “#000000”,
    dataPoints: dps
    }]
    });
    chart.render();
    }

    setInterval(function(){getValuesChart()}, 1000);

    #16145

    tandemco
    Member

    I have tried the following strings (returned from ajax call):

    [{“x”:0,”y”:[3879.0850, 3875.1865,3875.1860,3875.1865]},{“x”: 1,”y”:[3875.1865, 3879.0850,3879.0800,3879.0850]},{“x”: 2,”y”:[3879.0850, 3882.9883,3882.9881,3882.9883]},{“x”: 3,”y”:[3882.9883, 3883.7885,3883.7883,3883.7885]},{“x”: 4,”y”:[3883.7885, 3884.6880,3878.8861,3884.6880]},{“x”: 5,”y”:[3884.6880, 3881.6886,3880.9860,3881.6886]},{“x”: 6,”y”:[3881.6886, 3880.9860,3880.9860,3880.9860]},{“x”: 7,”y”:[3880.9860, 3881.1866,3878.3853,3881.1866]},{“x”: 8,”y”:[3881.1866, 3879.0869,3879.0863,3879.0869]},{“x”: 9,”y”:[3879.0869, 3880.2850,3878.0851,3880.2850]},{“x”: 10,”y”:[3880.2850, 3878.0851,3877.9851,3878.0851]},{“x”: 11,”y”:[3878.0851, 3877.9851,3877.9853,3877.9851]},{“x”: 12,”y”:[3877.9851, 3882.7873,3882.4878,3882.7873]},{“x”: 13,”y”:[3882.7873, 3883.1879,3883.0877,3883.1879]},{“x”: 14,”y”:[3883.1879, 3883.6876,3882.1863,3883.6876]},{“x”: 15,”y”:[3883.6876, 3882.2879,3882.2860,3882.2879]},{“x”: 16,”y”:[3882.2879, 3885.4881,3884.9871,3885.4881]},{“x”: 17,”y”:[3885.4881, 3886.5889,3886.1881,3886.5889]},{“x”: 18,”y”:[3886.5889, 3886.2882,3886.1886,3886.2882]}]

    dps is global
    chart is global
    —–pasted—-

    var dps;
    var chart;

    function getValuesChart() {

    var scriptUrl = “controller.php?route=graph”;
    $.ajax({
    url: scriptUrl,
    type: ‘get’,
    dataType: ‘text’,
    async: false,
    success: function(data) {
    dps = data;
    }
    });

    chart.render();
    }

    nothing is plotted.

    • This reply was modified 3 weeks, 5 days ago by  tandemco.
    • This reply was modified 3 weeks, 5 days ago by  tandemco.
    #16148

    tandemco
    Member

    not sure why second reply got deleted but here is the TEXT i am sending back via my ajax call:

    [{x:0,y:[3883.7885, 3882.9883,3882.9881,3882.9883]},{x: 1,y:[3882.9883, 3883.7885,3883.7883,3883.7885]},{x: 2,y:[3883.7885, 3884.6880,3878.8861,3884.6880]},{x: 3,y:[3884.6880, 3881.6886,3880.9860,3881.6886]},{x: 4,y:[3881.6886, 3880.9860,3880.9860,3880.9860]},{x: 5,y:[3880.9860, 3881.1866,3878.3853,3881.1866]},{x: 6,y:[3881.1866, 3879.0869,3879.0863,3879.0869]},{x: 7,y:[3879.0869, 3880.2850,3878.0851,3880.2850]},{x: 8,y:[3880.2850, 3878.0851,3877.9851,3878.0851]},{x: 9,y:[3878.0851, 3877.9851,3877.9853,3877.9851]},{x: 10,y:[3877.9851, 3882.7873,3882.4878,3882.7873]},{x: 11,y:[3882.7873, 3883.1879,3883.0877,3883.1879]},{x: 12,y:[3883.1879, 3883.6876,3882.1863,3883.6876]},{x: 13,y:[3883.6876, 3882.2879,3882.2860,3882.2879]},{x: 14,y:[3882.2879, 3885.4881,3884.9871,3885.4881]},{x: 15,y:[3885.4881, 3886.5889,3886.1881,3886.5889]},{x: 16,y:[3886.5889, 3886.2882,3886.1886,3886.2882]},{x: 17,y:[3886.2882, 3886.2881,3886.1883,3886.2881]},{x: 18,y:[3886.2881, 3886.7886,3886.8891,3886.7886]},{x: 19,y:[3886.7886, 3886.9891,3886.1895,3886.9891]},{x: 20,y:[3886.9891, 3888.9890,3888.9800,3888.9890]},{x: 21,y:[3888.9890, 3891.0896,3891.2100,3891.0896]},{x: 22,y:[3891.0896, 3892.1894,3892.1893,3892.1894]}]

    and here is the code that is trying to refresh the graph, dps is global and so is chart

    var dps;
    var chart;

    function getValuesChart() {

    var scriptUrl = “controller.php?route=graph”;
    $.ajax({
    url: scriptUrl,
    type: ‘get’,
    dataType: ‘text’,
    async: false,
    success: function(data) {
    dps = data;
    }
    });

    chart.render();
    }

    #16158

    tandemco
    Member

    anyone??

    #16165

    Indranil Deo
    Member

    @tandemco

    Please take a look at this jsfiddle.

    ___________
    Indranil Deo,
    Team CanvasJS

    #16169

    tandemco
    Member

    Thank you Indranil!

    What if we are getting the entire array of data again instead of just one more stick info at a time? Keep in mind I am trying to make a Dynamic candle stick chart that renders stock prices.

    1. Should we clear the chart? right now it plots the data right on top of the last data?
    2. I tried (and it didn’t work) in the ajax

    chart.options.data[0].dps = data;
    chart.render();
    3. I also tried to set dps to [] reset the array to clear the chart to no avail.

    Let me know,
    thanks

    #17216

    Indranil Deo
    Member

    @tandemco,

    1. Should we clear the chart? right now it plots the data right on top of the last data?

    You should empty the dataPoints on ecah AJAX call.

    2. I tried (and it didn’t work) in the ajax
    chart.options.data[0].dps = data;
    chart.render();

    It should be chart.option.data[0].dataPoints = data instead of chart.options.data[0].dps = data;

    3. I also tried to set dps to [] reset the array to clear the chart to no avail.

    You can render chart initially with JSON data. Then you can update the chart dynamically from JSON data.
    Soon after every AJAX call emptying dps & updating dataPoints accordingly will work fine in your case.

    Please take a look at this jsfiddle. Also have a look at Live Updating Charts from JSON API & AJAX.

    __________
    Indranil Deo,
    Team CanvasJS

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

You must be logged in to reply to this topic.