Values not display in highcharts - php

Question

JSON output: (from dt.php)
[{
"name":"Year",
"data":[2012,2013]
},{
"name":"A",
"date":[111,24]
},{
"name":"B",
"date":[34,0]
},{
"name":"C",
"date":[365,43]
},{
"name":"D",
"date":[496,0]
}]
Javascript:
$(document).ready(function() {
var chart;
var option = {
chart: {
renderTo: 'hcChart',
type: 'column'
},
title: {
text: 'Testing'
},
xAxis: {
categories: []
},
series: []
};
$.getJSON("dt.php", function(json) {
option.xAxis.categories = json[0]['data'];
option.series[0] = json[1];
option.series[1] = json[2];
option.series[2] = json[3];
option.series[3] = json[4];
chart = new Highcharts.Chart(option);
});
});
The chart does show out with the legends but the there are no single value showing up.. Any help?

Answer 1

Change date to data:
[{"name":"Year","data":[2012,2013]},{"name":"A","data":[111,24]},{"name":"B","data":[34,0]},{"name":"C","data":[365,43]},{"name":"D","data":[496,0]}]
Also remember to render the chart to a div id. option.chart.renderTo = 'myChart';
Working example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var chart;
var option = {
chart: {
renderTo: 'hcChart',
type: 'column'
},
title: {
text: 'Testing'
},
xAxis: {
categories: []
},
series: []
};
$.getJSON("dt.php", function (json) {
option.xAxis.categories = json[0]['data'];
console.log(json);
option.series[0] = json[1];
option.series[1] = json[2];
option.series[2] = json[3];
option.series[3] = json[4];
option.chart.renderTo = 'myChart';
chart = new Highcharts.Chart(option);
});
});
</script>
<div id="myChart"></div>