Are color bands possible in LineChart

[Rogelio Flores]

A request has come to me to create color bands in our LineCharts similar to these pinkish bands shown in these two charts:

http://jsfiddle.net/Jv5LD/14/

(note these are only opaque divs that I put on top of the charts, but I'm looking for these bands to be in the background of the chart and correspond to an h-axis range)

Is this possible?

If not, I'll go with the "scope" role to de-emphasize the values for the range.

[asgallant]

Something like this: http://jsfiddle.net/asgallant/KJavc/?

[Rogelio Flores]

Yes!... something like that, except I can't seem to be able to generate a band of a given color surrounded by white using this approach.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/hi_605b-1Pw/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[asgallant]

The setup for this is a bit tricky:

1) in the DataTable, set the boundaries of the areas in the 3rd column, using increasing integers, starting from 0.  Any row that isn't an area border should have a null in the 3rd column.

2) in this section of the code:

series.push({

    type: 'area',

    lineWidth: 0,

    targetAxisIndex: 1,

    visibleInLegend: false

    // you can set area color here if you like

});

you can set colors on the bands.  The key to getting whitespace between colored bands is to set the "color" parameter in this object to "transparent" for the bands that represent the empty spaces.

On Friday, April 19, 2013 5:43:40 PM UTC-4, Rogelio Flores wrote:

Yes!... something like that, except I can't seem to be able to generate a band of a given color surrounded by white using this approach.

On Fri, Apr 19, 2013 at 3:57 PM, asgallant <drew_g...@abtassoc.com> wrote:

Something like this: http://jsfiddle.net/asgallant/KJavc/?

On Friday, April 19, 2013 3:19:43 PM UTC-4, Rogelio Flores wrote:

A request has come to me to create color bands in our LineCharts similar to these pinkish bands shown in these two charts:

http://jsfiddle.net/Jv5LD/14/

(note these are only opaque divs that I put on top of the charts, but I'm looking for these bands to be in the background of the chart and correspond to an h-axis range)

Is this possible?

If not, I'll go with the "scope" role to de-emphasize the values for the range.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/hi_605b-1Pw/unsubscribe?hl=en.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Rogelio Flores]

Well, I tried adding this:

colors: ['blue', 'red']

or 

colors: ['blue', 'transparent']

See: 

http://jsfiddle.net/KJavc/4/

but the colors are ignored. Do I have the syntax wrong?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

In the series option, you are only setting the color for a single series at a time, so you have to make sure you are setting the color appropriate to that series.  You can alternatively use the "colors" option (outside the series option), which may be easier in your case.  See this: http://jsfiddle.net/asgallant/KJavc/5/

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

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

Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Rogelio Flores]

Got it. Thanks again.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Евгений Зимин]

пятница, 19 апреля 2013 г., 22:57:53 UTC+3 пользователь asgallant написал:

Something like this: http://jsfiddle.net/asgallant/KJavc/?

Hello, asgallant! Thank you for this interesting example. But how make this colored areas with Google Charts Bars? I try change type from 'line' to 'bars' http://jsfiddle.net/artzavod/j8ag8o74/1/ but something is wrong.