Stacked Combo Chart

[colins...@gmail.com]

I am currently investigating Google Charts as an alternative to creating charts in Adobe Flash Builder. I am trying to find out if it is possible to create a chart that has the following characteristics.

Series 1: Column
Series 2; Column
Series 3: Line

Series 1 and 2 are stacked, but rather that being placed one on top of the other they are superimposed over each other. This is necessary because the data should show the value of Series 1 and the value of Series 2 on rollover, but visually it shows Series 1 with Series 2 behind it so that the positive difference between them shows as if it were stacked on Series 1. A negative difference does not show because Series 1 covers Series 2. Series 3 is a line that covers Series 1 and Series 2 and shows a target value. Values for all Series are percentages. So a sample column might have the values Series 1 70%, Series 2 85%, Series 3 80%. This would show a column of 70% a stacked 15% and a line part way through the stacked 15%.

Is this possible using Google Charts? I have played around for a while and haven't found a way to do this. I can created a Combo Chart with a single column and a line, or a Stacked Chart with no line and wrongly displayed data on rollover because to get it to display correctly Series 2 has to be the delta value between the Series 1 data and the Series 2 data.

Any suggestions on how to achieve the results I need would be gratefully received.

Attached is a sample of what I am trying to recreate,

Thanks,

Colin

[Daniel LaLiberte]

We have a "difference" chart that can show the difference between two bar/column charts.  See https://developers.google.com/chart/interactive/docs/gallery/diffchart

We also have "combo" charts that let you combine bars and lines in the same chart, as you found.

However, we currently don't support both difference and combo features in the same chart.  The best you can do would be to show the two column series side-by-side.

--
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/e96da669-4aad-40fd-b5db-1e3cfc764e36%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[colins...@gmail.com]

That is kind of what I was suspecting based on what I had found from investigating. Thanks for clarifying Daniel.

On Thursday, December 17, 2015 at 11:28:53 AM UTC-8, Daniel LaLiberte wrote:

We have a "difference" chart that can show the difference between two bar/column charts.  See https://developers.google.com/chart/interactive/docs/gallery/diffchart

We also have "combo" charts that let you combine bars and lines in the same chart, as you found.

However, we currently don't support both difference and combo features in the same chart.  The best you can do would be to show the two column series side-by-side.

On Thu, Dec 17, 2015 at 2:01 PM, <colins...@gmail.com> wrote:

I am currently investigating Google Charts as an alternative to creating charts in Adobe Flash Builder. I am trying to find out if it is possible to create a chart that has the following characteristics.

Series 1: Column
Series 2; Column
Series 3: Line

Series 1 and 2 are stacked, but rather that being placed one on top of the other they are superimposed over each other. This is necessary because the data should show the value of Series 1 and the value of Series 2 on rollover, but visually it shows Series 1 with Series 2 behind it so that the positive difference between them shows as if it were stacked on Series 1. A negative difference does not show because Series 1 covers Series 2. Series 3 is a line that covers Series 1 and Series 2 and shows a target value. Values for all Series are percentages. So a sample column might have the values Series 1 70%, Series 2 85%, Series 3 80%. This would show a column of 70% a stacked 15% and a line part way through the stacked 15%.

Is this possible using Google Charts? I have played around for a while and haven't found a way to do this. I can created a Combo Chart with a single column and a line, or a Stacked Chart with no line and wrongly displayed data on rollover because to get it to display correctly Series 2 has to be the delta value between the Series 1 data and the Series 2 data.

Any suggestions on how to achieve the results I need would be gratefully received.

Attached is a sample of what I am trying to recreate,

Thanks,

Colin

--
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/e96da669-4aad-40fd-b5db-1e3cfc764e36%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

[colins...@gmail.com]

Daniel, is it possible to do one or the other of these two things as a way to simulate what I am wanting?
1: Have the relative positions of the series adjusted horizontally so they overlap each other until they coincide?
2: Make the background of the chart transparent and overlay a chart with one of the series over a chart with the other series (ideally having axes labels on only one chart?

[Daniel LaLiberte]

You can't offset particular series for column elements so they might overlap other series column elements.  The combo chart finds all 'column' series and makes them work together without overlapping.  Good idea though.

But you could possibly overlay two charts by setting the backgroundColor option for the one on top to 'transparent'.  You would want to ensure your axes are drawn the same in both charts so chart elements are aligned correctly, but then set the colors of one to 'transparent'.  

However, I think you will probably get better results more easily by using 'box' intervals.  See:  https://developers.google.com/chart/interactive/docs/gallery/intervals#box-intervals

--
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/9a2202cc-4b76-467c-81ac-79eecdc28217%40googlegroups.com.

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

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[colins...@gmail.com]

How do you set the background to transparent? I only see the following in the docs.

backgroundColor	The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00', or an object with the following properties. Type: string or object Default: 'white'
backgroundColor.stroke	The color of the chart border, as an HTML color string. Type: string Default: '#666'
backgroundColor.strokeWidth	The border width, in pixels. Type: number Default: 0
backgroundColor.fill	The chart fill color, as an HTML color string. Type: string Default: 'white'

On Thursday, December 17, 2015 at 11:01:21 AM UTC-8, colins...@gmail.com wrote: