Line plot + connected points (similar to a regression plot)

[Helios]

Hi alll, I would like to produce a plot like this:

https://imageshack.us/a/img851/1310/plotres.jpg

I already tried a couple of approaches, but the best I could think of is to store (apart from the x coordinate) two y coordinates, one for the continuous line and one for the points.  But I can't see how I can connect the two points with a line.

What would you suggest?

[asgallant]

This will be difficult, but possible to replicate.  You are basically right with your data structure, but you have to do some weird tricks to make it work.

Each data point with one of your lines hanging up or down needs 3 rows in the DataTable.  The first row contains [x, point value, line value]; the second contains [x, line value, line value]; and the third contains [x, null, line value].  When you do that, you get a chart that looks like this: http://jsfiddle.net/asgallant/6r8MC/1/

[Davide]

Thanks a lot! I was able to produce the graph i was looking for.. but it have some strange results with smoothing! ( http://jsfiddle.net/6r8MC/2/ )

Ideally I would like the red line to be smoothed, in some way. But maybe the Google Chart API is not the right tool? Maybe I should look more into the D3.js kind of stuff?

Thanks again

2013/3/16 asgallant <drew_g...@abtassoc.com>

--
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/VgEiFsalWzA/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 issue here is twofold:

1) In the line, there are 3 consecutive, identical (x, y) pairs at every point, so a best-fit curve produces straight lines like you see.

2) The typical way to fix this would be to null out two of the points and set the "interpolateNulls" option to true, but this causes the other series to draw lines where you don't want them.

With some creative rearrangement, we can make this work: http://jsfiddle.net/asgallant/6r8MC/3/.  The key here is to separate out the line series from the point series.

It occurs to me, however, that there may be a simpler solution, depending on what these extra lines represent.  Would something like this work for you?

On Sunday, March 17, 2013 8:58:55 AM UTC-4, Helios wrote:

Thanks a lot! I was able to produce the graph i was looking for.. but it have some strange results with smoothing! ( http://jsfiddle.net/6r8MC/2/ )

Ideally I would like the red line to be smoothed, in some way. But maybe the Google Chart API is not the right tool? Maybe I should look more into the D3.js kind of stuff?

Thanks again

2013/3/16 asgallant <drew_g...@abtassoc.com>

This will be difficult, but possible to replicate.  You are basically right with your data structure, but you have to do some weird tricks to make it work.

Each data point with one of your lines hanging up or down needs 3 rows in the DataTable.  The first row contains [x, point value, line value]; the second contains [x, line value, line value]; and the third contains [x, null, line value].  When you do that, you get a chart that looks like this: http://jsfiddle.net/asgallant/6r8MC/1/

On Saturday, March 16, 2013 11:46:32 AM UTC-4, Helios wrote:

Hi alll, I would like to produce a plot like this:

https://imageshack.us/a/img851/1310/plotres.jpg

I already tried a couple of approaches, but the best I could think of is to store (apart from the x coordinate) two y coordinates, one for the continuous line and one for the points.  But I can't see how I can connect the two points with a line.

What would you suggest?

--
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/VgEiFsalWzA/unsubscribe?hl=en.

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

[Davide]

Thanks, it looks much better already. 

But you are right, maybe it's better if I explain what this data represents and what I have to plot.

• The points represents measurements
  
• The continuous line represents the trend, which is calculated with a simple formula: for the point x_i we have  
  t_i = t_{i-1} + [(x_i-t_{i-1})/10] (where [y] denotes the nearest integer to y)
  

So the trend is basically some sort of approximation of the points if you will.. but I want it to look a little better than straight lines (my goal is this: https://lh5.ggpht.com/EngXiQ-nWdjW2TnawAQKDPr_khndiMrqnZwTRhImmEGgZ1x4Htla71fakeA40emt4EU ).

So, that's the reason why I didn't think interval would work for me (I had stumbled upon that solution), they are not exactly error bars; but I agree that maybe putting one of the extreme values of the interval as the trend value (depending if it's above or below) and the other one to the point value, it would produce a somewhat of a neat result.

Thanks for your help.

2013/3/17 asgallant <drew_g...@abtassoc.com>

[asgallant]

To get the points to show for your data points and not on the line or at the other end of the trail (for lack of a better word to call it), you need to introduce one more level of hackery, which adds another series to the mix that consists of your data points only.  Here's an example: http://jsfiddle.net/asgallant/6r8MC/4/