Highcharts: How to create a drilldown pie of agegroup, gender, visits?

Question

Is it possible to create a drilldown pie with highcharts for a csv dataset that has age group, gender and visits as data? I have been trying to do this like that, but all I got is a mess with just errors.

 var options = {
chart: {
    type: 'column'
},
title: {
    text: 'Basic drilldown'
},
xAxis: {
    type: 'category'
},

legend: {
    enabled: false
},

plotOptions: {
    series: {
        borderWidth: 0,
        dataLabels: {
            enabled: true
        }
    }
},

series: [{
    name: 'People',
    colorByPoint: true,
    data: [{
        name: 'Age group',
        y: [],
        drilldown: 'Agegroup'
    }, {
        name: 'Gender',
        y: [],
        drilldown: 'Gender'
    }, {
        name: 'Sessions',
        y: [],
        drilldown: 'Sessions'
    }]
}],
drilldown: {
    series: [{
        id: 'Agegroup',
        data: []
    }, {
        id: 'Gender',
        data: []
    }, {
        id: 'Sessions',
        data: []
    }]
}
};

var lines = csv.split('\n');
$.each(lines, function (lineNo, line) {
    var items = line.split(',');
    var agegroup=items[0];
    var gender=items[1];
    var sessions=parseInt(items[2]);
    options.drilldown.series.data.push([gender,sessions]);

The CSV data for this follows:

18-24,female,313,1
18-24,male,209,1
25-34,female,1941,1
25-34,male,1646,1
35-44,female,980,1
35-44,male,1000,1
45-54,female,244,1
45-54,male,272,1
55-64,female,106,1
55-64,male,104,1
65+,female,36,1
65+,male,52,1

Trying to push this: `code` 18-24,female,313 18-24,male,209 25-34,female,1941 `code` I get push errors in the console. — Shadowcaster, Mar 20 '17 at 11:18
I know that now it looks utterly wrong, but that's because I am lost. What I am trying to do is create a drilldown pie showing initially visits of males and females, then by clicking on either you get to a breakdown by age group. My csv has data like agegroup, gender, sessions. Is that possible? — Shadowcaster, Mar 20 '17 at 12:50
@Shadowcaster http://jsfiddle.net/qeuaxn8x/1/ something like this — Deep 3015, Mar 20 '17 at 13:00
@Deep3015, yes, this is what I want to create, but by pushing to y and Data values from my CSV. — Shadowcaster, Mar 20 '17 at 13:02
@Deep3015, is it possible to assign to y the total of a series instead of providing it with a value? — Shadowcaster, Mar 20 '17 at 14:16
@Shadowcaster try this https://jsfiddle.net/4rpcd5oc/ and comment its working or not . I cannot check it — Deep 3015, Mar 20 '17 at 17:45
@Deep3015 Wonderful! Just a couple of changes and it works like a charm! Thank you so much for your invaluable help! — Shadowcaster, Mar 21 '17 at 08:28

score 1 · Accepted Answer · answered Mar 21 '17 at 09:11

Try this

var yMale, yFemale;
var sessionDataMale = [];
var sessionDataFemale = [];
var ageGroup = []
$.get('data.csv', function(data) {
      var lines = csv.split('\n');
      $.each(lines, function(lineNo, line) {
          var items = line.split(',');
          var agegroup = items[0];
          var gender = items[1];
          var sessions = parseInt(items[2]);

          if (gender == male) {
            yMale += sessions;
            sessionDataMale.push(sessions)
          }
          if (gender == female) {
            yFemale += sessions
            sessionDataFemale.push(sessions)
          }
          ageGroup.push(agegroup)
        }
//creating uniue age group array
var uniqueAgeGroups = []; $.each(ageGroup, function(i, el) {
if ($.inArray(el, uniqueAgeGroups) === -1) uniqueAgeGrops.push(el);
        });
        var drillDataMale = []
        var drillDataFemale = []

        for (var i = 0; i < uniqueAgeGroups.length; i++) {
          var arrMale = [];
          var arrFemale = []
          arrMale.push([uniqueAgeGroups[i], sessionDataMale[i]])
          arrFemale.push([uniqueAgeGroups[i], sessionDataFemale[i]])
          drillDataMale.push(arrMale)
          drillDataFemale.push(arrFemale)
        }
      )
    }
    // Create the chart
    Highcharts.chart('container', {
      chart: {
        type: 'pie'
      },
      title: {
        text: 'Test'
      },
      plotOptions: {
        series: {
          dataLabels: {
            enabled: true,
            format: '{point.name}: {point.y}'
          }
        }
      },

      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total<br/>'
      },
      series: [{
        name: 'Gender',
        colorByPoint: true,
        data: [{
          name: 'Female',
          y: yFemale,
          drilldown: 'female'
        }, {
          name: 'Male',
          y: yMale,
          drilldown: 'male'
        }],
      }],
      drilldown: {
        series: [{
          name: 'Age Group',
          id: male,
          data: drillDataMale
        }, {
          name: 'Age Group',
          id: female,
          data: drillDataFemale
        }]
      }
    });

Works great! Thank you! – Shadowcaster Mar 21 '17 at 12:40 — Shadowcaster, Mar 21 '17 at 12:40

Highcharts: How to create a drilldown pie of agegroup, gender, visits?

1 Answers1