CODEWITHSUNDEEP
google-visualizationbar-chartstacked-chart
mpsbhat
mpsbhat

Reputation: 2773

google visualization bar chart stacking two bars

I have a google visualization bar chart sample here where the data format is as given below.

 var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

How to make expenses and profits bar stacked where as sales is a separate bar?

Upvotes: 0

Views: 519

Answers (1)

RH7
RH7

Reputation: 223

At the moment the Google Charts API doesn't have this in built feature, but with some remodeling of the DataTable and Chart Options you can still achieve this.

My Solution

The Stacked Bar should contain values of only Expenses and Profit, to avoid a Stacked bar with Sales the value in the data column for Sales is represented as zero. A separate Sales bar is created by having a similar data row, but with the value of Sales present, and the rest zero. The Date data type needs to be specified in order to group all bar charts with the same date, if this isn't implemented, then there will be a gap between each bar chart with the same year. More information on Date representation of Columns is available here.

var data = google.visualization.arrayToDataTable([
    [ {label: 'Year', id: 'year', type: 'date'},
      {label: 'Sales', id: 'Sales', type: 'number'}, 
      {label: 'Expenses', id: 'Expenses', type: 'number'},
      {label: 'Profit', id: 'Profit', type: 'number'}],
      [{v:new Date('2014'), f:'2014'}, 0, 400, 200],
      [{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
      [{v:new Date('2015'), f:'2015'}, 0, 460, 250],
      [{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
      [{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
      [{v:new Date('2016'), f:'2016'}, 600, 0, 0],
      [{v:new Date('2017'), f:'2017'}, 0, 540, 350],
      [{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
    ]);

To achieve the stacked bar, the google charts configuration option isStacked: true is used. To avoid the vertical axis acting like a timeline with months and days, the vertical axis is formatted to display the Year using vAxis: {format: 'yyyy'}. More information on formatting is available here. To avoid spacing between different Year Bars, the feature bar: {groupWidth: '90%'} is used.

var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal', // Required for Material Bar Charts.
      hAxis: {format: 'decimal'},
      vAxis: {
        format: 'yyyy'
      },
      height: 400,
      colors: ['#1b9e77', '#d95f02', '#7570b3'],
      isStacked: true,
      bar: {groupWidth: '90%'}
    };

Upvotes: 1

Related Questions