Highcharts Demo

author(s): Torstein Hønsi

by James Brown

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')]
                    ]
                };
            });

            // Set up the chart
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    margin: 100,
                    type: 'scatter',
                    options3d: {
                        enabled: true,
                        alpha: 5,
                        beta: 5,
                        depth: 250,
                        viewDistance: 5,

                        frame: {
                            bottom: { size: 1, color: 'rgba(0,0,0,0.1)' },
                            back: { size: 1, color: 'rgba(0,0,0,0.5)' },
                            side: { size: 1, color: 'rgba(0,0,0,0.3)' }
                        }
                    }
                },
                title: {
                    text: 'Hits (Ra,DEC,Freq)'
                },
                subtitle: {
                    text: '(drag to spin)'
                },
                plotOptions: {
                    scatter: {
                        width: 10,
                        height: 10,
                        depth: 10
                    }
                },
                yAxis: {
                    endOnTick: false,
                    startOnTick: false,
                    gridLineWidth: 0,
                    min: -90,
                    max: 90,
                    tickInterval: 30,

                   ...