Re: Status in a "timeline"

[Hangas]

I'll thrown in an example.

Take a look to the last graph on this page (http://79.125.13.206/lab/sample.php) 

What I would like, is that instead of a line, there was an area graph, always full height, but with a different color for each value. Like orage for 1, green for 2, blue for 4... whatever.

I tried to demux the values into multiple series for each discrete value with either 0 or 1 as values, and then plot the 3 series in a area chart.

Didn't like the result as it didn't produced a "sware" wave plot.  

I was expecting there was a simpler way with direct values.

On Monday, August 20, 2012 3:13:29 PM UTC+1, Hangas wrote:

Hi,

I have a datasource which contains a timestamp column and a another one with a discreet value, corresponding to a status.
What I really wanted was to plot this series with a solid horizontal bar, with a different color for each status.  
 
Better yet, this status colors would become de background of a regular line chart.

Is this even possible?

[asgallant]

You mean something like this: http://jsfiddle.net/asgallant/yaUtp/2/?

If so, the key is to duplicate the data rows where you want the color change to occur, except switch the area series to the next in line.

[Hangas]

Exactly that!

Ok, I got the trick! No I'll just have to find a way to efficiently manipulate the original data source (or a copy).

I'll give it a try. Txs!

[Hangas]

Perfect!   http://lab.hangas.com/lab/sample2.php

Thanks for the tip!   

On Monday, August 20, 2012 5:28:25 PM UTC+1, asgallant wrote:

[asgallant]

If you want all of the areas to be (roughly) equally spaced, you can have them auto-calculated: http://jsfiddle.net/asgallant/yaUtp/27/

With this method, it is actually possible to have the last area cover zero rows of data when the number of rows and areas meets a rather complicated set of conditions (which I believe is a * floor (r / (a - 1)) + 1 > r, where a = # of areas and r = # or rows).

You could also do something similar, except demarcate the boundaries manually:  http://jsfiddle.net/asgallant/yaUtp/30/ 

[asgallant]

Well, there you went and did it your own way while I was working on alternatives  >;o)

Incidentally, you can cut down on the dashboard.bind() calls by binding everything in one:

dashboard.bind([control], [chart2, chart3, chart4, chart5]); 

[Hangas]

Yep, I took your first suggestion. I also think that is the best approach, the areas width depend on a status and are not even.

I just manipulated the duplication of the "area border rows" in the JSON rather then manipulate the datasource object in JS.

As for the dashboard.bind()   thanks! I just was pasting has I go... and I'm also very fresh on google charts. :)