CODEWITHSUNDEEP
google-visualization
Alex
Alex

Reputation: 7833

merge total of Stacked Bar Chart

I have two unsigned integers per bar: X and Y.
X is always less than Y because it is a subset of it.

I want to combine these two values into a single bar. However, the Stacking Bar Chart adds up the values instead of "overlapping" them.

This is what isStacked: true results in:
XXXYYYYY (3x + 5y, Axis goes up to 8)

And here is what my goal is:
XXXYY (3x within 5y, Axis goes up to 5)

How can I "merge" the values into one bar that is based on Y only and thus doesn't impact the axis' maximum value?

Upvotes: 4

Views: 728

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

the data will need to be adjusted, setting chart options won't get it.

you could create a view, add a calculated column, and exclude the original Y...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'X', 'Y'],
    ['2016', 3, 5]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (data, row) {
      return {
        v: data.getValue(row, 2) - data.getValue(row, 1),
        f: data.getValue(row, 2).toString()
      };
    },
    type: 'number',
    label: 'Y'
  }]);

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(view, {isStacked: true});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions