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

Question

I am trying to display charts with button clicks, i have used 3 buttons and i have also used 4 radio buttons just like the image shown below.

I am actually calling an API and fetching the data from there. I am trying to pass value in the function and then trying to use the same value in the button click.

Here is my code:

<template>
  <div id="Displaying charts through buttons">
    <div class="buttons" style="float:left">
    <vs-button color="warning" @click="change('1')"> chart1</vs-button>
    <vs-button color="warning" @click="change('2')"> chart2</vs-button>
    <vs-button color="warning" @click="change('3')"> chart3</vs-button>
    </div>
    <ul class="radio" style=" float:right;">
      <li>
        <vs-radio  @change="period"  vs-value="all" val1="all">all</vs-radio>
      </li>
      <li>
        <vs-radio  @change="period" vs-value="6mon"  >6mon</vs-radio>
      </li>
      <li>
        <vs-radio  @change="period"  vs-value="3mon" >3mon</vs-radio>
      </li>
      <li>
        <vs-radio  @change="period" vs-value="1mon" >1mon</vs-radio>
      </li>
    </ul>
    <div class="chart-container">
      <charts-line :height="250"  :data="datacoll" :options="options"></charts-line>
    </div>
  </div>
</template>

<script>
import ChartsLine from './ChartsLine'
export default {
  components: {'charts-line' : ChartsLine},
  data () {
    return {
      datacoll: {},
      options: {
        scales: {
          yAxes: [
            {
              scaleLabel: {
                display: false
              },
              ticks: {
                callback (value) {
                  return `${value}k`
                }
              }
            }
          ],
          xAxes: [
            {
              type: 'time',
              time: {
                unit: 'month'
              },
              scaleLabel: {
              }
            }
          ]
        }
      },
      date: [],
      challenge: [],
      data: [],
      val1: 'all'
    }
  },
  mounted () {
    this.change()
  },
  methods: {
    change (id) {
      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)
        })
    },
    filldata (data) {
      this.datacoll = {
        datasets: [
          {
            data
        ],
        options: this.options
      }
    },

    period (event) {
      const period = event.target.value
      let minValue = new Date(Math.max(...this.date) * 1000)
      const axisXMin = new Date(Math.min(...this.date) * 1000)

      switch (period) {
        case '1m':
          minValue.setMonth(minValue.getMonth() - 1)
          break
        case '3m':
          minValue.setMonth(minValue.getMonth() - 3)
          break
        case '6m':
          minValue.setMonth(minValue.getMonth() - 6)
          break
        default:
          minValue = axisXMin
      }
      const data = this.data.filter(el => {
        return el.x >= minValue
      })
      this.filldata(data)
    }
  }
}
</script>

Here i am unable to display charts by button click, but if i just directly display chart without buttons, then i am able to display charts and change their time interval by radio buttons.

So someone please help me to display charts on button click, my chart id are 1, 2 & 3 respectively. And i want to display chart1 with 'all' radio button checked while loading the page or on refreshing the page, please do help me in doing this.

Objective: To display charts on button click, suppose i have clicked chart2, then chart2 must be display, if the user wishes to change the time interval of chart he can do it by changing the radio buttons. So how to do this in a proper way.

Joshua Angnoe Joshua Angnoe · Accepted Answer · 2021-01-06T19:27:19

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.

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

1 Answers