I recently needed to create a waterfall chart using highcharts. As it doesn't seem to support this series type though I implemented it myself and I thought Id share the code as it may be useful to someone else.
Here's an example of the output;
To add the new Floating Column series type you have to make the following changes in the highcharts (assuming 1.2.5) js lib.
1) create new series default options. Insert this code around line 1174 (behind the other default options);
Code: Select all
defaultPlotOptions.floatingcolumn = merge(defaultPlotOptions.column, {
});
2) define the series type. Insert this code around line 10415 (just after the pie series code);
Code: Select all
var FloatingColumnSeries = extendClass(ColumnSeries, {
type: 'floatingcolumn',
translate: function() {
var series = this;
ColumnSeries.prototype.translate.apply(series);
var data = series.data;
each(data, function(point) {
var barBottom = series.yAxis.translate(point.y2) || 0;
point.barH = point.shapeArgs.height = (point.barH - barBottom);
});
}
});
seriesTypes.floatingcolumn = FloatingColumnSeries;
Code: Select all
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [
{
type: 'floatingcolumn',
name: 'series1',
data: [
{ y: 25, y2: 0},
{ y: 35, y2: 25},
{ y: 40, y2: 35},
{ y: 35, y2: 0}
]
}
]
});
The neat thing is by extending an existing series it required surprisingly little code to do what I want (hats off to the highcharts devs for that one). With a bit more work this code could even be extended to create a boxplot/candle stick series that many seem to want.
The main downside of this highchart 'hack' is that unfortunately (as far as I can tell) you currently have to add new series types within the highcharts source (because code/default options are private) and cant put extensions in a seperate file. This makes for something of a maintenance nightmare as with each update to the library, changes will need to be ported across. This is something that could be fixed with a few changes to highcharts... any chance?
Cheers,
Greg