Code: Select all
events: {
drilldown: function(e) {
var month = e.point.drilldown
var drilldown = {
series: []
};
$.ajax({
method: "POST",
url: "data",
data: {"month":month}
})
.done(function(msg){
var hasil = JSON.parse(msg)
drilldown.series.push({
name: 'Shift 1',
id: month,
data: hasil,
});
});
console.log(drilldown)
}
and part of drilldown: {},
but if i click bar nothing happened in the bar, what should i do ? what code like this is true ? or something eror with my code. thanks guys
for my full code
Code: Select all
$(function() {
var option = {
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
var month = e.point.drilldown
var drilldown = {
series: []
};
$.ajax({
method: "POST",
url: "data",
data: {"month":month}
})
.done(function(msg){
var hasil = JSON.parse(msg)
drilldown.series.push({
name: 'Shift 1',
id: month,
data: hasil,
});
});
console.log(drilldown)
}
}
},
title: {
text: 'Data Molasses'
},
subtitle: {
text: 'Klik Bar Untuk Mengetahui Lebih Lengkap</a>.'
},
xAxis: {
type: 'category'
},
yAxis: [{
title: {
text: 'Total Data Per Bulan'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}],
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:1f}',
},
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f}</b> TON<br/>'
},
series: [{
name: 'bulan',
colorByPoint: true,
data: hasil_data,
}],
drilldown: {}
};
// option.series[0].data = data;
var chart = new Highcharts.Chart(option);
}