Tuesday, June 4, 2013

Google Charts: One Tooltip show values for Entire Column and domain data role

I have a basic Area Chart using Google Charts. I am able to set up tooltips for each point on the graph, but is there a way to have a single tooltip for all the points in a column.

All you need to do is add the following to your options (in the case of a line chart):
focusTarget: 'category'

Easy as pie! For more details, see focusTarget in the Google Documentation
If you want something more complex, you can fiddle around with the domain Data Role
Here is a sample bit of code:


google.load('visualization', '1.1', {'packages':['corechart']});

google.setOnLoadCallback(drawChart_C6);

function drawChart_C6() {
    var data = new google.visualization.DataTable();
    data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter');
    data.addColumn('number', '2009 Sales');
    data.addColumn('number', '2009 Expenses');
    data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter');
    data.addColumn('number', '2008 Sales');
    data.addColumn('number', '2008 Expenses');
    data.addRows([
      ['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300],
      ['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400],
      ['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540],
      ['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_C6'));
    chart.draw(data, {width: 400, height: 240, legend:'right', focusTarget: 'category'});
}
 
 

http://stackoverflow.com/questions/15351243/google-charts-one-tooltip-for-entire-column

No comments:

Post a Comment