Adding labels to google scatter charts - charts

Question

I am using google charts API to draw scatter, is there a way to label each node in the scatter diagram. I guess it only uses the numeric values.....Any other tools I can use instead.
Example:
Name Age Response
Allen 12 40
Tom 16 45
Sim 17 60
X and y axis will be age and response respectively, but each node on the graph can I label as Allen, Tom, Sim

Answer 1

I was having same issue to plot labels for points on chart itself.
Google chart have solved this problem now. You can add one more property as annotation. By which you can add labels.
See how it looks like. Generally I do annotation in number and then explain what those number are about.
var data = google.visualization.arrayToDataTable([
['Age', 'Weight', {role: 'annotation'}],
[ 8, 12, 'Point 1'],
[ 1, 5.5, 'Point 2'],
[ 11, 14, 'Point 3'],
[ 4, 5, 'Point 4'],
[ 3, 3.5, 'Point 5'],
[ 6.5, 7, 'Point 6']
]);

Answer 2

You can label the points in a Google ScatterChart by adding a tooltip. Tooltips show up when you mouseover a data point.
The code for your data table should look something like this:
var dt = new google.visualization.DataTable(
{
cols: [{id: 'A', label: 'Age', type: 'number'},
{id: 'B', label: 'Response', type: 'number'},
{id: 'C', label: 'Name', type:'tooltip', p:{role:'tooltip'}}
],
rows: [{c:[{v: 12}, {v: 40}, {v:'Allen'}]},
{c:[{v: 16}, {v: 45}, {v:'Tom'}]},
{c:[{v: 17}, {v: 60}, {v:'Sim'}]}
]
},
0.6
)
When you mouseover the points, the name will show up.
Link to Tooltips:
https://developers.google.com/chart/interactive/docs/roles#tooltiprole
Link to DataTable class (for formatting data):
https://developers.google.com/chart/interactive/docs/reference#DataTable
NOTE: if you're trying to plot multiple data series, you have to specify a tooltip for each one. For example, if you add a separate data series for Average Response, the code would change to:
var dt = new google.visualization.DataTable(
{
cols: [{id: 'A', label: 'Age', type: 'number'},
{id: 'B', label: 'Response', type: 'number'},
{id: 'C', label: 'Name', type:'tooltip', p:{role:'tooltip'}},
{id: 'D', label: 'AvgResp', type: 'number'},
{id: 'E', label: 'Category', type:'tooltip', p:{role:'tooltip'}}
],
rows: [{c:[{v: 12}, {v: 40}, {v:'Allen'}, {v:null}, {v:null}]},
{c:[{v: 16}, {v: 45}, {v:'Tom'}, {v:null}, {v:null}]},
{c:[{v: 17}, {v: 60}, {v:'Sim'}, {v:null}, {v:null}]},
{c:[{v: 12}, {v: null}, {v:null}, {v: 35}, {v:'Avg. 12yo'}]},
{c:[{v: 16}, {v: null}, {v:null}, {v: 48}, {v:'Avg. 16yo'}]},
{c:[{v: 17}, {v: null}, {v:null}, {v: 52}, {v:'Avg. 17yo'}]}
]
},
0.6
)

Answer 3

To do it using the visualization API, just use a cell_object (https://google-developers.appspot.com/chart/interactive/docs/reference#cell_object). The google API playground was useful for me, might be for you: https://code.google.com/apis/ajax/playground
Here's an example of some code:
var data = google.visualization.arrayToDataTable([
['Age','Response'],
[ {v:12, f: 'Allen'}, 40],
[ {v:16, f: 'Tom'}, 45],
[ {v:17, f: 'Sim'}, 60]
]);
Hope that helps!

Answer 4

https://developers.google.com/chart/image/docs/gallery/scatter_charts#chart_types
This page documents coloring the plots and adding a legend.
With Google charts you can't, short of using the legend and cross referencing. I don't know of any scatter chart creator that will label the individual plots.