Google Visualization Toggle Multiple Charts in Div Table

Question

I've searched and only see examples of multiple Google Charts being created through one "drawChart" function with the setOnLoadCallback(drawChart). I'm trying to draw six new charts in one function to overwrite the charts in the existing div tags. When I call my "drawChart2()" function, the page refreshes with the existing charts from the first function. Each chart contains a different dataset and what I'm trying to achieve is basically toggling the entire dashboard content with a menu button. Should I be using a ChartWrapper instead?

Thanks for any guidance!

Answer 1

Maybe u should use a ChartWrapper. I got an Example for u where u can switch between datasets. U can also switch between Chart-Types.

JSFiddle Example

google.load('visualization', '1.0', {'packages': ['corechart']});
google.setOnLoadCallback(initialize);

function initialize() {

 var chart = new google.visualization.ChartWrapper({
     containerId: 'chart-div'
 });

 var data = google.visualization.arrayToDataTable([
            ['Month', 'Value1', 'Value2'],
            ['Jan 2016', 1000, 500],
            ['Feb 2016', 1200, 600],
            ['March 2016', 1300, 650],
            ['April 2016', 800, 400]
        ]);

var data2 = google.visualization.arrayToDataTable([
            ['Month', 'Value1', 'Value2'],
            ['Jan 2015', 2000, 120],
            ['Feb 2015', 2500, 800],
            ['March 2015', 560, 200],
            ['April 2015', 700, 500]
        ]);

 var options = 
    {
        title: 'Product Rating',
        colors: ['#00d819', '#ff0000'],
        vAxis: {minValue: 0},

        animation: {
         duration: 1000,
         easing: 'out'
        }
    };

 var button1 = document.getElementById('b1');
 var button2 = document.getElementById('b2');
 var button3 = document.getElementById('b3');
 var button4 = document.getElementById('b4');



 function drawChart1() {
     chart.setChartType('AreaChart');
        chart.setDataTable(data);
        chart.setOptions(options);
        chart.draw();
 }

 function drawChart2() {
     chart.setChartType('AreaChart');
        chart.setDataTable(data2);
        chart.setOptions(options);
        chart.draw();
 }

 function drawChart3() {
  chart.setChartType('LineChart');
        chart.setDataTable(data);
        chart.setOptions(options);
        chart.draw();
 }

 function drawChart4() {
  chart.setChartType('ColumnChart');
        chart.setDataTable(data2);
        chart.setOptions(options);
        chart.draw();
 }

 button1.onclick = function () {
     drawChart1();
 }

 button2.onclick = function () {
     drawChart2();
 }

 button3.onclick = function () {
     drawChart3();
 }

 button4.onclick = function () {
     drawChart4();
 }

 drawChart1();
}