Area/Stepped area chart option to make the colored area 'above' the line

[Dillon Sadofsky]

I've been using combo charts for awhile to render scatter graphs of measured data, with line charts to represent user defined 'thresholds' (above which, the points are red flags).  Rendering lines like this works, but the user can only hover over the end points to see its numeric value.

I like how the stepped area chart allows hovering over an entire section, and would like to use this instead.  However, I do not see an option to make the area in question be 'above' the numeric values given.  I could set options.vAxis.direction to -1, and although this flips the area, it also flips the numeric values of the y axis (and I need this on a combo chart with a normal scatter chart where up is higher y values).

So I'm curious if there is an easy way to make the stepped area chart go above the line instead of below.  Considering the framework can flip the entire graph, I'd think this would be relatively easy.  Alternatively, is there an easy option for lines where the user can mouse over any point in the line and see its 'value'?

Also, somewhat unrelated, but I had a set of data that was accidentally graphed where there were >400 thresholds (creating 400 very simple horizontal lines as separate series).  When I render this in chrome, memory consumption grows and grows until chrome eventually kills the process.  I'm surprised by this because 400 data points is very easy to graph.  Is there a reason that 400 series each with 2 data points and a line between should be non-performant?  Is there a better solution to prevent this, or do I simply need to add a limit to what I query from our database before rendering?

Thank you for your time.

[Dillon Sadofsky]

One last small point, I technically allow thresholds that restrict values above and below a fixed value, so I'd like the ability to specify what direction a series' area goes in.  This is not super important due to 'above' being more common, but it would still be nice.

[Daniel LaLiberte]

You can target each series (data column) to a different vertical axis, and there are more than 2 vertical axes.  0 is the left, 1 is the right, and everything else is on the right also, but currently overlaid in the same place as axis 1, so it is best to turn off the display of additional axes.  You'll need to set the viewWindow min and max of each axis to align values as you want.

Actually, there is another way to 'flip' how the area and column charts draw their areas.  The always draw relative to the baseline value, which defaults to 0.  So if you set your baseline to the top of the chart, the areas will be above the data values.  You can set a different baseline value for each axis, though this really needs to be a per series option.

Concerning the performance, more series add more legend items, but that should not be a significant overhead.  There is much more overhead in trying to support interaction with each series, so if you turn off interaction, it may work better.  Other than that, I am not sure what might be happening, and we'd have to investigate to find out.   You might be able to avoid using separate series, however, if you just add null values to break up the lines (and disable interpolateNulls).  If you want different colors for each, you can use the 'style' role to give each line its own color.

--
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-visualization-api@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/3d2b691a-e6a1-4349-bdd6-e79494207fac%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Dillon Sadofsky]

Thanks for the info, setting the baseline value arbitrarily high might work, I've never messed with that.

As for multiple axes, I suppose that work work, in combination with doing a vAxis.direction of -1, but again, that flips the areas as well as the values (so 0 is above 2) meaning I'd have to do some pre-computation (not impossible) to 'reverse' the data before rendering to put my higher values 'above' the lower values.  And if I did that, if the user hovered over the axes to see the 'value' of the threshold, it'd show something weird.

As for the performance, I believe I'm already disabling legend entries for all thresholds (I'll have to check) since its the scatter data I really want to highlight.  I do currently color each line differently (red for bad, yellow for marginal, etc), so I'm not sure I could still do that if I used a single series separated by NULLs.  I know you can specify different point colors per point (I think?) but not sure if that would affect line color (and area color for area charts).  I bet that would be faster though.  Maybe I could at least group all red/yellow/etc lines into their own series so that there is fewer and could share a color.

I'm not very familiar with what turning off interaction does, I'll have to investigate that and see if that helps.

Thanks for the info.  If this doesn't solve it for me, I'll add more specific info as well as possibly a JS fiddle with one of the 'slow' graphs so you could give some insight into improvements.

On Wednesday, February 8, 2017 at 10:06:10 AM UTC-6, Daniel LaLiberte wrote:

You can target each series (data column) to a different vertical axis, and there are more than 2 vertical axes.  0 is the left, 1 is the right, and everything else is on the right also, but currently overlaid in the same place as axis 1, so it is best to turn off the display of additional axes.  You'll need to set the viewWindow min and max of each axis to align values as you want.

Actually, there is another way to 'flip' how the area and column charts draw their areas.  The always draw relative to the baseline value, which defaults to 0.  So if you set your baseline to the top of the chart, the areas will be above the data values.  You can set a different baseline value for each axis, though this really needs to be a per series option.

Concerning the performance, more series add more legend items, but that should not be a significant overhead.  There is much more overhead in trying to support interaction with each series, so if you turn off interaction, it may work better.  Other than that, I am not sure what might be happening, and we'd have to investigate to find out.   You might be able to avoid using separate series, however, if you just add null values to break up the lines (and disable interpolateNulls).  If you want different colors for each, you can use the 'style' role to give each line its own color.

On Wed, Feb 8, 2017 at 10:32 AM, Dillon Sadofsky <dillons...@gmail.com> wrote:

I've been using combo charts for awhile to render scatter graphs of measured data, with line charts to represent user defined 'thresholds' (above which, the points are red flags).  Rendering lines like this works, but the user can only hover over the end points to see its numeric value.

I like how the stepped area chart allows hovering over an entire section, and would like to use this instead.  However, I do not see an option to make the area in question be 'above' the numeric values given.  I could set options.vAxis.direction to -1, and although this flips the area, it also flips the numeric values of the y axis (and I need this on a combo chart with a normal scatter chart where up is higher y values).

So I'm curious if there is an easy way to make the stepped area chart go above the line instead of below.  Considering the framework can flip the entire graph, I'd think this would be relatively easy.  Alternatively, is there an easy option for lines where the user can mouse over any point in the line and see its 'value'?

Also, somewhat unrelated, but I had a set of data that was accidentally graphed where there were >400 thresholds (creating 400 very simple horizontal lines as separate series).  When I render this in chrome, memory consumption grows and grows until chrome eventually kills the process.  I'm surprised by this because 400 data points is very easy to graph.  Is there a reason that 400 series each with 2 data points and a line between should be non-performant?  Is there a better solution to prevent this, or do I simply need to add a limit to what I query from our database before rendering?

Thank you for your time.

--
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/3d2b691a-e6a1-4349-bdd6-e79494207fac%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

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