Google chart clearChart() with vue-google-charts

Question

i use vue-google-charts to draw several charts on my website. I would like that the user has the option to compare several data with each other. For this the user can add / delete data from the graph.

To realize this I would like to clear the chart and draw the chart with the new data. But I don't know how to clear my chart since I dont have a reference or anything else that describes my chart(s). I implement the Charts directly in the with GChart. How do I use clearCharts() with vue-google-charts?

<template>
  <v-card outlined tile class="text-left px-3 py-3 mx-5 text-h6">
    TEST
    <GChart type="ColumnChart" :data="chartDataTest" :options="chartOptionsTest"/>
  </v-card>
</template>

As far as I could read on the Google Charts website I need to reference to a chart (e.g. chart.clearChart()) to set the chart back but I dont have such a reference.

Thanks an best regards, Christian

score 1 · Accepted Answer · answered Nov 17 '20 at 22:57

use the @ready attribute to get a reference to the chart on the first draw...

<GChart
  type="ColumnChart"
  @ready="onChartReady"
/>

export default {
  methods: {
    onChartReady (chart, google) {
      const query = new google.visualization.Query('https://url-to-spreadsheet...')
      query.send(response => {
        const options = {
          // some custom options
        }
        const data = response.getDataTable()
        chart.draw(data, options)
      })
    }
  }
}

see --> use ready for something very custom

Google chart clearChart() with vue-google-charts

1 Answers1