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

Answer 1

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
        }]
      }
    });