Creating a "difference chart"

[selan...@gmail.com]

I'm trying to make a difference chart (example), but I can't seem to figure it out.  Basically, I just want to show two curves, and I want to highlight the area between the curves where the color of this area depends on which curve is "on top".  Does anyone have any idea how to do this?

Thanks!

[Sergey Grabkovsky]

Hi,

That is a great looking chart! We do support some DiffCharts, but sadly we don't support a Diff Line Chart yet.

That said, there is a way to accomplish it, but it won't be easy. You can render the area between the two curves using an Area Interval. The data for this interval will have to be generated from your own data by code that you will write; we don't provide any utilities to make this easier yet.

You will probably need two Area intervals, one for when the first series is higher and the other for when the second series is higher, since you want to render the two areas different colors. You will also need to check for intersections between the two series, so that you can end one interval and start another one. Alternatively, you could do this with just one interval, but then you won't get the dual colors. I'm not sure how big of a requirement this is for you.

Hopefully this helps!

On Wed, Jan 13, 2016 at 12:50 PM <selan...@gmail.com> wrote:

I'm trying to make a difference chart (example), but I can't seem to figure it out.  Basically, I just want to show two curves, and I want to highlight the area between the curves where the color of this area depends on which curve is "on top".  Does anyone have any idea how to do this?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/bea14ded-3732-431d-b628-23ec1cc765da%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

• • • •

Sergey Grabkovsky Software Engineer Google, Inc gra...@google.com

[selan...@gmail.com]

Hi Sergey, 

Thanks for the response!  I actually got pretty close to getting it working (see this jsfiddle), but I just wasn't able to change the colors depending on which line is on top.  Do you have any suggestions?

Thanks!  

On Wednesday, January 13, 2016 at 10:02:01 AM UTC-8, Sergey wrote:

Hi,

That is a great looking chart! We do support some DiffCharts, but sadly we don't support a Diff Line Chart yet.

That said, there is a way to accomplish it, but it won't be easy. You can render the area between the two curves using an Area Interval. The data for this interval will have to be generated from your own data by code that you will write; we don't provide any utilities to make this easier yet.

You will probably need two Area intervals, one for when the first series is higher and the other for when the second series is higher, since you want to render the two areas different colors. You will also need to check for intersections between the two series, so that you can end one interval and start another one. Alternatively, you could do this with just one interval, but then you won't get the dual colors. I'm not sure how big of a requirement this is for you.

Hopefully this helps!

On Wed, Jan 13, 2016 at 12:50 PM <selan...@gmail.com> wrote:

I'm trying to make a difference chart (example), but I can't seem to figure it out.  Basically, I just want to show two curves, and I want to highlight the area between the curves where the color of this area depends on which curve is "on top".  Does anyone have any idea how to do this?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/bea14ded-3732-431d-b628-23ec1cc765da%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sergey Grabkovsky]

Nice! That's certainly a valid way to do it. I was mostly suggesting using the interval role because it doesn't show up in the legend and doesn't count as its own series, but an area series is perfectly valid.

As I said in my previous message, in order to get different colors, you'll have to manage two series, one of one color and one of the other color, and set the data correctly for each. In order to do this properly, you'll also have to look for intersections between the two lines, and add those as a point to your area series.

On Wed, Jan 13, 2016 at 1:22 PM <selan...@gmail.com> wrote:

Hi Sergey, 

Thanks for the response!  I actually got pretty close to getting it working (see this jsfiddle), but I just wasn't able to change the colors depending on which line is on top.  Do you have any suggestions?

Thanks!  

On Wednesday, January 13, 2016 at 10:02:01 AM UTC-8, Sergey wrote:

Hi,

That is a great looking chart! We do support some DiffCharts, but sadly we don't support a Diff Line Chart yet.

That said, there is a way to accomplish it, but it won't be easy. You can render the area between the two curves using an Area Interval. The data for this interval will have to be generated from your own data by code that you will write; we don't provide any utilities to make this easier yet.

You will probably need two Area intervals, one for when the first series is higher and the other for when the second series is higher, since you want to render the two areas different colors. You will also need to check for intersections between the two series, so that you can end one interval and start another one. Alternatively, you could do this with just one interval, but then you won't get the dual colors. I'm not sure how big of a requirement this is for you.

Hopefully this helps!

On Wed, Jan 13, 2016 at 12:50 PM <selan...@gmail.com> wrote:

I'm trying to make a difference chart (example), but I can't seem to figure it out.  Basically, I just want to show two curves, and I want to highlight the area between the curves where the color of this area depends on which curve is "on top".  Does anyone have any idea how to do this?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/bea14ded-3732-431d-b628-23ec1cc765da%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

• • • •

Sergey Grabkovsky Software Engineer Google, Inc

gra...@google.com

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a3c8df0a-d934-4ddd-b49a-177626ad6988%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.