[Vuejs]-VueJS – How to display Charts with button clicks and initially how to display the chart1 during page load in vue-chartjs

by

0👍

There are quite a few ways to go about this, I’ll explain a simple one:

Using a variable and v-if to toggle the charts visibility*:

    <div class="chart-container" v-if="selectedChart > ''">
      <charts-line :height="250"  :data="datacoll" :options="options"></charts-line>
    </div>

*) technically it does not toggle it’s visibility, it toggles its existence. v-show toggles visibility. v-if decides if the node will be added to DOM (and creating all its children, etc).

This will ensure that only one chart is rendered when selectedChart has a value. On Button click you should hide the currently displayed chart (maybe show a loading message), then you load the requested data. Once the data is loaded you set the this.selectedChart to the appropriate chart.

example:

change (id) {
      this.selectedChart = null; // Makes the current displayed chart `disappear`

      this.$http.get(`/apidata/real/${ id}`)
        .then(res => {
          this.date = res.date
          this.challenge = res.challenge
          this.data = this.date.map((date, index) => ({
            x: new Date(date * 1000),
            y: this.challenge[index]
          }))
          this.filldata(this.data)
          this.selectedChart = id;
        })

    },

Dont forget to add selectedChart: null to the data function.

Leave a comment