CODEWITHSUNDEEP
google-visualization
jmac
jmac

Reputation: 7128

Displaying Static Tooltips in v1.31

The most recent update of the Google Visualization API has the following in the release notes:

Now possible to show persistent values next to bars, columns, points, etc.

I assume this means you can have labels on the charts (finally!) without any interaction.

How do you actually do it? There is nothing in the documentation yet. I checked the google group page but didn't see any examples or pointers on how to do it either.

Upvotes: 1

Views: 1306

Answers (2)

asgallant
asgallant

Reputation: 26340

The release notes are referring to support for annotations for BarCharts and ColumnCharts (and a handful of other charts that did not support them previously). Here's an example:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn({type: 'string', role: 'annotation'});

    data.addRows([
        ['Foo', 53, 'Foo text'],
        ['Bar', 71, 'Bar text'],
        ['Baz', 36, 'Baz text'],
        ['Cad', 42, 'Cad text'],
        ['Qud', 87, 'Qud text'],
        ['Pif', 64, 'Pif text']
    ]);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    chart.draw(data, {
        height: 400,
        width: 600,
        vAxis: {
            maxValue: 100
        }
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

jsfiddle: http://jsfiddle.net/asgallant/LrGp3/

Upvotes: 2

jmac
jmac

Reputation: 7128

Thanks to asgallant's answer I figured it out.

Using his code as a base, I changed the package from 1 to 1.31.

With google.load('visualization', '1', {packages: ['corechart', callback: drawChart}); this is what you get:

old

With google.load('visualization', '1.31', {packages: ['corechart', callback: drawChart}); this is what you get:

new

I assume there are probably other methods to move the annotations outside the bars or the like, but we'll have to wait for updated documentation.

Note: asgallant's code is missing the c in corechart so it won't render as-is

Upvotes: 0

Related Questions