在highcharts中输入异步数据

Question

I am loading data from a MySQL database using a $.getJSON method. All data is then displayed in highcharts. There are different buttons which the user can click in order to change between datasets. My problem is that when the page is first loaded, the chart will always load up empty. I found out that this is probably because the $.getJSON method i am using for retrieving the data is asynchronous. I am not sure whether this can be resolved by switching the getJSON method to an AJAX method. I have tried but did not succeed. Or whether it is my javascript function for switching chart data upon button-clicks that is the problem. Below is all the code. The fragments of code I think are responsible for the problem is then showed below. I know you might want a JSFiddle but since I am using database data I do now know how to properly display the problem.

<script>
  var d = new Date();
  var pointStart = d.getTime();
  //-------------------------------------------------------
  //set a 'line' marker type for use in bullet charts 
  Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
  };
  Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M', x, y + height / 2, 'L', x + width, y + width / 2];
  };
  //-------------------------------------------------------
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    colors: [
      'rgba( 253, 99,  0,   0.9 )', //bright orange
      'rgba( 40,  40,  56,  0.9 )', //dark
      'rgba( 253, 0,   154, 0.9 )', //bright pink
      'rgba( 154, 253, 0,   0.9 )', //bright green
      'rgba( 145, 44,  138, 0.9 )', //mid purple
      'rgba( 45,  47,  238, 0.9 )', //mid blue
      'rgba( 177, 69,  0,   0.9 )', //dark orange
      'rgba( 140, 140, 156, 0.9 )', //mid
      'rgba( 238, 46,  47,  0.9 )', //mid red
      'rgba( 44,  145, 51,  0.9 )', //mid green
      'rgba( 103, 16,  192, 0.9 )' //dark purple
    ],
    chart: {
      alignTicks: false,
      type: '',
      margin: [70, 100, 70, 90],
      //borderRadius:10,
      //borderWidth:1,
      //borderColor:'rgba(156,156,156,.25)',
      //backgroundColor:'rgba(204,204,204,.25)',
      //plotBackgroundColor:'rgba(255,255,255,1)',
      style: {
        fontFamily: 'Abel,serif'
      },
      events: {
        load: function() {
          this.credits.element.onclick = function() {
            window.open(
              ''
            );
          }
        }
      }
    },

  });
</script>



<script>
var chart,
  chartOptions = {},
  chartData = {};


chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: '<?php echo $companyName; ?>',
    style: {
      fontSize: '20px'
    }
  },
  subtitle: {
      text: 'Revenues',
      align: 'left',
      x: 55,
      style: {
        fontSize: '16px'
      }
  },
  xAxis: {
    categories: []
  },
  yAxis: {
    title: {
      text: '<?php echo $unitCurr; ?>'
    }
  },
  series: [{
    name: 'Revenues',
    color: '#006699',
    data: []
  }]
};
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) {
    chartOptions.chart1.xAxis.categories = json[0]['data'];
    chartOptions.chart1.series[0].data = json[1]['data'];
});


chartOptions.chart2 = {
  chart: {
    type: 'column'
  },
  title: {
    text: '<?php echo $companyName; ?>',
    style: {
      fontSize: '20px'
    }
  },
  subtitle: {
      text: 'Earnings before interest and taxes',
      align: 'left',
      x: 55,
      style: {
        fontSize: '16px'
      }
  },
  xAxis: {
    categories: []
  },
  yAxis: {
    title: {
      text: '<?php echo $unitCurr; ?>'
    }
  },
  series: [{
    name: 'EBIT',
    color: '#006699',
    data: []
  }]
};
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) {
    chartOptions.chart2.xAxis.categories = json[0]['data'];
    chartOptions.chart2.series[0].data = json[4]['data'];
});

$(function() {

    //common options
  Highcharts.setOptions({
    chart: {
      marginRight: 0
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      bar: {
        pointPadding: .01
      },
      column: {
        borderWidth: 0.5
      },
      line: {
        lineWidth: 1
      },
    },
    series: [{
        color: '#027ff7',
    }]
  });
      $('#container').highcharts(chartOptions.chart1);
      chart = $('#container').highcharts();

      $(document).on('click', '.chart-update', function() {
        $('button').removeClass('selected');
            $(this).addClass('selected');
            chart.destroy();
        $('#container').highcharts(chartOptions[$(this).data('chartName')]);
        chart = $('#container').highcharts();
      });
});



</script>
</head>



<body>

    <span class="wrapper">
        <span class="block chart"><div id="container" style="width:400px;height:300px;margin:1.5em 1em;float:left;"></div></span>
        <span class="block buttons">
            <div><button class="chart-update selected" data-chart-name="chart1">CHART1</button></div>
            <div><button class="chart-update" data-chart-name="chart2">CHART2</button></div>

        </span>
    </span>



</body>

</html>

So specifically I am wondering whether of the two segments below are responsible for the problem:

var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) {
    chartOptions.chart2.xAxis.categories = json[0]['data'];
    chartOptions.chart2.series[0].data = json[4]['data'];
});

or

      $('#container').highcharts(chartOptions.chart1);
      chart = $('#container').highcharts();

      $(document).on('click', '.chart-update', function() {
        $('button').removeClass('selected');
            $(this).addClass('selected');
            chart.destroy();
        $('#container').highcharts(chartOptions[$(this).data('chartName')]);
        chart = $('#container').highcharts();
      });

I tried to switch out the JSON method by using an AJAX method instead with async set to false. This is showed below (didn't work and no data now displays even upon clicking the buttons).

var tableName = '<?php echo $tableName; ?>'
$.ajax({
  url: "../../companies/charts/Data.php",
  data: {id: escape(tableName)},
  dataType: "json",
  async: false,
  succes: function(data) {
  chartOptions.chart1.xAxis.categories = json[0]['data'];
  chartOptions.chart1.series[0].data = json[6]['data'];
  }
});

Thanks in advance for any help!

Answer 1

If you use ajax, I suppose there is no need to set the async property to false. Also, seems like you have mispelled success on your ajax call.

Just declare all your highchart initialization when your ajax call had returned success. So basically, ajax method on top of your highchart initialization.