Place values on google graph

2
votes

How can i place values on the 'google.visualization' graph ?

please see image attached.

graph example

var options = {
      width: 1024, height: 240,
      title: 'Clicks from Welcome email',
      vAxis: {title: 'email Clicks',  titleTextStyle: {color: 'black'}}
    };

this is the solution

data.addColumn({type:'number', role:'annotation'});

in the google graph its all about layers, so i added this layer, watch out that the type is the same type as in your rowData

var data = new google.visualization.DataTable();
data.addColumn('string', 'date'); data.addColumn('number', 'Remove'); data.addColumn({type:'number', role:'annotation'}); // annotation role col. data.addColumn('number', 'Add'); data.addColumn({type:'number', role:'annotation'}); // annotation role col. data.addRows([]);

2
phpjavascriptgoogle-apigoogle-visualization

2 Answers

1
votes

This type of functionality was recently introduced to gviz using DataTable roles: you can use extra columns of information in your datatable to create annotations and other types of functionality.

See the first example here for a guide to what I think you want: http://code.google.com/apis/chart/interactive/docs/roles.html#whatrolesavailable

-1
votes

You will have to set your data when calling the Chart API, like this:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
  ['2004', 1000, 400],
  ['2005', 1170, 460],
  ['2006',  860, 580],
  ['2007', 1030, 540]
]);

Then set your options with your code above and draw the chart:

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

It's all explained in the extensive documentation