javascriptvue.jschartsvuejs2gchart

Vue-google-chart How to add filter categori

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

Solution

  • 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>