Highchart not working (Codeigniter - JSON - Bootstrap) - php

Question

I have a problem with my highchart, that is my chart doesn't appear. I use Codeigniter and I convert the data (from table) to JSON. I wang to show the Population and Amount based on Date
Here is my JSON data :
[{
"name":"Date",
"data":["27-OCT-14","28-OCT-14","29-OCT-14","30-OCT-14","31-OCT-14","01-NOV-14","02-NOV-14"]
},
{
"name":"Population",
"data":[6171,6990,6882,6889,6860,7619,6698]
},
{"name":"Amount",
"data":[361154716.01,409210099.77,407191552.71,416366585.57,418588842.18,435168113.68,402163667.57]
}]
This is my CONTROLLER that i used to encode_json
function daily(){
$data=array(
'title'=>'SOA_OTC - Daily',
'=>$this->model_app->get_Soa_Daily()
);
$category = array();
$category['name'] = 'Date';
$series1 = array();
$series1['name'] = 'Population';
$series2 = array();
$series2['name'] = 'Amount';
foreach($data['day']['START_EXECUTION'] as $row){
$category['data'][] = $row;
}
foreach($data['day']['NUM_OF_POPULATION'] as $row){
$series1['data'][] = $row;
}
foreach($data['day']['SUM_AMOUNT'] as $row){
$series2['data'][] = $row;
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
print json_encode($result, JSON_NUMERIC_CHECK);
$this->load->view('element/v_header',$data);
$this->load->view('pages/v_soaotc_daily');
$this->load->view('element/v_footer');
}
And this is my Highchart script in VIEW :
script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'containers',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Project Requests',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Requests'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON('daily', function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
var chart = new Highcharts.Chart(options);
});
});
</script>
<div id="containers" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Is there something wrong with my code? Very appreciate for your help.
Thanks

Answer 1

options.series is an empty array, you have to push into it:
$.getJSON('daily', function(json) {
options.xAxis.categories = json[0]['data'];
options.series.push(json[1]);
options.series.push(json[2]);
var chart = new Highcharts.Chart(options);
});