How can I create a chart with stacked columns after drilldown?

Question

I have a database with a lot of entries. It looks like the following example:

id | rating    | topic1 | topic2
1    positive    A        X
2    negative    A        Y
3    neutral     B        Z

Step 1: Now I want to have a chart (highchart) showing stacked columns where each column is a topic (topic1) and the stacked parts are the amount of entries for each rating of this topic1. That chart is easy to create.

Step 2: Additionally I would like to have a drilldown for each column. After clicking on a column I want to get again a stacked column chart where each column is the sub topic (topic2) of the clicked one and the stacked parts are the amount of entries for each rating of this topic2.

I've created an examplce. http://jsfiddle.net/9RLEB/2/

Step 1 is working fine but I can't get step 2 working. Can anyone please try to help me? Or give me a hint how I can achieve this result?

Thank you in advance.

Andi

Answer 1

If I understand correctly, have you tried clicking the column title (the "A" and "B") to drilldown?

UPDATE

To make this actually working, you need to specify different drilldown for each data point:

series: [{
    name: 'negative',
    data: [{
      name: 'A',
      y: 13,
      drilldown: 'topic1Neg',
      color: '#e53642'
    }, {
      name: 'B',
      y: 42,
      drilldown: 'topic2Neg',
      color: '#e53642'
    }]
  }, {
    name: 'neutral',
    data: [{
      name: 'A',
      y: 61,
      drilldown: 'topic1Neu',
      color: '#919191'
    }, {
      name: 'B',
      y: 23,
      drilldown: 'topic2Neu',
      color: '#919191'
    }]
  }, {
    name: 'positive',
    data: [{
      name: 'A',
      y: 26,
      drilldown: 'topic1Pos',
      color: '#56cb46'
    }, {
      name: 'B',
      y: 11,
      drilldown: 'topic2Pos',
      color: '#56cb46'
    }]
  }
],
drilldown: {
  series: [{
    id: 'topic1Neg',
    data: [
      ['X', 4],
      ['Y', 2]
    ]
  }, {
    id: 'topic2Neg',
    data: [
      ['X', 5],
      ['Y', 3]
    ]
  },{
    id: 'topic1Neu',
    data: [
      ['X', 7],
      ['Y', 1]
    ]
  }, {
    id: 'topic2Neu',
    data: [
      ['X', 8],
      ['Y', 4]
    ]
  },{
    id: 'topic1Pos',
    data: [
      ['X', 2],
      ['Y', 3]
    ]
  }, {
    id: 'topic2Pos',
    data: [
      ['X', 9],
      ['Y', 5]
    ]
  }]
}

You just need to calculate the drilldown values yourself.

Sample here: http://jsfiddle.net/wyfqf/