I'm very new to HighCharts and I've decided to use it this summer to make some charts. As mentionned in the title, I want to make a combination chart with stacked columns and line (or spline). The problem is that I'm not able to show my line chart. I've tried a lot of things but I always end up showing only a line charts with all the data or only stacked columns with all the data again.
Could anyone help me please ?
Here is my code :
test.php
<?php
$cakeDescription = " ";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $cakeDescription ?></title>
<link href="webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
//zoomType: 'xy'
},
title: {
text: ' '
},
xAxis: {
categories: []
},
yAxis: [{
min: 0,
title: {
text: 'Percentage (%)'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},{
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
opposite: true
}],
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + ' %<br/>' +
'Total: ' + this.point.stackTotal + ' %';
}
//shared: true
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
//stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
//stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
//stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'column',
// stacking: 'normal',
tooltip: {
valueSuffix: '%'
}
,yAxis: 0
},
{type: 'line',
//stacking: null,
tooltip: {
valueSuffix: '%'
}
,yAxis: 1
}
]
};
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
options.series[4] = json[5];
options.series[5] = json[6];
options.series[6] = json[7];
options.series[7] = json[8];
options.series[8] = json[9];
options.series[9] = json[10];
options.series[10] = json[11];
options.series[11] = json[12];
options.series[12] = json[13];
options.series[13] = json[14];
options.series[14] = json[15];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
When I put zoomType: 'xy' instead of type: 'column in chart: { ... } it shows all the data as a line chart. I guess I'm close to my purpose but I really can't see where did I go wrong or what should I add?
My JSON looks something like that by the way :
[{"name":"Period_start_time","data":["2015-08-03","2015-08-01","2015-08-02","2015-08-03","2015-08-04","2015-08-05","2015-08-07","2015-08-08","2015-08-09","2015-08-10"]},{"name":"dcr_34","data":[28.1,35.98,39.01,28.1,29.18,32.13,37.4,34.44,26.48,35.11]},{"name":"dcr_35","data":[55.79,48.86,43.96,55.79,55.25,51.81,45.28,47.78,35.97,52.89]},{"name":"dcr_36","data":[0,0.76,0.31,0,0,1.61,0,0.56,0.4,0]},{"name":"dcr_37","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_38","data":[14.46,14.02,10.53,14.46,13.23,12.85,15.75,14.44,11.46,12]},{"name":"dcr_39","data":[0.41,0,0,0.41,0,0,0,0,0,0]},{"name":"dcr_40","data":[0,0,0.93,0,0.78,0.4,1.18,1.67,0.79,0]},{"name":"dcr_41","data":[1.24,0.38,0.93,1.24,1.56,0,0.39,0,0.4,0]},{"name":"dcr_42","data":[0,0,4.33,0,0,1.2,0,1.11,24.51,0]},{"name":"dcr_43","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_44","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_45","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_46","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_47","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_4g","data":[0.8,0.84,1.18,0.8,0.82,0.85,0.82,0.59,0.97,0.8]}]
Thank you in advance !
EDIT data.php
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=db', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
$sql=<<<SQL
SELECT `Period_start_time`, `Segment_Name`, `dcr_34`, `dcr_35`, `dcr_36`,
`dcr_37`, `dcr_38`, `dcr_39`, `dcr_40`, `dcr_41`, `dcr_42`, `dcr_43`, `dcr_44`,
`dcr_45`, `dcr_46`, `dcr_47`, `dcr_4g`
FROM `drop`
WHERE `Segment_Name`='EX'
SQL;
$reponse = $bdd->query($sql);
$bln = array();
$bln['name'] = 'Period_start_time';
$rows1['name']='dcr_34';
$rows2['name']='dcr_35';
$rows3['name']='dcr_36';
$rows4['name']='dcr_37';
$rows5['name']='dcr_38';
$rows6['name']='dcr_39';
$rows7['name']='dcr_40';
$rows8['name']='dcr_41';
$rows9['name']='dcr_42';
$rows10['name']='dcr_43';
$rows11['name']='dcr_44';
$rows12['name']='dcr_45';
$rows13['name']='dcr_46';
$rows14['name']='dcr_47';
$rows15['name']='dcr_4g';
while($donnee=$reponse->fetch()){
$bln['data'][] = $donnee['Period_start_time'];
$rows1['data'][] = $donnee['dcr_34'];
$rows2['data'][] = $donnee['dcr_35'];
$rows3['data'][] = $donnee['dcr_36'];
$rows4['data'][] = $donnee['dcr_37'];
$rows5['data'][] = $donnee['dcr_38'];
$rows6['data'][] = $donnee['dcr_39'];
$rows7['data'][] = $donnee['dcr_40'];
$rows8['data'][] = $donnee['dcr_41'];
$rows9['data'][] = $donnee['dcr_42'];
$rows10['data'][] = $donnee['dcr_43'];
$rows11['data'][] = $donnee['dcr_44'];
$rows12['data'][] = $donnee['dcr_45'];
$rows13['data'][] = $donnee['dcr_46'];
$rows14['data'][] = $donnee['dcr_47'];
$rows15['data'][] = $donnee['dcr_4g'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows1);
array_push($rslt, $rows2);
array_push($rslt, $rows3);
array_push($rslt, $rows4);
array_push($rslt, $rows5);
array_push($rslt, $rows6);
array_push($rslt, $rows7);
array_push($rslt, $rows8);
array_push($rslt, $rows9);
array_push($rslt, $rows10);
array_push($rslt, $rows11);
array_push($rslt, $rows12);
array_push($rslt, $rows13);
array_push($rslt, $rows14);
array_push($rslt, $rows15);
print json_encode($rslt, JSON_NUMERIC_CHECK);
$reponse->closeCursor();
?>
You seem not to have understand how Highcharts.series works. I managed to have your code working on a JSFiddle: http://jsfiddle.net/hfuh3c24/ (Note that I modified a bit the chart options to have the chart rendered clearly on this example)
The important part of the code is where the series array is created : (Suppose that your JSON is parse in the data_array variable)
var data_array = [/* Your JSON here */];
var series_array = [];
//Starts with 1 and finishes with length - 1 to avoid first and last item
for (var i = 1; i < data_array.length - 1; ++i) {
series_array.push({
name: data_array[i].name,
data: data_array[i].data,
type: 'column'
});
}
series_array.push({
name: data_array[data_array.length - 1].name,
data: data_array[data_array.length - 1].data,
type: 'line',
yAxis: 1
});
I hope it will help you to understand better how Highcharts works.