score:6
Accepted answer
lazy drilldowns are supported by highcharts, though it uses the term "async drilldown".
$(function() {
// create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesoptions) {
var chart = this,
drilldowns = {
'animals': {
name: 'animals',
data: [
['cows', 2],
['sheep', 3]
]
},
'fruits': {
name: 'fruits',
data: [
['apples', 5],
['oranges', 7],
['bananas', 2]
]
},
'cars': {
name: 'cars',
data: [
['toyota', 1],
['volkswagen', 2],
['opel', 5]
]
}
},
series = drilldowns[e.point.name];
// show the loading label
chart.showloading('simulating ajax ...');
settimeout(function() {
chart.hideloading();
chart.addseriesasdrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'async drilldown'
},
xaxis: {
type: 'category'
},
legend: {
enabled: false
},
plotoptions: {
series: {
borderwidth: 0,
datalabels: {
enabled: true
}
}
},
series: [{
name: 'things',
colorbypoint: true,
data: [{
name: 'animals',
y: 5,
drilldown: true
}, {
name: 'fruits',
y: 2,
drilldown: true
}, {
name: 'cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
score:6
for that level of functionality, i'd just go ahead and create it yourself. use the point.events.click
callback to make the ajax call and replace the series:
plotoptions: {
series: {
point: {
events: {
click: function(event) {
var chart = this.series.chart;
var name = this.name;
$.ajax({
url: name + ".json",
success: function(data) {
swapseries(chart,name,data);
},
datatype: "json"
});
}
}
}
}
},
where swapseries
is:
function swapseries(chart, name, data) {
chart.series[0].remove();
chart.addseries({
data: data,
name: name,
colorbypoint: true
});
}
here's a working example.
Source: stackoverflow.com
Related Query
- Lazy Highcharts drilldown
- Change title when drilldown in Highcharts
- Optimize JavaScript DrillDown code
- Highcharts : Chart with drilldown how to obtain click event of drill up button
- Highcharts Pie Chart Drilldown not showing on third drill
- Highcharts chart with 'datetime' xAxis - use categories on drilldown
- HighCharts - Pie chart drilldown for multilevel (3 to 4 level)
- Highcharts drilldown - when useing setData chart doesn't stay drilled down
- Rails ActiveRecord group_by & sum db results for use with Lazy HighCharts
- Highcharts async drilldown (3 level) - drillup not working
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Get name of clicked point in Highcharts when the point has drilldown
- Single series drilldown to multiple series Highcharts
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts xAxis drilldown dont change correctly
- Highcharts multiple series drilldown to multiple series
- drilldown maps and funnell charts on the same page using highcharts
- spline is not plotting after drilldown - HighCharts
- Highcharts --- Change sliced color on drilldown pie chart
- Highcharts column drilldown
- highcharts donut pie - different color for the data than its drilldown
- Motion in drilldown bubble chart Highcharts
- HighCharts Stock Chart error code 18
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- highcharts change rendered image source on click
- Highcharts xAxis shows labels from drilldown on drillup
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to display 2 same highcharts without duplicate the code
- Drilldown for grouped column chart in highcharts
- Highcharts - column chart with drilldown to waterfall
More Query from same tag
- How to change x-axis labels in highcharts in month, week, quarter on condition?
- Send values from arduino to Highcharts
- Loading variwide chart from Highcharts library in Angular 2+
- Highcharts redirect is not working after print
- Format data for highcharts solid gauge graph
- Is it better to update a Highcharts chart or destroy and recreate it?
- Displaying a point on another series in Highcharts (without flags)
- Highcharts piechart is not drawing slices from JSON object
- Highcharts - Remove first marker from Area chart in every series
- reactjs highcharts reference for reload
- Highcharts view full screen in older version
- splitSeries error with packedbubble in Angular
- Highchart bubble chart shows empty chart
- Highcharts : How to remove the gap between series and vertical axis?
- Using HighCharts and DotNet.HighCharts to "Play" Multiple Series
- Highcharts datalabels Float Number including Zero after dot: x.0 not only x (exact decimals as in inputdata)
- How to draw multiple segments overlapping and non overlapping in high-charts?
- Multiple series in highstocks
- Highcharts not displaying with csv/json and Flask
- Modify the size of the tickPositions in HighCharts
- More Than 2 Y axis in Grafana
- Filling the data gaps with a gray area using Highcharts,
- Alignment of y axis labels and text
- Highcharts do not hold all the values of stacked columns chart with data time axes
- jQuery - HighCharts Labels outside Series (Bar Chart)
- Changing charts tooltip
- Send data from Python backend to Highcharts while escaping quotes for date
- Highcharts - is it possible to maintain grouping in scatter chart
- I tried to add colors to X-Axis labels without success
- Highcharts Series data as JSON doesn't render