Question

I’m using a scatter chart to display data with the following range: x = [-1..1] y = [-1..1]. Is it possible to draw a horizontal line on e.g. y = 0.5?
I’m using the JavaScript charts (i.e. not the image charts).

Answer 1

We had the same problem at work. Unfortunately, for the moment Google Charts does not provide an easy way to display a line in the scatter chart, like in the bar chart.

Finally we found a “small trick” that works perfectly for us, as you can see here:
http://csgid.org/csgid/statistics/structures

The trick consist in creating a “Line chart” but setting the linewidth property to 0 and pointsize to 5 in the series of the points, and linewidth 1 and pointsize 0 in the serie of the line.
It looks like:

interpolateNulls: true,
        series: {
          0: { lineWidth: 0, pointSize: 5 },
          1: { lineWidth: 0, pointSize: 5 },
          2: { lineWidth: 0, pointSize: 5 },
          3: { lineWidth: 0, pointSize: 5 },   
          4: { lineWidth: 1, pointSize: 0 }
        }

Why did I set interpolateNulls to true? Because then, I had to change the way I was setting the data in the array before convert it to JSON and pass it to Google Charts. In every row I had to set the values of every serie in the X axis for each value of the Y axis. So I had to set to null the X value when a serie didn’t have a Y value for that X value (I mean, when a serie didn’t have any point for that X value). So, the same for the serie of the line.
This would be one point of the first serie (in JSON):

[2.6,0.184,null,null,null,null]

And this one “point” of the line serie (the last serie):

[4,null,null,null,null,0.254]

Maybe it is not the most efficient way, but it works 🙂

I hope I have explained it clear, let me know if you have more questions.