Adding labels to google scatter charts

charts, google-visualization, scatter-plot

Solution

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
)

Problem

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

Original source