CODEWITHSUNDEEP
highcharts
laloune
laloune

Reputation: 673

drilldown charts with more than one level

I discovered the power of highcharts and I a am particularly interested in the drilldown charts (like here : http://jsfiddle.net/ gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown)

I just wanted to know whether this was possible to have more than 2 levels (meaning: the second level has more children). Where could I put a link to go back on the upper level.

thanks in advance !

Upvotes: 2

Views: 3098

Answers (2)

veeTrain
veeTrain

Reputation: 2915

You can make multiple drilldowns available by adding each of them in the drilldown's series with IDs that point in the direction you want them to go.

The current version seems to generate the links for "drilling up" for you based on the name property.

Be sure to have the appropriate includes:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

Sample object:

series: [{
    name: '1-10', // The name that is shown next to the "Back to..." button after drilldown
    data: [
              {name:'a', y:50}, // entered as an object
              ['b',30], // entered as an array pair
              {
                   drilldown:"level1", // the ID of what to drill down to
                   name:"More",
                   y:totalForAllDrilldowns
              }
          ]
}],
drilldown: [
    {
        id: "level1",
        name: "Fruit", // Used for the subsequent drop-down's "Back to..." button
        data: ["Oranges",1],[etc.],[{drilldown:"level2"}],
        y: totalForAllFruitIncludingDrilldown
    }, {
        id: "level2",
        name: "Apples",
        data: ["a",1],[etc.],[{drilldown:"level3"}],
        y: totalForAllApples
    }, {
        id: "level3",
        name: "Types of Red delicious",
        data: [etc.],
        y: totalForAllRedDelicious
    }
]

Every level of drilldown belongs underneath the "top" drilldown node and then you are able to link them however they need to be as long as the chart type supports it (I've seen column and pie charts work successfully).

See highcharts' example here: http://www.highcharts.com/demo/pie-drilldown

Upvotes: 2

Paweł Fus
Paweł Fus

Reputation: 45079

Yes, this is possible to have more level, see example: http://jsfiddle.net/NULTY/456/

Regarding back button - I think you need to implement on your own - it should be simple button which will check actual drilldown.level and will show parent of actual series.

Upvotes: 2

Related Questions