在运行时将Google Chart容器更改为另一个

Question

Like in this answer:

how to clone and re draw google chart in another div?

However, I don't want to clone the chart itself, but move him to another div in runtime.

Answer 1

here are some options...

1) if using the ChartWrapper class,
simply use setContainerId to change the div id
then redraw the chart

see following working snippet...

 google.charts.load('current', { callback: drawChart, packages: ['controls', 'corechart'] }); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'y'); data.addRows([ [0, 0], [3, 3], [6, 6] ]); var chartWrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart-left', dataTable: data, options: { backgroundColor: 'transparent', theme: 'maximized' } }); chartWrapper.draw(); document.getElementById('switch').addEventListener('click', function () { var containerId = (chartWrapper.getContainerId() === 'chart-left') ? 'chart-right' : 'chart-left'; chartWrapper.setContainerId(containerId); chartWrapper.draw(); }, false); } 

 .chart { display: inline-block; height: 160px; width: 160px; vertical-align: top; } .chart:first-child { background: cyan; } .chart:last-child { background: yellow; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div> <input id="switch" type="button" value="Switch"/> </div> <div> <div class="chart" id="chart-left"></div> <div class="chart" id="chart-right"></div> </div> 

---

2) if using a standard chart class, such as LineChart ,
you will need to re-create the chart using the new container,
then draw

you will have to clear the previous chart
you can use chart method --> clearChart
or simply clear the div --> div.innerHTML = ''

see following working snippet...

 google.charts.load('current', { callback: drawChart, packages: ['controls', 'corechart'] }); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'y'); data.addRows([ [0, 0], [3, 3], [6, 6] ]); var container = ''; document.getElementById('switch').addEventListener('click', drawChart, false); drawChart(); function drawChart() { if (container !== '') { document.getElementById(container).innerHTML = ''; } container = (container === 'chart-left') ? 'chart-right' : 'chart-left'; var chart = new google.visualization.ComboChart( document.getElementById(container) ); chart.draw(data, { backgroundColor: 'transparent', theme: 'maximized' }); } } 

 .chart { display: inline-block; height: 160px; width: 160px; vertical-align: top; } .chart:first-child { background: cyan; } .chart:last-child { background: yellow; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div> <input id="switch" type="button" value="Switch"/> </div> <div> <div class="chart" id="chart-left"></div> <div class="chart" id="chart-right"></div> </div> 

---

3) you could also use static method --> google.visualization.drawChart

see following working snippet...

 google.charts.load('current', { callback: drawChart, packages: ['controls', 'corechart'] }); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'y'); data.addRows([ [0, 0], [3, 3], [6, 6] ]); var container = ''; document.getElementById('switch').addEventListener('click', drawChart, false); drawChart(); function drawChart() { if (container !== '') { document.getElementById(container).innerHTML = ''; } container = (container === 'chart-left') ? 'chart-right' : 'chart-left'; google.visualization.drawChart({ containerId: container, dataTable: data, chartType: 'LineChart', options: { backgroundColor: 'transparent', theme: 'maximized' } }); } } 

 .chart { display: inline-block; height: 160px; width: 160px; vertical-align: top; } .chart:first-child { background: cyan; } .chart:last-child { background: yellow; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div> <input id="switch" type="button" value="Switch"/> </div> <div> <div class="chart" id="chart-left"></div> <div class="chart" id="chart-right"></div> </div>