$(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', '14', '13', '12', '11', '10', '09', '08', '07', '06', '05', '04', '03', '02', '01', '00'],
min: 24,
max: 0,
gridLineWidth: 1,
endOnTick: false,
startOnTick: false,
title: {
// enabled: true,
text: 'Right Ascension (hrs)'
},
tickInterval: 1,
showLastLabel: false
},
zAxis: {
min: 1375,
max: 1475,
gridLineWidth: 1,
title: {
text: 'Freq(MHz)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
// x: 100,
// y: 70,
floating: true,
backgroundColor: 'rgba(127, 225, 44, .4)',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
fillColor: 'yellow',
lineColor: 'black'
},
symbol: 'triangle',
states: {
hover: {
marker: {
fillColor: 'yellow',
enabled: true
}
}
},
}
},
series: [{
name: 'False',
// fillColor: 'rgba(223, 83, 83, .5)',
fillColor: 'yellow',
color: 'yellow',
marker: {
lineColor: 'black',
symbol: 'triangle-down'
},
data: [
[1.41,45.56,1424.803107] , [1.40,45.59,1424.904007] , [1.39,45.55,1424.943246] , [1.42,45.58,1424.968878] , [1.40,45.56,1424.980409] , [1.40,45.56,1424.987257] , [2.50,14.44,1460.151823] , [2.12,14.70,1460.179137] , [2.15,14.68,1460.233546] , [2.12,16.14,1460.399626] , [2.14,15.46,1460.179192] , [5.92,7.45,1460.620153] , [7.37,9.43,1460.799167] , [5.93,7.44,1460.958559] , [5.93,7.44,1461.08601] , [5.93,7.43,1461.208877] , [5.93,7.41,1461.649861] , [18.88,-23.22,1461.742637] , [2.13,16.54,1424.981682] , [2.63,15.75,1424.994546] , [2.66,15.82,1465.151813] , [2.67,15.81,1465.327339] , [2.66,15.82,1465.842379] , [19.27,47.87,1465.842402] , [19.31,47.84,1465.91605] , [19.28,47.84,1466.310871] , [15.43,37.40,1466.313439] , [19.55,27.98,1466.572818] , [19.53,27.97,1466.648332] , [19.53,27.97,1466.802118] , [19.52,27.97,1466.942985] , [19.98,35.70,1467.367326] , [10.30,23.46,1451.353955] , [10.93,34.23,1460.620239] , [19.40,-27.00,1462.67941] , [3.04,17.31,1460.796939] , [3.20,17.59,1470.402433] , [3.20,17.66,1470.620519] , [3.18,17.31,1440.748199] , [3.18,17.32,1441.092248] , [7.43,-29.30,1460.033903] , [3.93,19.51,1450.52852] , [9.56,22.99,1451.356423] , [16.46,14.08,1443.682248] , [19.11,48.24,1424.994062] , [19.19,47.56,1424.994283] , [4.12,20.92,1374.994799] , [4.04,21.01,1375.853014] , [22.18,6.22,1431.273009] , [21.66,-14.65,1380.030599] , [21.66,-14.66,1380.326256] , [0.25,15.24,1375.263102] , [0.26,15.20,1375.26568] , [9.00,11.88,1437.868094] , [13.18,17.52,1448.560881] , [19.94,43.98,1386.419811] , [6.86,22.86,1375.618736] , [7.41,22.86,1375.912633] , [6.65,6.16,1374.994313] , [6.63,6.16,1375.323267] , [6.64,6.15,1375.618875] , [9.70,9.92,1375.6188] , [9.70,9.89,1375.912766] , [17.23,65.78,1375.323247] , [17.17,65.78,1375.514648] , [17.23,65.79,1375.618897] , [17.23,65.80,1375.91283] , [19.91,43.95,1388.533017] , [19.91,43.96,1388.535597] , [19.93,43.97,1388.853107] , [5.44,6.34,1374.994237] , [5.43,6.35,1375.618849] , [8.28,9.18,1350.449044] , [14.79,27.15,1350.766739] , [14.77,27.15,1351.207644] , [14.75,27.14,1351.678151] , [19.70,42.61,1394.842748] , [1.88,-10.38,1374.994624] ]
}, {
name: 'Open',
color: 'rgba(223, 83, 83, .5)',
marker: {
symbol: 'triangle',
fillColor: 'rgba(215,40,40,0.9)'
},
data: [
[1.42,45.55,1424.737864] , [18.09,-22.63,1461.942822] , [19.38,-26.99,1423.560722] , [21.25,-18.77,1386.419699] , [19.18,47.52,1386.419947] , [20.56,11.31,1399.001783] , [7.88,22.86,1376.207492] , [6.64,6.13,1376.207539] , [9.70,9.89,1376.049451] , [9.69,9.89,1376.207525] , [9.70,9.88,1376.500638] , [17.18,65.79,1376.04954] , [17.15,65.80,1376.20762] , [17.17,65.69,1376.500698] , [16.45,61.50,1376.049558] , [15.29,55.28,1377.70978] , [16.17,58.94,1378.603243] , [16.43,61.53,1379.218005] , [5.43,6.33,1376.069787] , [8.78,18.20,1376.500603] , [8.78,18.19,1376.796241] , [19.94,44.00,1389.580402] , [19.96,44.04,1390.892769] , [19.94,44.02,1391.081958] , [1.88,-10.30,1375.263169] , [1.88,-10.30,1375.323281] , [1.87,-10.32,1376.049819] , [6.22,23.99,1378.412097] , [12.57,41.43,1375.618999] , [12.58,41.43,1376.20777] , [12.59,41.43,1376.796591] , [12.60,41.34,1377.0897] , [19.97,44.03,1397.228385] , [19.93,43.94,1400.184437] ]
}]
});
// Add mouse events for rotation
$(chart.container).bind('mousedown.hc touchstart.hc', function (e)
{
e = chart.pointer.normalize(e);
var posX = e.pageX,
posY = e.pageY,
alpha = chart.options.chart.options3d.alpha,
beta = chart.options.chart.options3d.beta,
newAlpha,
newBeta,
sensitivity = 5; // lower is more sensitive
$(document).bind({
'mousemove.hc touchdrag.hc': function (e)
{
// Run beta
newBeta = beta + (posX - e.pageX) / sensitivity;
newBeta = Math.min(100, Math.max(-100, newBeta));
chart.options.chart.options3d.beta = newBeta;
// Run alpha
newAlpha = alpha + (e.pageY - posY) / sensitivity;
newAlpha = Math.min(100, Math.max(-100, newAlpha));
chart.options.chart.options3d.alpha = newAlpha;
chart.redraw(false);
},
'mouseup touchend': function ()
{
$(document).unbind('.hc');
}
});
});
});
<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>
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}