Adding labels to google scatter 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!