I really need to be able to perform a drill down for columns of data. Note there will be 4 columns of data per month.
I have also seen examples of the drill down column on the Highcharts website site. I do understand how it works if the data is hard coded. But this data needs to be pulled from a database.
I can get a basic chart from the following my_data.php file.
[{"name":"ONE","data":[1077668]},{"name":"TWO","data":[39657923]}, {"name":"THREE","data":[99428783]},{"name":"FOUR","data":[4431354]}]
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("my_data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'testing',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
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: json
});
});
});
});
</script>
I am really confused on where in this type of chart i would put the drilldown call? I do know it should be something like the follow. I also think there will be multiple if/else statement for the different drilldowns.
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
var chart = this.series.chart;
$.getJSON(...., function(data){
chart.setTitle({
text: data.name
});
setChart(data.name, data.categories, data.data, data.color, data.level);
});
} else { // restore
setChart(name, categories, data, null, level);
}
}
If I am using the wrong chart data please let me know. I can use something like this but I am having issues with producing the chart with intial data from the database. because I would have the same issue on where to set the drillname (like level 0, level 1 and so on)
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
You need to get data from php as JSON un form which is used in drilldown.
Solution of preparing data from php is available here: http://docs.highcharts.com/#preprocessing
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.