Google charts, How do you display extra information in the speech bubble thing

Question

How do you attach more information to a google chart entry. I have the following for my line chart:

            data.addColumn('date', 'Date');   
            data.addColumn('number', 'a name');                 
            data.addColumn('number', 'a name 2');                 
            data.addColumn('number', 'a name 3');                 

            data.addRows( [
                [new Date( 2013,  7,  1 ),1.5,null,null],
                [new Date( 2013,  6,  28 ),-1.5,null,null],
                [new Date( 2013,  6,  21 ),null,-1,null],
                [new Date( 2013,  6,  15 ),null,0,2],
                [new Date( 2013,  6,  7 ),1.5,null,null],
                [new Date( 2013,  6,  5 ),-1,null,null],
               [new Date( 2013,  6,  1 ),0.5,2,null],
            ] );  

Where can I add that information so that it appears like this?

The google api makes such little sense to me!!! I have tried adding another column with tooltip but then how on earth do you add information per point. it's freaking weird!

Answer 1

Try this code to customize Tooltip content using html tags.

    data.addRows([
['2010', 600, customTooltip('$600K in our first year!')],
['2011', 1500, customTooltip('Sunspot activity made this our best year ever!')],
['2012', 800, customTooltip('$800K in 2012.')],
['2013', 1000, customTooltip('$1M in sales last year.')]
]);


function customTooltip(text) { 
    return '<div style="padding:5px 5px 5px 5px;">' +
'<table id="medals_layout">' + '<tr>' +
'<td><b>' + text + '</b></td>' + '</tr>' + '</table>' + '</div>';

}

Take a look at this jqfaq.com that has a working sample

Answer 2

What you need to do is to introduce at least one tooltip column. Each tooltip column applies to the series column immediately to its left, so if you were to insert a string column after your second column, and make its role 'tooltip', then you would have custom tooltips for the first series (from your screenshot, it looks like it's the blue series). You can have a tooltip column for each series, which is essentially how you get per-point tooltips. Here's a jsfiddle exemplifying the tooltip mechanics: http://jsfiddle.net/vD2pk/

function createData1() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});

    data.addRow([{v:1}, {v:2}, {v:'hi'}, {v:5}]);
    data.addRow([{v:2}, {v:1.5}, {v:null}, {v:10}]);
    data.addRow([{v:4}, {v:3}, {v:'nooo'}, {v:8}]);
    return data;
}

function createData2() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});

    data.addRow([{v:1}, {v:2}, {v:5}, {v:'hi'}]);
    data.addRow([{v:2}, {v:1.5}, {v:10}, {v:null}]);
    data.addRow([{v:4}, {v:3}, {v:8}, {v:'nooo'}]);
    return data;
}

function createData3() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});

    data.addRow([{v:1}, {v:2}, {v:'test'}, {v:5}, {v:'hi'}]);
    data.addRow([{v:2}, {v:1.5}, {v:'test2'}, {v:10}, {v:null}]);
    data.addRow([{v:4}, {v:3}, {v:null}, {v:8}, {v:'nooo'}]);
    return data;
}

function drawChart(divId, data) {
  var chart = new google.visualization.LineChart(
      document.getElementById(divId));
  chart.draw(data, {
    width: 556, height: 347
  });
}

function drawVisualization() {
  drawChart('visualization1', createData1());
  drawChart('visualization2', createData2());
  drawChart('visualization3', createData3());
}

In the fiddle, the first example has tooltips on the first series (blue). You'll note that the second point doesn't have a custom tooltip, which makes it default to the regular tooltips.

The second example has tooltips on the second series (red).

And finally, the third example has tooltips on both.

Hope this helps.