Retrieving JSON data in highcharts

Question

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 link text

I am very new to javascript programming (and highcharts also) and I am having some difficulties in retrieving my own data from a database. Currently I have set up my charts like the following:

 $('chart1').ready(function() {
        var options = {
            chart: {
                renderTo: 'chart1',
                type: 'column',
                marginTop: 40,
                marginBottom: 75
            },
            legend: {
                enabled: false
            },
            title: {
                text: 'Revenues',
                x: 25 //center
            },

            xAxis: {
                title: {
                    text: ''
                },
                categories: []
            },
            yAxis: {
                showInLegend: false,
                tickAmount: 11,
                endOnTick: false,
                startOnTick: true,
                labels: {
                    formatter: function () {
                    return Highcharts.numberFormat(this.value, 0, '.', ',');
                                }
                },
                title: {
                    text: '<?php echo $unitCurr; ?>'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',');
                }
            },
            series: []
        }
        var tableName = '<?php echo $tableName; ?>'
        $.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];
            chart = new Highcharts.Chart(options);
        });
    });

At the bottom you will notice that I am using JSON to retrieve information from my database and everything works just fine. In my earlier question I was asking about how to switch charts using buttons instead and was directed to the following jsfiddle: http://jsfiddle.net/jlbriggs/7ntyzo6u/

This example consists of 3 charts but I have just been trying to manipulate the first chart in order to find out if I could make my own data display instead of the random data that is being generated:

var chart,
  chartOptions = {},
  chartData = {};

chartData.chart1 = randomData(25);
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);

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
  }]
};

But no matter how much I tried, I just can't seem to change the "data: chartData.chart1" in such a way that it retrieve the arrays I get from my $.getJSON function. Can any of you help me explain why, for instance, the below code doesn't work?. Here I try to exchange the ChartData.chart1 array for my database data. I'm not experienced enough to tell whether its the whole random number generation part of the code that prevents it from working or if it's my understanding thats severely lacking. (I have made sure that the data from data.php is indeed available, since I can display it in a normal array when I try).

var chart,
  chartOptions = {},
  chartData = {};

chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);

$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
    chartData.chart1 = json[6]['data'];
});

    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
      }]
    };

Any assistance you can provide will be greatly appreciated!

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