score:5
The Motion plugin currently does not support drilldown series, but it is quite possible to achieve.
Your JSFiddle is on the right path, but it needs a workaround for making Motion notice the changes in series when the chart drills down.
Working solution at JSFiddle: http://jsfiddle.net/larsac07/Lon306y5/.
The drilldown series have to be prepared for Motion, and Motion has to be aware of changes in series:
// Array that keeps track of prepared drilldown series.
var preparedDrilldowns = [];
// This function is called for each series, including drilldown
// series, and prepares it by setting an initial value for each
// point if the series is not already prepared.
function prepareDrilldowns(e) {
var chart = e.target,
motion = chart.motion,
value;
if (motion) {
Highcharts.each(chart.series, function (series) {
if (preparedDrilldowns.indexOf(series.name) < 0) {
Highcharts.each(series.points, function (point) {
value = point.sequence[motion.round(motion.playRange.value)];
point.update(value, false, false);
});
preparedDrilldowns.push(series.name);
series.chart.redraw();
}
});
}
}
// This function updates Motion with the current series (when
// drilldown is triggered, the current chart series are swapped).
function updateChart(e) {
var motion = e.target.motion;
if (motion) {
motion.dataSeries = e.target.series;
}
}
Call the functions via chart events:
chart: {
events: {
// Called for each redraw
redraw: function (e) {
// Call updateChart() for each redraw
updateChart(e);
// This is only called once per series and
// drilldown series.
prepareDrilldowns(e);
}
}
}
score:0
Drilldown charts are not meant to be used this way. They are meant to show categories and subcategories of data. You cannot drill down to subcategories and then compare one set of data to another.
Based on your sample data, I have two suggestions:
- Start with the three main categories (animals, fruits, cars) and have them drill down into the subcategories (for example, "animals" drills down to cats, dogs, cows, sheep, pigs). You would have only one column for each category and subcategory (five cats, two dogs, etc.).
- Start with two main categories (cats, dogs) and have them drill down into their subcategories (for example, "cats" drills down to the values
[5,1,2,3,4]
). You would need to have a reason to compare cats with dogs (maybe five short-haired, one long-haired, two mixed-breed, etc.).
Think about what kind of comparisons you want to explain to your readers and what will be the clearest and easiest way for them to understand those comparisons.
Source: stackoverflow.com
Related Query
- Motion in drilldown bubble chart Highcharts
- Highcharts 3.0 Bubble Chart -- Controlling bubble sizes
- 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
- Highcharts bubble chart dataLabels overlapping
- Highcharts - Bubble chart - Moving gridlines
- Displaying additional text for Highcharts Bubble chart
- Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
- Highcharts --- Change sliced color on drilldown pie chart
- HighCharts - Show categories in x axis intead of the value of x in Bubble Chart
- HighCharts Stock Chart error code 18
- Highcharts - Bubble chart - Proportional bubbles
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- Highcharts bubble chart datalabels color contrast issue
- Drilldown for grouped column chart in highcharts
- Highcharts - column chart with drilldown to waterfall
- Highcharts can't render a bubble chart with a single series
- how to add new index Highcharts column drilldown chart
- Highcharts - bubble chart with titles at x- and y-Axis - Error #14
- Drawing Bubble Chart by using npm highcharts with error #17
- How to include highcharts motion plugin for bubble plot using R wrapper?
- Highcharts Bubble Chart - How to get the size of the point
- Show/Update Separate Bar graphs with Drilldown Pie chart of Highcharts
- Highcharts drilldown in stacked area chart
- Highcharts display label for pie chart using html table as data source
- Highcharts bubble chart dataLabels overlapping despite z-index
- Motion Bubble Chart
More Query from same tag
- Can highcharts drilldown of a chart, reflect on another chart?
- Custom DashStyle and colours with hchart function in R
- How to disable Print Chart button when there is no Chart present
- HighCharts: add dashed line
- Highcharts - yAxis tickInterval to max data
- Why is the my "max" value not accepted in Highcharts?
- Highmaps: legendItemClick doesn't work when there are dataClasses in colorAxis, anyone have a workaround?
- Dynamically Adding A Chart into A Combo Highcharts?
- Polar type chart with Highcharts plugin
- tool tip does not work correctly if text is more in highcharts
- Hide axis and gridlines Highcharts
- Setting Highcharts Series and Category data dynamically
- Highcharts.js How to put current time label in the end of xAxis
- Highcharts Render Text after animation
- HighChat Heatmap: Tooltip
- Highcharts's width is not able to fill 100% of parent
- Highcharts - Custom format for dateTimeLabelFormats (1st hour, 2nd hour....)
- How to deal in Highcharts with special characters from CSV file?
- How can I load a custom popup on a click event in Highcharts?
- How to dynamically load highcharts
- Highcharts Pie Donut: Error when clicking URL
- Highcharts: using Google Analytics to capture event actions for exporting the chart
- Use Node.js as data source for highcharts
- Process SQL to JSON through PHP for Bubble Chart
- How to position RangeSelector / zoom buttons at custom co-ordinates in Highstock
- Highstock navigator add drag-end event
- HTML page lose formatting on external server
- Angular 7 - Dynamic HighChart update
- Showing user the script is loading
- Highcharts date in form of Day(Integer) - Month(the name of the month), like 17 - July