MrGreg
Posts: 5
Joined: Fri Jan 07, 2011 4:29 pm

Example: how to create a new series type - waterfall chart

Hi

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;
Image

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;
3) You can now create a new floating column chart with the following;

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} 
				]
			}
		]
	});
note that in each point y2 specifies the lower edge of each column.


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? :D

Cheers,
Greg
User avatar
SOMR
Posts: 119
Joined: Wed Nov 03, 2010 11:38 am
Location: Sydney, Australia

Re: Example: how to create a new series type - waterfall chart

For my part,

http://highslide.com/forum/viewtopic.php?f=9&t=8527

I made extend around the example of exporting.src.js

It works pretty well, the best thing would be to have a special page where we can put/manage our extend/plugin !! (Admin if you heard us ;)
MrGreg
Posts: 5
Joined: Fri Jan 07, 2011 4:29 pm

Re: Example: how to create a new series type - waterfall chart

ah ha - looks like Im a step behind!

I discovered the highcharts git repo this morning and it seems box plots are already on the way...
https://github.com/highslide-software/h ... 6a0a87d6a9
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Example: how to create a new series type - waterfall chart

In the latest versions, Highcharts supports a point.low config option that probably can handle this alone: http://fiddle.jshell.net/8JP8T/ . It is not added to the API yet, as it's a preparation for the chart types to come.
Torstein Hønsi
CTO, Founder
Highsoft
toamitkumar
Posts: 7
Joined: Fri May 06, 2011 7:45 pm

Re: Example: how to create a new series type - waterfall chart

Is there a way to connect the bar with dotted lines?
Googling does not give any answers..

Thanks!!
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: Example: how to create a new series type - waterfall chart

I'm not sure, but did you mean something like adding another dotted-line series? See: http://fiddle.jshell.net/8JP8T/7/
Slawek Kolodziej
Highcharts support team
toamitkumar
Posts: 7
Joined: Fri May 06, 2011 7:45 pm

Re: Example: how to create a new series type - waterfall chart

I meant connecting the edges like this:
stacked_chart.png
stacked_chart.png (12 KiB) Viewed 10703 times
What is the best way to achieve this ?
jlbriggs
Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

Re: Example: how to create a new series type - waterfall chart

will this be close enough for what you need: http://fiddle.jshell.net/8JP8T/10/ ?
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
toamitkumar
Posts: 7
Joined: Fri May 06, 2011 7:45 pm

Re: Example: how to create a new series type - waterfall chart

Thanks !!
Yeah it is close.
We were able to get it working though a little different ...

The one we need is for stacked waterfall ... as the image shows.
epmkevin
Posts: 1
Joined: Wed Aug 31, 2011 6:39 pm

Re: Example: how to create a new series type - waterfall chart

toamitkumar,

How did you get this working?
pta
Posts: 1
Joined: Wed Sep 14, 2011 8:26 am

Re: Example: how to create a new series type - waterfall chart

Hello, Im looking for the cleanest way how to make Highcharts display a kind of double-area series type (something like the green area on this picture http://my.jetscreenshot.com/3677/20110914-wii4-31kb.jpg). Essentially the same as this waterfall column type discussed here, but applied to the area type and I don't want to solve that by creating two areas. Since the point.low doesn't work for area type Im thinking about extending Highcharts. And I don't want to modify the original source due to the obvious issues after updates. Can anyone point me to a direction of a possible solution, please?
stiberger
Posts: 2
Joined: Thu Sep 15, 2011 7:03 pm

Re: Example: how to create a new series type - waterfall chart

Hello, Im looking for the cleanest way how to make Highcharts display a kind of double-area series type (something like the green area on this picture
I feel this is a bit off topic, but I have an implementation of something similar you are asking about.
It doesn┬┤t modify Highcharts source as it is possible to exend it from "outside" code.
This is just a proof of concept, and not totally finished, but it is maybe something to build upon.
http://jsfiddle.net/stiberger/UhMk4/

I posted this recently, because I┬┤m having some issues with how the y-axis gets it┬┤s series extremes values,
and a few places in the code there is some hard coding around how to handle the rendering of series
based on their type. This graph type is something in between line and area, and I can┬┤t control the behaviour.

* For the legend i want behaviour like it is an area.
* I wan┬┤t to be able to start the y-axis on any value, not just 0, which "area" is limited to. So here i want "line" behaviour.
* When zooming in on only this band graph, i want the series class to provide the extreme values to
the axis class, by having the axis class asking for these through a method, and not just iterate over the series values itself.
In this case the extremities is not in the values.

Localy I have made some hacks to get around these problems, but I would really like to see some small changes
to the library code, so it would be easier to extend.

Return to “Highcharts Usage”