CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationbar-chart
user3901149
user3901149

Reputation: 15

How to show percentage in google BarChart?

How to get the total number and percentage in google charts? I just want to get the percent and the number in the google charts, are there options that need to be set?

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

function drawBasic() {
	var data = google.visualization.arrayToDataTable([
		['City', '2010 Population',],
		['New York City, NY', 8175000],
		['Los Angeles, CA', 3792000],
		['Chicago, IL', 2695000],
		['Houston, TX', 2099000],
		['Philadelphia, PA', 1526000]
	]);
	var options = {
		title: 'Population of Largest U.S. Cities',
		chartArea: {width: '50%'},
	};
	var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
	chart.draw(data, options);
}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

Sample output below:

Sample Graph

Upvotes: 1

Views: 6822

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

use the group method to find the total 

var groupData = google.visualization.data.group(
  data,
  [{column: 0, modifier: function () {return 'total'}, type:'string'}],
  [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
);

and a DataView to add an 'annotation' column

see following working snippet... 

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population',],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000]
  ]);

  var groupData = google.visualization.data.group(
    data,
    [{column: 0, modifier: function () {return 'total'}, type:'string'}],
    [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
  );

  var formatPercent = new google.visualization.NumberFormat({
    pattern: '#,##0.0%'
  });

  var formatShort = new google.visualization.NumberFormat({
    pattern: 'short'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      var amount =  formatShort.formatValue(dt.getValue(row, 1));
      var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
      return amount + ' (' + percent + ')';
    },
    type: 'string',
    role: 'annotation'
  }]);

  var options = {
    annotations: {
      alwaysOutside: true
    },
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
  };
  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions