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
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)
})
}
}
}