Cant update Dynamic Chart via AJax JSON for Candle Stick

Question

Here is the data the JSON is returning:
&#8220;{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]}&#8221;
function to update graph:
  function getValuesChart() {
	     var scriptUrl = &#8220;controller.php?route=graph&#8221;;
	     $.ajax({
	        url: scriptUrl,
	        type: &#8216;get&#8217;,
	        dataType: &#8216;json&#8217;,
	        async: false,
	        success: function(data) {
	            dps = data;
	        }
	     });
	   var charts = $(&#8220;.chartContainer&#8221;).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(&#8220;chartContainer&#8221;,
		{
			zoomEnabled: true,
			animationEnabled: true,
			axisY: {
				 logarithmic:  true,
				 includeZero: false,
			//	 minimum: 3665,
			//	 maximum: 3910,
				 tickThickness: 0,
				 gridThickness:0
			},
			axisX: {
				interval:1,
			//	minimum: new Date(&#8216;2017-09-26 14:14:00&#8217;)
			},
			data: [
			{
				type: &#8220;candlestick&#8221;,
				risingColor: &#8220;green&#8221;,
				color: &#8220;red&#8221;,
				markerBorderColor: &#8220;#000000&#8221;,
				dataPoints: dps
			}]
		});
		chart.render();
}
	setInterval(function(){getValuesChart()}, 1000);

indranil · Answer

@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

tandemco · Answer

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 · Answer

@tandemco

Please take a look at this jsfiddle.

___________
Indranil Deo,
Team CanvasJS

tandemco · Answer

anyone??

tandemco · Answer

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

Front End Technology Samples

Server Side Technology Samples

FORUMS

Login to Ask a Question or Reply

Cant update Dynamic Chart via AJax JSON for Candle Stick