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!

S McCrohan · Accepted Answer · 2016-10-14 01:58:21Z

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.

answered Oct 14, 2016 at 1:58

S McCrohan

6,7011 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ChartProblems Over a year ago

Thank you very much for your solution! I am now able to retrieve my data in the chart. However one problem has come up. The chart is empty upon loading the page. Only if I go to chart 2 for instance and then back to chart 1 will the data then show up. I tried to add a "var chart = new Highcharts.Chart(chart1);" below the getJSON, but this doesn't help me. I also tried to encapsulate the whole of chart 1 in a "$(document).ready(function() {" but this doesn't help either. Can you think of a solution to this? Thanks a lot for you assistance.

S McCrohan Over a year ago

Right, it's what I was alluding to in that last sentence. The page itself finishes loading before you've gotten the response from the server. You're going to want to do something similar to what's happening in the mouse click handler when the data loads, but ONLY if the right chart is currently visible. That's the tricky bit; otherwise you'll end up changing charts because the load completed (without a mouse click).

Collectives™ on Stack Overflow

Retrieving JSON data in highcharts

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related