update google chart with selected period parameter from v-select

Question

I am looking for a way to update the google bar type chart display by selecting the period value from v-select.

so far, Initially, my script loaded, call 'async created()' and get Data from REST API to MongoDB call module and store returned data in posts[]. and then finally save it to chart data array.

The data format is like this

Key	Type
Date (YYYY-MM-DD)	String
success_count	int
failure_count	int

what I wanna do is, each v-select values consist with {name, id} pair. Is there any way to pass selected 'selectedItem.id' to script's created(parameter) method or PostService.get_dashboard_Posts(parameter)'s parameter position? without refreshing the whole page?

below is my CSS code

<template>
<v-app
:style="{ background: $vuetify.theme.themes.light.background }"
style="max-height:100vw;"
>
<v-container style="min-height:100%;">
  <v-layout row class="ma-4">
    <v-app style="background-color:grey lighten-1:" class="rounded">
      <v-row>
        <v-col cols="12" md="12" class="ligne">
          <v-container>
            <v-row>
              <v-col cols="12" md="12">                    
                <h1 class="heading mb-2 grey--text">Dashboard </h1>
                <v-card>                                        
                <template>                    
                 <p class="error" v-if="error">{{error}}</p>
                 <div class = "posts-container">
                    <div class="post"
                      v-for="(post,index) in posts"
                      v-bind:item="post"
                      v-bind:index="index"
                      v-bind:key="post._id"
                    >
                    </div>
                  </div>
                  
                  <div id="app">
                    <v-col cols="12" md="12">
                      <v-row>
                        <v-col cols="12" md="9"><h3 class="subTitle">Number Of Transactions</h3></v-col>        
                        <v-col cols="12" md="3">
                            <v-select
                                :items="comboItem"
                                v-model="selectedItem"
                                item-text="name"
                                item-value="id"
                                label="Period"
                                single-line
                                dense       
                                v-on:change=""                           
                                return-object>
                            </v-select>
                        </v-col>           
                      </v-row>      
                      <GChart
                        type="ColumnChart"
                        :data="chartData"
                        :options="chartOptions"
                      />
                    </v-col>
                  </div>
                </template>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-col>            
      </v-row>
    </v-app>
  </v-layout>
</v-container>

below is my script code

<script>
// @ is an alias to /src
import PostService from "../PostService";
export default {
  name: "PostComponent",  
  data: () => ({
    posts:[],    
    comboItem:[
      {
        name: 'today',
        id: 1
      },
      {
        name: 'last week',
        id: 2
      },
      {
        name: 'last month',
        id: 3
      },
      {
        name: 'last year',
        id: 4
      },
    ],
    chartData: [
      ["date", "success", "failure"]
    ],
    chartOptions: {
      chart: {
        title: "Company performance",
        subtitle: "Sales,Expences,and Profit:2016-2019"
      },
      hAxis: {
        title: "date",
        textStyle: {
          fontSize:9
        }
      },
      vAxis: {
        title: "frequency",
        textStyle: {
          fontSize:15
        }
      },
      legend: { 
        position : 'top',
        alignment:'center'
      }
    }
  }),

  async created() {
    try {
      this.posts = await PostService.get_dashboard_Posts();

      for(var i=0;i<Object.keys(this.posts[0]).length;i++){        
        this.chartData.push([`${this.posts[0][i]._id.year}-${this.posts[0] 
[i]._id.month}-${this.posts[0][i]._id.day}`, this.posts[0][i]._id.success_count, this.posts[0] 
[i]._id.failure_count])
      }
    } catch (err) {
      this.error = err.message;
    }
  },
  components: {},
  computed: {
    theme() {
      return this.$vuetify.theme.dark ? "dark" : "light";
    }
  },
  methods:{
  }
};
</script>

score 0 · Answer 1 · answered Jan 08 '21 at 08:51

Yes that is possible,

Basically we need to be able to respond to changes to selectedItem. All the loading currently happens inside the created function, which we cannot run again, so step 1 would be to move or copy the body of the created function to a new method, which we may call load or something. Now we can respond to changed to selectedItem by calling load.

async created() {
    await this.load();
},
components: {},
computed: {
    theme() {
        return this.$vuetify.theme.dark ? "dark" : "light";
    }
},
methods: {
    async load() {
        try {
            this.posts = await PostService.get_dashboard_Posts();

            for (var i = 0; i < Object.keys(this.posts[0]).length; i++) {
                this.chartData.push([`${this.posts[0][i]._id.year}-${this.posts[0] 
[i]._id.month}-${this.posts[0][i]._id.day}`, this.posts[0][i]._id.success_count, this.posts[0]
                    [i]._id.failure_count
                ])
            }
        } catch (err) {
            this.error = err.message;
        }
    }
}

There are a few ways we can respond to changes, i'll show you a few:

We can define this behavior on the input element directly in the template:

<v-select
    v-model="selectedItem"
    ...
    v-on:change="load(selectedItem.id)"                           
    ...
    >
</v-select>

Another way to tell vue to respond to changes is by using watchers:

...
async created() {
    await this.load();
},
watch: {
   selectedItem(newValue) {
       this.load(newValue.id);

       // At the moment the watcher runs this.selectedItem is already 
       // the newValue (this.selectedItem === newValue) so we could also
       // do this:
       this.load(this.selectedItem.id);
   }
},
components: {},
...

The last thing that I haven't covered and leave up to you is to supply the selectedItem.id to PostService.get_dashboard_Posts

update google chart with selected period parameter from v-select

1 Answers1