Highcharts to present in an HTML Table - html

Question

I'm currently creating a system that produces different kind of graphs. I want to create a chart and table, that when a chart is DRILLDOWNED, the table will sync as well. Is there a way to output the current data presented by HighCharts to JSON? Then this JSON will be inputted into a datatable? Thanks!

Answer 1

check this JsFiddle Demo
You can obtain the id by e.seriesOptions.id which is the key to your data. Then you can use this id as the key to get appropriate data and update your data table from within the drillUp and drillDown events.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS
$(function() {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drillup: function(e) {
//alert('drill Up');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
},
drilldown: function(e) {
//alert('drill Down');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
}
}
},
title: {
text: 'DrillUp button styling'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Dieren',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruit',
y: 2,
drilldown: 'fruits'
}, {
name: "Auto's",
y: 4
}]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
},
series: [{
id: 'animals',
data: [
['Katten', 4],
['Honden', 2],
['Koeien', 1],
['Schapen', 2],
['Varkens', 1]
]
}, {
id: 'fruits',
data: [
['Appels', 4],
['Sinaasappels', 2]
]
}]
}
})
});