How to hide / show a column in the base column of a tall graph graph?
I am trying to show / hide a column (with all associated points) in a tall charts plot.
For example, consider the following graph: jsfiddle .
I want the user to be able to click on the "Sep" column, hide it, rescale the axis (x and y axis) accordingly.
Unfortunately I am not a javascript / jquery expert. So I was wondering if this could be done and how.
Thank you for your help!
Here is the script code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
source to share
Here is a solution from Daker, with a jsfiddle .
Html
<div id="container" style="height: 300px"></div>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<button id="b4">Hide third category</button>
<button id="b5">Show third category</button>
Javascript
var point = {
x: null,
y: null
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
type: 'column',
name: 'third',
data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1],
}]
});
$('#b4').click(function () {
var no = 2; //third element
// removed march, hoping we'd only show 11 months...
chart.xAxis[0].setCategories(['Jan', 'Feb', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], false);
var data = [];
for (i = 0; i < chart.series[0].data.length; i++) {
if (i < no) {
data.push([chart.series[0].data[i].x, chart.series[0].data[i].y]);
} else if (i === no) {
point.x = chart.series[0].data[i].x;
point.y = chart.series[0].data[i].y;
} else if (i > no) {
data.push([chart.series[0].data[i].x - 1, chart.series[0].data[i].y]);
}
}
chart.series[0].setData(data);
});
$('#b5').click(function () {
var no = 2; //third element
var data = [];
for (i = 0; i < chart.series[0].data.length; i++) {
if (i < no) {
data.push([chart.series[0].data[i].x, chart.series[0].data[i].y]);
} else if (i === no) {
data.push([point.x, point.y]);
data.push([chart.series[0].data[i].x + 1, chart.series[0].data[i].y]);
} else if (i > no) {
data.push([chart.series[0].data[i].x + 1, chart.series[0].data[i].y]);
}
}
chart.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
chart.series[0].setData(data);
});
source to share
To do this with a grouped bar chart, you need to create a custom function that will
1) remove the data series from the chart
2) rebuild dataset with remote datapoints removed
3) add the series to the chart again
and,
4) you will need to create some form of outboard control that mimics the legend so that the user can still click to re-show the deleted data. Otherwise, when you rescale the axis, you will remove the label and the user cannot return data.
This is not a trivial exercise, unfortunately.
setData () function will handle 1 and 3: http://api.highcharts.com/highcharts#Series.setData%28%29
OTOH , if you want to do this with a standard (ungrouped, not stacked) histogram, you can just make each column a separate data series and the built-in Legend functions will handle everything for you.
source to share