How to create a filter category in bar chart using vue-google-charts wrapper in Vue.js.
I have created stacked bar chart and i want to add filter by label inside legend.
Here my vue app
https://codesandbox.io/embed/vue-dashboard-chart-6lvx4?fontsize=14&hidenavigation=1&theme=dark
How is it done using Vue-google-charts wrapper ?
Thanks an best regards, Dede
You can filter chart data with chartEvents :
Vue.component("gchart", VueGoogleCharts.GChart);
new Vue({
el: '#demo',
data() {
return {
chartData: [
['Month', 'New', 'Verified', 'Regitered ID', 'On Playing', 'Finished', 'Active', 'Inactive'],
['January', 7, 4, 18, 15, 9, 10, 0],
['February', 16, 22, 23, 30, 16, 9, 8],
['March', 10, 2, 20, 13, 14, 21, 18]
],
chartOptions: {
chart: {
title: "Player Performance"
},
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
},
chartEvents: {
'click': (e) => {
const numberPattern = /\d+/g;
const idx = Number(e.targetID.match(numberPattern)[0])
this.isFiltered ? this.allData() : this.filterChart(idx)
}
},
newData: [],
isFiltered: false
};
},
methods: {
filterChart(idx) {
this.allData()
for(let i = 0; i < this.newData.length; i++) {
this.newData[i] = [this.newData[i][0], this.newData[i][idx + 1]]
}
this.isFiltered = true
},
allData() {
this.newData = [...this.chartData]
this.isFiltered = false
},
},
mounted(){
this.allData()
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-google-charts@0.3.2/dist/vue-google-charts.browser.js"></script>
<div id="demo">
<div id="app">
<GChart type="ColumnChart" :data="newData" :options="chartOptions" :events="chartEvents" />
</div>
</div>