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,

             title: {
                 text: 'Declination (deg)',

             }
         },
         xAxis: {
             //  categories: ['23', '22', '21', '20', '19', '18', '17', '16', '15',...