JavaScript code to dynamically switch between isStacked: true and isStacked: 'percent'

[Nevada Smith]

What JavaScript code is required to let a user dynamically switch a Stacked Bar Chart from

isStacked: true

to

isStacked: 'percent'

(and vice-versa) and having the Stacked Bar Chart automatically redraw itself with the new format?

My current options are:

var options = {
    height: 500,
    width: "100%",
    legend: { position: 'top', maxLines: 4 },
    bar:    { groupWidth: '50%' },
    isStacked: 'percent',
    title: 'Categories by Company'
};

I'm envisioning a UI component (e.g., button) with alternating text e.g., "Show as Percent" and "Show as Absolute".

[Ray Thomas]

This comes up every now and then such as https://stackoverflow.com/questions/21170147/google-charts-switching-between-line-and-column-charts and https://stackoverflow.com/questions/35380994/google-charts-switch-between-table-and-chart-view 

As you're only changing the value of isStacked you need only add an event handler to a button to change a variable then redraw the barchart. Here's the code to do what you want::

<script type="text/javascript">

   google.charts.load('current', {

  packages: ['corechart'],

  callback: initChart

});

function initChart() {

  var button;

  var chart;

  var data;

  var showChart = 'Show as Absolute';

      var data = google.visualization.arrayToDataTable([

        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',

         'Western', 'Literature', { role: 'annotation' } ],

        ['2010', 10, 24, 20, 32, 18, 5, ''],

        ['2020', 16, 22, 23, 30, 16, 9, ''],

        ['2030', 28, 19, 29, 30, 12, 13, '']

      ]);

chart = new google.visualization.ChartWrapper({

    containerId: 'chart_div',

    dataTable: data

  });

  button = document.getElementById('btnSwitch');

  button.addEventListener('click', switchChart, false);

  // draw initial chart

  switchChart();

  function switchChart() {

    button.value = showChart;

var barType;

    showChart = (showChart === 'Show as Absolute') ? 'Show as Percent' : 'Show as Absolute';

if (showChart.indexOf("Absolute") >-1){

barType = true;

}

else {

barType = "percent";

}

    drawChart(barType);

  }

  function drawChart(barType) {

     var options = {

        width: 600,

        height: 400,

        legend: { position: 'top', maxLines: 3 },

        isStacked: barType,

      };

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(data, options);

  }

}

  </script>

<input type="button" id="btnSwitch" />

<div id="chart_div"></div>

You should be able to see where to put your own options. There's a working example at http://brisray.com/test/nevada.htm

You can use almost any element to do things like this, a dropdown list for example.

[Nevada Smith]

Thank you for your thorough reply, Mr. Thomas!

You provided everything I needed to understand how this stuff interacts.