ElementStacks
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
<ul id="legend"></ul>
CSS
body {
font-family: Arial, Verdana, sans-serif;
}
li {
cursor: pointer;
}
JavaScript
$report = $('#report');
var chart = new Highcharts.Chart({
chart: {
type: "bubble",
renderTo: 'container',
spacing: [10, 20, 10, 20],
height: 600
},
xAxis: {
/*categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],*/
title: {
text: 'Probability'
},
min: 0,
max: 105
},
yAxis: {
title: {
text: 'Average Move'
}
},
tooltip: {
pointFormat: '<b>Prob</b>: <b>{point.x:.2f}</b><br><b>Move</b>: <b>{point.y}</b><br><b>Stddev</b>:<b>{point.z}</b>',
valueDecimals: 2
/*valueDecimals: 2,
valuePrefix: '$',
valueSuffix: ' USD'*/,
/*formatter: function() {
return '<b>Prob</b>: <b>'+this.x.toFixed(2)+'</b><br><b>Move</b>: <b>'+this.y.toFixed(2)+'</b><br><b>Stddev</b>:<b>'+this.point.z.toFixed(2)+'</b>';
}*/
},
plotOptions: {
series: {
events: {
mouseOver: function () {
$report.html('Moused over')
.css('color', 'green');
},
mouseOut: function () {
$report.html('Moused out')
.css('color', 'red');
}
}
}
},
series: [{
data: [
[60.2523659305994, 0.820669463551728, 1.21823737763824]
],
name: "SPY"
}, {
data: [
[100, 1.40833375617637, 2.77093483908521]
],
name: "EEM"
}, {
data: [
[8.88888888888889, 1.14758884257329, 1.61078502603208]
],
name: "EWJ"
}, {
data: [
[43.4782608695652, 1.31384705127746, 2.15601372723703]
],
name: "XLF"
}, {
data: [
[55.7522123893805, 1.17351874232536, 1.8152524035308]
],
name: "IWM"
}, {
...