Cant update Dynamic Chart via AJax JSON for Candle Stick

[tandemco]

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);

[tandemco]

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 7 years, 3 months ago by tandemco.
• This reply was modified 7 years, 3 months ago by tandemco.

[tandemco]

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();
}

[tandemco]

anyone??

[Indranil]

@tandemco

Please take a look at this jsfiddle.

___________
Indranil Deo,
Team CanvasJS

[tandemco]

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

[Indranil]

@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