javascript - Change Google Chart container to another during runtime -

like in answer:

how clone , re draw google chart in div?

however, don't want clone chart itself, move him div in runtime.

here options...

1) if using chartwrapper class,
use setcontainerid change div id
redraw 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 standard chart class, such linechart,
need re-create chart using new container,
draw

you have clear previous chart
can use chart method --> clearchart
or clear 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) 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>