Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

var chartSeriesData = [];
var chartSeriesData1 = [];

var chartDrilldownData = [];

chartSeriesData = [{
  name: "Completed",
  y: 1,
  color: "#1068C7",
  drilldown: "Completed"
}, {
  name: "Fail",
  y: 2,
  color: "#11A852",
  drilldown: "Fail"
}];
chartSeriesData1 = [{

  id: "Completed",
  name: "Completed",
  data: [{
    name: 'CEVA',
    y: 15,
    drilldown: 'CEVA-COMPLETED'
  }, {
    name: 'SYNCHRON',
    y: 13,
    drilldown: 'SYNCHRON-COMPLETED'
  }, {
    name: 'GENCO',
    y: 23,
    drilldown: 'GENCO-COMPLETED'
  }],




}, {
  name: "Fail",
  id: "Fail",
  data: [{
    name: 'CEVA',
    y: 45,
    drilldown: 'CEVA-FAIL'
  }, {
    name: 'SYNCHRON',
    y: 23,
    drilldown: 'SYNCHRON-FAIL'
  }, {
    name: 'GENCO',
    y: 23,
    drilldown: 'GENCO-FAIL'
  }],

},{
    id: "CEVA-COMPLETED",
    data: [{
      name: 'BFC',
      y: 19

    }, {
      name: 'BMC',
      y: 23
    }],
  },
  {
    id: "SYNCHRON-COMPLETED",
    data: [{
      name: 'qwsh',
      y: 1

    }, {
      name: 'adwa',
      y: 1
    }],
  },
  {
    id: "GENCO-COMPLETED",
    data: [{
      name: 'qwsh',
      y: 1

    }, {
      name: 'adwa',
      y: 1
    }],

  },
  {
    id: "CEVA-FAIL",
    data: [{
      name: 'BFC',
      y: 19

    }, {
      name: 'BMC',
      y: 23
    }],
  },
  {
    id: "SYNCHRON-FAIL",
    data: [{
      name: 'qwsh',
      y: 1

    }, {
      name: 'adwa',
      y: 1
    }],
  },
  {
    id: "GENCO-FAIL",
    data: [{
      name: 'qwsh',
      y: 1

    }, {
      name: 'adwa',
      y: 1
    }],

  }
];

//console.log('---------------- chartSeriesData');
//console.log(chartSeriesData);

//console.log('---------------- chartSeriesData1');
//console.log(chartSeriesData1);
//console.log('-------------------');


// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
              drillup: function (e) {
              console.log(this.series[0].userOptions.id);
             ...