CODEWITHSUNDEEP
google-visualization
a_miguel6687
a_miguel6687

Reputation: 529

Google Chart Show Column Tooltips

I want to make my tooltip show both column titles

function drawChart() {
    var sample_data = document.getElementById('sample_data').value;
    var data2 = eval("["+sample_data+"]");
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Age');
    data.addColumn('number', 'Savings');
    data.addRows(data2);


    var options = {
        hAxis: {title: 'Age', minValue: 0,maxValue:105},
        vAxis: {title:'Savings',minValue:0,maxValue:2500000, format:'\u00A4 ,##0.00'},
        width: 960, height: 300,
        colors: ['#4a82bd'],
        legend:'none'


    };

    var formatter = new google.visualization.NumberFormat(
        {prefix: '$'});
    formatter.format(data, 1); // Apply formatter to second column

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



}

As you can see I have two columns and currently when I hover to my chart the only thing I see is the Savings title. How can I customize my tooltip to show both titles?

Upvotes: 0

Views: 2458

Answers (1)

asgallant
asgallant

Reputation: 26340

To add the other column name to the tooltip, you will need to use custom HTML tooltips, using the tooltip column role. You can have a DataView to build the tooltips for you automatically:

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
        // create a simple HTML tooltip
        var age = dt.getFormattedValue(row, 0);
        var savings = dt.getFormattedValue(row, 1);
        return '<div><b>Age:</b> ' + age + '<br /><b>Savings:</b> ' + savings + '</div'>';
    }
}]);

chart.draw(view, {
    // options
    tooltip: {
        isHtml: true
    }
});

Upvotes: 2

Related Questions