score:5

Accepted answer

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:

  1. 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.).
  2. 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.


Related Query

More Query from same tag