CODEWITHSUNDEEP
google-visualization
zanzu
zanzu

Reputation: 782

Column data label on google bar chart

I am trying to add a column data label to a google bar chart.

I have followed the instructions given in the API docs, and this is what I get:

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Year', 'Searches'],
  ['1998', 9800],
  ['2000', 60000000],
  ['2007', 1200000000],
  ['2008', 1745000000],
  ['2009', 2610000000],
  ['2010', 3627000000],
  ['2011', 4717000000],
  ['2012', 5134000000],
  ['2013', 5922000000],
  ['2014', 5740000000]
]); 

var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
               { calc: "stringify",
                 sourceColumn: 1,
                 type: "string",
                 role: "annotation" }]);        

var options = {
  chart: {
    title: 'Google searches',
    subtitle: 'Average searches per day 1998-2014',
  }
};

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

chart.draw(view, options);
}

I must be doing something wrong as the chart fails to render any data labels.

What am I doing wrong?

https://jsfiddle.net/q9edfpte/1/

Upvotes: 1

Views: 2297

Answers (1)

zanzu
zanzu

Reputation: 782

I did a number of changes*, and this one ultimately worked.

*Changes: - 'packages':['bar'] --> 'packages':['corechart'] - google.charts.Bar --> google.visualization.ColumnChart

Working version (though needs beautifying):

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Searches'],
    ['1998', 9800],
    ['2000', 60000000],
    ['2007', 1200000000],
    ['2008', 1745000000],
    ['2009', 2610000000],
    ['2010', 3627000000],
    ['2011', 4717000000],
    ['2012', 5134000000],
    ['2013', 5922000000],
    ['2014', 5740000000]
  ]); 

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                 { calc: "stringify",
                   sourceColumn: 1,
                   type: "string",
                   role: "annotation" }]);        

  var options = {
      title: 'Google searches',
      subtitle: 'Average searches per day 1998-2014',
  };



  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
  chart.draw(view, options);
}

Upvotes: 1

Related Questions