Highcharts Demo

author(s): Torstein Hønsi

by Santosh Giridhara

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

CSS

#container {
	max-width: 660px;
	margin: auto;
	height: 400px;
	margin: 0 auto;
}

JavaScript

var colors = Highcharts.getOptions().colors,
/* ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
    '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'], */
    categories = [
        'Registered',
        'Attended'
    ],
    data = [
        {
            y: 60,
            //color: colors[0],
            drilldown: {
                name: 'Registered',
                categories: [
                    'class1',
                    'class2',
                    'class3',
                    'class4',
                    'class5'
                ],
                data: [
                	10,
                	15,
                	10,
	               	15,
                 	10
                ]
            }
        },
        {
            y: 40,
            //color: colors[9],
            drilldown: {
                name: 'Attended',
                categories: ['class1','class4'
                ],
                data: [
                20,20
                ]
            }
        }
    ],
    registeredData = [],
    attendedData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;


// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

    // add browser data
    registeredData.push({
        name: categories[i],
        y: data[i].y,
        color: data[i].color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
        brightness = 0.2 - (j / drillDataLen) / 5;
        attendedData.push({
            name: data[i].drilldown.categories[j],
            y: data[i].drilldown.data[j],
            color: Highcharts.Color(data[i].color).brighten(brightness).get()
        });
    }
}

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: ''
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%']
        }
    },
    tooltip: {
      ...