Retrieving Json Data In Highcharts

I have been trying to customize an excellent jsfiddle that I was fortunate enough to be directed to in an earlier question here: Switching between many Highcharts using buttons or

Solution 1:

You're actually very close to something that will work. Your problem is related to the timing of async calls relative to inline code, and also the way assignments work in javascript.

As a quick example, here's some code:

x = {foo:5};y = x.foo;x.foo = 9;

At the end of this, x.foo is 9, but y is still 5.

Your line of code

chartData.chart1 = json[6]['data'];

doesn't execute until after the call to the server completes; it's contained within a call back function. However, this section of code

chartOptions.chart1= {
  chart: {
    type:'column'
  },
  title: {
    text:'Chart 1 Title'
  },
  yAxis: {
    title: {
      text:'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name:'Chart 1 Series',
    data:chartData.chart1
  }]
};

executes immediately. See the problem? You've cooked the current value of chartData.chart into chartOptions.chart1 BEFORE the server call has completed. That's why you're not seeing your data.

Instead, try something like this:

chartOptions.chart1= {
  chart: {
    type:'column'
  },
  title: {
    text:'Chart 1 Title'
  },
  yAxis: {
    title: {
      text:'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name:'Chart 1 Series',
    data: []
  }]
};$.getJSON("../../companies/charts/data.php", {id:escape(tableName)},function(json) {
    chartOptions.chart1.series[0].data=json[6]['data'];
});

Now when your data comes back, you're putting it into the object that is actually being used to render the chart (once you click on the right button). Keep in mind that it's going to be empty until the server call completes.