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
- Plotting line in Linechart with values taken from the textarea
- Highcharts: make the X and Y axes intersect at 0
- Highstocks Plotline multi-color
- Iterate over a text label in HTML using JQUERY
- How to add the "isSum" bar in Highchart Waterfall chart in R?
- Highcharts exporting once again
- Is there a way to get around 'setData' on a highcharts area chart?
- Is possible to set min and max zoom in Time series Highcharts?
- Spiderweb chart with circular gridline interpolation: Label is seen very far away from Plotline
- How to remove plot gridlines using Highcharts in R
- Gradient fill for guage - Highcharts
- Fomatting the Highcharts date with correct month
- highchart Axis values color
- Highchart Graph Issue
- Chart not moving fluently when adding value to two lines on interval
- zero value in highcharts/ highmap
- Highcharts inverted line where dates go upwards, not downwards (reversed series)?
- multiple pane in highstock has issues with scrollbar
- Highcharts highstock x axis max/min not working with 3+ data elements
- hchart() Bar Graph does not display all the x axis labels in R
- How to enable plotting only if values are present in Highcharts?
- Highcharts Line Chart - Hyperlink on a data point
- Highcharts (Highcharts-Vue) Drilldown with Geojson Geometry Based Maps Fails To Display
- Live chart in Highcharts makes the line series very .. mountainous
- Why is this Highcharts xAxis actual max greater than the xAxis.max I have set?
- How to remove a series in Highcharts by name
- Filter data in Highcharts
- Highcharts query
- How to create Chart Data using SQL query
- High charts draggable not working for log scale