Insights Pie

by jayhilwig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
    var total = 0;
    data = [];
    var colors = ['#f8780e', '#7f7f7f']
    for (var i = 0; i < data.length; i++) {
        colors.push(data[i].color);
    }
    // Radialize the colors
    Highcharts.getOptions().colors = Highcharts.map(colors, function(color) {
        return {
            radialGradient: {
                cx: 0.5,
                cy: 0.5,
                r: 0.5
            },
            stops: [
                [0, color],
                [0.92, color],
                [0.99, Highcharts.Color(color).brighten(-0.3).get('rgb')], // darken
                [1, color], ]
        };
    });
    $('#container').highcharts({
        chart: {
            type: 'pie',
            events: {
                load: function(event) {
                    $('.highcharts-legend-item').last().append('<br/><div style="width:270px; "><div style="margin-top:9px; margin-bottom:6px; height:2px; background:#424242">&nbsp;</div><span style="float:left; color="#424242"  "> <b>Total</b> </span><span style="float:right"> ' + '<b>' + total + '</b>' + ' <b>GB</b>' + '</span> </div>')
                }
            }
        },
        title: {
            text: '<span style="font-size: 24px !important; color: #424242; font-weight: bold;">Optimization</span>',
        },
        credits: {
            enabled: false
        },
        legend: {
            labelFormatter: function() {
                total += this.y;
                return '<div style="width:246px"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y + 'mb (' + this.percentage.toFixed(0) + '%)</span></div>';
            },
        },
        series: [{
            size: '30%',
            innerSize: '0%',
            showInLegend: false,
            data: [{
                name: '<b>Optimized</b>',
                y: 57,
                color: '#ffffff',
                dataLabels: {
                    enabled: true,
                    borderWidth: 0,
    ...