Google Charts - switch between table and chart view

Question

There was a similar question ( Google Charts: Switching between Line and Column charts ) about switching between line and columns charts, but it doesn't seem to work for tables.

I have a line chart that I want to change into table and back... the only way i see this happening is by redeclaring a table similar to...

function changeIntoTable() {
  var table = new   google.visualization.Table(document.getElementById('dashboard_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

function changeIntoChart() {
  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

  // Create a line chart, passing some options
  var lineChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_div',
    'options': {
        backgroundColor: { fill:'transparent' },
        'legend': 'right', 
        'pointSize': 5,
        crosshair: { trigger: 'both' }, // Display crosshairs on focus and selection.
        hAxis: {
            title: 'Time'
        },
        vAxis: {
            title: 'Value'
        }
    }
  });

  dashboard.bind(lineChart); 
  dashboard.draw(data);
}

So, i am wondering if there is a simpler solution?

Answer 1

What you have should work fine but...

You could take advantage of the ChartWrapper Class which can draw any chart type...

Here's an example, click the button to switch the chart...

 google.charts.load('current', { packages: ['corechart', 'table'], callback: initChart }); function initChart() { var button; var chart; var data; var showChart = 'Table'; data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); 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; showChart = (showChart === 'Table') ? 'LineChart' : 'Table'; drawChart(showChart); } function drawChart(chartType) { chart.setChartType(chartType); chart.setOptions(getOptions(chartType)); chart.draw(); } function getOptions(chartType) { var options; switch (chartType) { case 'LineChart': options = { backgroundColor: { fill:'transparent' }, legend: 'right', pointSize: 5, crosshair: { trigger: 'both' }, hAxis: { title: 'Time' }, vAxis: { title: 'Value' } }; break; case 'Table': options = { showRowNumber: true, width: '100%', height: '100%' }; break; default: options = {}; } return options; } } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> <input type="button" id="btnSwitch" />