高图显示为空，直到点击按钮

为了显示来自数据库的数据，我一直在定制以下jsfiddle。http://jsfiddle.net/jlbriggs/7ntyzo6u/

我使用JSON来检索我的数据库中的数据。在界面中，有3个图表，可以通过点击按钮进行切换。但是当您加载页面时，显示的是默认图表。现在我已经编辑了chart1，它将显示我的数据库数据:

var chart,
  chartOptions = {},
  chartData = {};
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Chart 1 Title'
  },
  xAxis: {
    categories: []
  },
  yAxis: {
    title: {
      text: 'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name: 'Chart 1 Series',
    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[6]['data'];
});

我的问题是，图表显示为空后加载页面。只有当我点击图表1按钮时，数据才会显示出来。谁能告诉我，如果这是因为我在设置xAxis和系列数据在上面的代码错过了什么?

因为美元。getJSON是异步的(见下面的评论)，我现在尝试使用ajax来发送请求。下面是我的尝试，但这是有缺陷的，因为图表现在甚至不会在点击"chart1"按钮时显示数据。图表确实出现了，但是是空的:

chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Chart 1 Title'
  },
  xAxis: {
    categories: []
  },
  yAxis: {
    title: {
      text: 'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name: 'Chart 1 Series',
    data: []
  }]
};
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'];
  }
});

提前感谢您的协助!