CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
I am the Most Stupid Person
I am the Most Stupid Person

Reputation: 3575

Google Graphs One value for Y -axis (Stacked columns for Two charts)

Full code

You can use jsfiddle too testing.

google.load('visualization', '1.1', {
    'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 500, 1200, 816, 200],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 200, 578],
        ['2004', 197, 536, 613, 500]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },

        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

The Output

enter image description here

The Question

I use Google Visualization to generate above chart.

If you see the above screenshot you can see that Y- axis of above chart has two values in left side and right side. Seems like it happens because graphs use two date range for left side and right side bar.

I wanted to remove right side Y axis or print the same values for both right and left Y axis. I mean all data should be under the Y - axis which is on left side. What can I do to do it?

Upvotes: 1

Views: 956

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the options for series.n.targetAxisIndex create the second axis
removing these options will allow all series to default to the first axis

however, in Material bar charts, moving a series to a different axis,
separates the series into multiple stacks, resulting in blue and red bars
removing the options mentioned above will combine all series into one blue stack

in order to keep the stacks separated in two colors,
series.n.targetAxisIndex must be used and dual axis' will be displayed

to keep the two axis' in sync, use option --> vAxis.viewWindow
this will set an identical range for both axis' 

vAxis: {
  viewWindow: {
    min: 0,
    max: 1800
  }
}

see following working snippet... 

google.charts.load('current', {
  packages: ['bar']
}).then(drawStuff);

function drawStuff() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Nescafe Instant');
  data.addColumn('number', 'Folgers Instant');
  data.addColumn('number', 'Nescafe Beans');
  data.addColumn('number', 'Folgers Beans');
  data.addRows([
    ['2001', 500, 1200, 816, 200],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 200, 578],
    ['2004', 197, 536, 613, 500]
  ]);

  var options = {
    isStacked: true,
    width: 800,
    height: 600,
    chart: {
      title: 'Year-by-year coffee consumption',
      subtitle: 'This data is not real'
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      }
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 1800
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

note: jsapi should no longer be used to load the charts library,
according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.

this will only change the load statement, see above snippet...

Upvotes: 1

Related Questions