Google charts annotation not showing

Question

I am using the google charts api to display data from php. I am displaying this information in a material style bar chart (vertical).

I am trying to add annotations to show the values inside the bars however it isn't working.

JavaScript:

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawLastPackets);

function drawLastPackets() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Days');
    data.addColumn('number', 'Packets Packed');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addRows(<?php echo json_encode($chartLastPackets); ?>);

    var toAdd = ["Day", "Packets Packed", {"role": "annotation"}];

    var options = {
        legend: {
            position: 'none',
        },
        series: {
            0: {color: '#d7a8a8'}
        },
        vAxis: {
            title: 'Packets'
        }
    };

    var chart = new google.charts.Bar(document.getElementById('lastPackets'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

The contents of the php array $chartLastPackets is:

[["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]

However all I can see is the chart itself without the annotation.

WhiteHat WhiteHat · Accepted Answer · 2016-10-14T12:41:42

annotations.* are listed among the several options that don't work on Material charts

you can use the following option, to get the chart close to the look & feel of Material

theme: 'material'

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Days');
    data.addColumn('number', 'Packets Packed');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addRows([["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]);

    var options = {
        legend: {
            position: 'none',
        },
        series: {
            0: {color: '#d7a8a8'}
        },
        theme: 'material',
        vAxis: {
            title: 'Packets'
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('lastPackets'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="lastPackets"></div>

Google charts annotation not showing

1 Answers