Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>

CSS

#container {
/*    height: 400px;*/
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

$(function () {

    // Give the points a 3D feel by adding a radial gradient
    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    });

    //also  see http://stackoverflow.com/questions/4987457/highcharts-text-labels-for-y-axis
    var funLabels = ["Very Low Fun(0)", "Low Fun", "Medium Fun", "High Fun", "Very High fun(4)"];
    var importanceLabels = ["Very Low Imp.(0)", "Low Imp.", "Medium Imp.", "High Imp.", "Very High Imp.(4)"];
    
    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            margin: 100,
            type: 'scatter',
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 30,
                depth: 250,
                viewDistance: 5,

                frame: {
                    bottom: {
                        size: 1,
                        color: 'rgba(0,0,0,0.02)'
                    },
                    back: {
                        size: 1,
                        color: 'rgba(0,0,0,0.04)'
                    },
                    side: {
                        size: 1,
                        color: 'rgba(0,0,0,0.06)'
                    }
                }
            }
        },
        title: {
            text: 'Fun, Length, Urgency, Importance and Difficulty'
        },
        subtitle: {
            text: 'The spectrum of tasks in a startup/project/day (bubble size = length)'
        },
        plotOptions: {
            scatter: {
                width: 10,
                height: 10,
                depth: 10,
                marker: {
                    symbol: 'circle'
           ...