Filling in area between two lines (series) in Line chart or Area chart

[Ambientson]

Hi,

I'd like to fill in with color the area between two lines (data series) in a line chart. I've used Area chart but it always fills all the way down to the x-axis. I can't get it to fill on between two series and not go all the way to the x-axis.

I did find a way to do it but with the old deprecated API:

Line Fills chm [Line, Radar]
You can fill the area below a data line with a solid color.
You can combine line fills with any other chm parameters using a pipe character ( | ) to separate the chm parameters.
Syntax: chm= <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>

Is there any way to do it with the new API?

Many thanks.

[asgallant]

You can do this, but it requires a bit of fiddling with the data.  You will need to use a ComboChart with 3 data series: 1 line and two area.  Use the lower data series as both a line and area series, and use the other as an area series, then set the "isStacked" option to true and the color of the lower area series to "transparent".  Depending on how your data is set up, you may or may not need to use the difference between the upper and lower lines to calculate the data for the second area series.  You can use a DataView to arrange the data as needed.

Here's an example using a DataView that computes the difference between the two series to make the second area: http://jsfiddle.net/asgallant/ydNT2/

[Ambientson]

Sorry for the long delay in responding and thanks for the pointer and the code example!

I'll try it out in the next few days and hopefully get it to work.

By the way, I thought of doing this to be able to represent a standard deviation range but this might not be the best approach. Here's what I am trying to accomplish:

I have a serie displayed on a line chart. I user can select which data point of the serie he wishes to us as a comparison value. Based on the data point selected, I want to shade on the chart a +/- 2 standard deviation range (so this would basically appear as a shaded stripe of width 2 standard deviations across the chart centered on the selected data point).

Do you think the combo chart is still the way to go?

Many thanks!

[asgallant]

Would something like these work for you: https://developers.google.com/chart/interactive/docs/roles#intervalrole?

[Ambientson]

They do work (and were required) but they're not sufficient.

I'm already using intervals to set errors bar for my data points (set to + and - 2SD for the intervals) but on top of that, I'm looking to shade the area (see attached image):

Thanks.

[asgallant]

Ok, so you want to shade a range across the entire chart, depending on the point clicked?  You can do that with the trick I outlined above, but using a DataView to calculate the shaded area based on the selected data point.  Here's an example: http://jsfiddle.net/asgallant/HDqUF/

[Ambientson]

That is very cool and exactly what I wanted!

I'm finishing another report and I'll get on this one and try your code right after. Keep you posted.

Many thanks and Cheers!

[Ambientson]

Works great. Thank you very much for the help!

Cheers!

[asgallant]

You're welcome.