series.remove() problem
by jlbriggs
HTML
<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>
<form id="data-menu">
<label for="data-select" class="radio">Select Data:</label>
<select id="data-select" autocomplete="off">
<option selected="selected" value="sdb">Sales $ Billed</option>
<option value="sdo">Sales $ Ordered</option>
<option value="pdb">PO $ Billed</option>
<option value="pdo">PO $ Ordered</option>
</select>
</form>
<div id="billed" style="height:200px;margin:1.5em 1em;"></div>
JavaScript
var billed;
$(function() {
$('#data-menu').submit(function(e) {
e.preventDefault();
});
$('#data-select').change(function(e) {
var set = $(this).val();
updateData(billed,set);
});
var options = {
chart: {
margin:[5,175,25,60]
},
title: { text: '' },
legend: {
layout: 'vertical',
align:'right',
verticalAlign:'middle',
itemWidth:135
},
tooltip: {
useHTML:true,
crosshairs: true,
shared: true,
style: {
padding:'2px'
},
formatter: function() {
var points='<table class="tip"><caption>'+Highcharts.dateFormat('%B',this.x)+'</caption><tbody>';
$.each(this.points,function(i,point) {
points +='<tr><th style="background-color: '+point.series.color+'!important;border:1px solid #fff!important;"> </th>'
+ '<th style="text-align: left">'+ point.series.name +': </th>'
+ '<td style="text-align: right"> '+Highcharts.numberFormat(point.y,2)+'</td></tr>'
});
if(typeof(this.points[0]) != 'undefined' && typeof(this.points[1]) != 'undefined') {
points +='<tr><th style="background-color:#eee!important;border:1px solid #fff!important;"> </th>'
+ '<th style="text-align: left">Difference: </th>'
+ '<td style="text-align: right"> '+Highcharts.numberFormat(this.points[0].y - this.points[1].y,2)+'</td></tr>'
+ '</tbody></table>';
}
return points;
}
},
plotOptions: {
series: {
shadow: {
color:'rgba(255,255,255,1)',
offsetX:0,
offsetY:0,
opacity:1,
...