25

http://code.google.com/apis/chart/

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table, 
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

  // Create our data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'date');
  data.addColumn('number', 'Views');
  data.addColumn('number', 'People');
  data.addRows([
    <?php echo $analytics; ?>
  ]);
  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.AreaChart(document.getElementById('Analytics-Visualization'));
  chart.draw(data, {lineWidth:3, pointSize:8, width: 745, height: 240,chartArea:{left:20,top:20,width:640}});
}
</script>

lets say when we do this it does this enter image description here

to

enter image description here

maybe using the listener stuff ?

Toby Allen
  • 10,997
  • 11
  • 73
  • 124
Adam Ramadhan
  • 22,712
  • 28
  • 84
  • 124
  • There appears to be some details on doing this here http://code.google.com/apis/chart/interactive/docs/examples.html Scroll down to bottom of page. – Toby Allen Oct 30 '11 at 16:03
  • This answer does it very simple and easy ! https://stackoverflow.com/a/32862538/1164342 – Hayden Thring Dec 05 '17 at 19:44

2 Answers2

16

For custom tooltips, add the tooltip as an extra column:

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}
minaz
  • 5,690
  • 1
  • 32
  • 29
  • 3
    For those using PieCharts and getting confused as to why this is not working - it does not work with PieCharts for some reason. [Issue #507](https://code.google.com/p/google-visualization-api-issues/issues/detail?id=507) – Michal Oct 07 '13 at 19:46
  • Turns out the reason it does not work is because it is not supported, as claimed at the bottom of [the Tooltip description page](https://developers.google.com/chart/interactive/docs/customizing_tooltip_content) – Michal Oct 07 '13 at 19:53
  • 1
    A few years on it seems to be supported now as indicated on both the tooltip desc page and the issue page - see the last few entries: https://github.com/google/google-visualization-issues/issues/507#issuecomment-125237979 – wunth Mar 27 '17 at 20:14
3

@Adam; If you want to edit text then check this http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

you can change your code from here 

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task');
  data.addColumn('number', 'Hours per Day');
  data.addRows(5);
  data.setValue(0, 0, 'Work');
  data.setValue(0, 1, 11);
  data.setValue(1, 0, 'Eat');
  data.setValue(1, 1, 2);
  data.setValue(2, 0, 'Commute');
  data.setValue(2, 1, 2);
  data.setValue(3, 0, 'Watch TV');
  data.setValue(3, 1, 2);
  data.setValue(4, 0, 'Sleep');
  data.setValue(4, 1, 7);

and if you want your custom tooltip you have to use javascript for these

http://code.google.com/p/gvtooltip/

http://informationandvisualization.de/blog/tooltips-google-chart-api

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 1
    The Google Code link demo seems to not work quite right, the last link seems pretty good though. – Toby Allen Oct 13 '11 at 21:19
  • Yes, gvtooltip was do away with as Google Vizualizaion Chart now have one built-in. The built-in one is what you looking for from now on. – fletchsod Jan 24 '14 at 22:34