Coconut Carmel

gistfile1.txt

$(function () {
    var chart;

    $(document).ready(function() {

    

        var colors = Highcharts.getOptions().colors,

            categories = ['Sugar', 'Coconut Milk', 'Vanilla', 'Coconut'],

            name = 'Ingredients',

            data = [{

                    y: 100,

                    color: colors[0],

                    drilldown: {

                        name: 'Do',

                        categories: ['Medium Heat', 'Stir', 'Stir and Mix','Something else'],

                        data: [2.5, 2.5, 5, 1],

                        color: colors[0]

                    }

                }, {

                    y: 50,

                    color: colors[1],

                    drilldown: {

                        name: 'Firefox versions',

                        categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],

                        data: [0, 0, 0, 0, 0],

                        color: colors[1]

                    }

                },  {

                    y: 30,

                    color: colors[3],

                    drilldown: {

                        name: 'Safari versions',

                        categories: [],

                        data: [0,0,0,0,0,0,0],

                        color: colors[3]

                    }

                }, {

                    y: 30,

                    color: colors[4],

                    drilldown: {

                        name: 'Opera versions',

                        categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],

                        data: [ 0, 0, 0],

                        color: colors[4]

                    }

                }];

    

    

        // Build the data arrays

        var browserData = [];

        var versionsData = [];

        for (var i = 0; i < data.length; i++) {

    

            // add browser data

            browserData.push({

                name: categories[i],

                y: data[i].y,

                color: data[i].color

            });

    

            // add version data

            for (var j = 0; j < data[i].drilldown.data.length; j++) {

                var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;

                versionsData.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

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'pie'

            },

            title: {

                text: 'Coconut Caramel Sauce'

            },

            yAxis: {

                title: {

                    text: 'Time'

                }

            },

            plotOptions: {

                pie: {

                    shadow: true

                }

            },

            tooltip: {

                formatter: function() {

                    return '<b>'+ this.point.name +'</b>: '+ this.y +' Grams';

                }

            },

            series: [{

                name: 'Ingredients',

                data: browserData,

                size: '60%',

                dataLabels: {

                    formatter: function() {

                        return this.y > 5 ? this.point.name : null;

                    },

                    color: 'white',

                    distance: -30

                }

            }, {

                name: 'Time',

                data: versionsData,

                innerSize: '60%',

                dataLabels: {

                    formatter: function() {

                        // display only if larger than 1

                        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +' Mins'  : null;

                    }

                }

            },
                    {

                name: 'Ingredients',

                data: Ingredients,

                size: '10%',

                dataLabels: {

                    formatter: function() {

                        return this.y > 5 ? this.point.name : null;

                    },

                    color: 'white',

                    distance: -30

                }

            },]

        });

    });

    
});​