CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Jonathan Porter
Jonathan Porter

Reputation: 1556

How to add a total to a chart in google charts

I would like to add a total of the amounts to the chart below.

https://jsfiddle.net/porterhouse47/6e0ejxLb/

I created a function to sum the values and you can see that it's correct if you uncomment the alert. I tried adding a new row for the total as you can see at the bottom but it doesn't show.

// Load Charts and the corechart/bar char package.
google.charts.load('current', {
  packages: ['corechart']
});

// Draw the pie chart for the Total Costs when Charts is loaded.
google.charts.setOnLoadCallback(drawPieChart);

// Draw the pie
function drawPieChart() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Dollars'],
    ['Canada', 12250000],
    ['USA', 22750000]
  ]);

  function getSum(data, column) {
    var total = 0;
    for (i = 0; i < data.getNumberOfRows(); i++)
      total = total + data.getValue(i, column);
    return total;
  }

  //alert(getSum(data, 1));


  // In order to show currency correctly
  var formatter = new google.visualization.NumberFormat({
    negativeColor: 'red',
    negativeParens: true,
    pattern: '$###,###'
  });
  formatter.format(data, 1);

  var options = {
    title: "North America 2017",
    legend: {
      position: 'top'
    },
    pieSliceText: 'value-and-percentage',
    slices: {
      0: {
        color: '#328213'
      },
      1: {
        offset: 0.1,
        color: '#57a33a'
      },
    },
    pieStartAngle: 70,
    width: 400,
    height: 300
  };

  var chart = new google.visualization.PieChart(document.getElementById('total_costs_pie'));

  chart.draw(data, options);
  addRow('Total', getSum(data, 1));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">


</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
  </table>

Upvotes: 0

Views: 4957

Answers (1)

Nienormalny_
Nienormalny_

Reputation: 470

Hi i have maby solution for you:

HTML: 

</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="number"></td>
    </tr>
  </table>

JAVASCRIPT:

// Load Charts and the corechart/bar char package.
google.charts.load('current', {
  packages: ['corechart']
});

// Draw the pie chart for the Total Costs when Charts is loaded.
google.charts.setOnLoadCallback(drawPieChart);

// Draw the pie
function drawPieChart() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Dollars'],
    ['Canada', 12250000],
    ['USA', 22750000]
  ]);

  function getSum(data, column) {
    var total = 0;
    for (i = 0; i < data.getNumberOfRows(); i++)
      total = total + data.getValue(i, column);
    return total;
  }

  //alert(getSum(data, 1));


  // In order to show currency correctly
  var formatter = new google.visualization.NumberFormat({
    negativeColor: 'red',
    negativeParens: true,
    pattern: '$###,###'
  });
  formatter.format(data, 1);

  var options = {
    title: "North America 2017",
    legend: {
      position: 'top'
    },
    pieSliceText: 'value-and-percentage',
    slices: {
      0: {
        color: '#328213'
      },
      1: {
        offset: 0.1,
        color: '#57a33a'
      },
    },
    pieStartAngle: 70,
    width: 400,
    height: 300
  };

  var chart = new google.visualization.PieChart(document.getElementById('total_costs_pie'));

  chart.draw(data, options);
  //function for addRow.....
  function addRow (name, number) {
    //add name and number to .total
    total_name = document.createTextNode(name + number);
    total.appendChild(total_name);
  }
  addRow('Total: ', getSum(data, 1));
}

i added function for your addRow. And new tr and td to embed this atributes. I hope thats help you or give you path to do something like this ;)

Upvotes: 1

Related Questions