How do I add Date range filter in chartjs in the context of Vue.js

Question

I have displayed my chart using API in vuejs, now I want to filter date and display chart respectively. I have my Chart.vue which contains my chart information, So now I want to add a date filter just like the image below:

So whenever I click any of the input my chart should change accordingly. For example if I click on 3 months, the chart should display last 3 months data.

Here is my code Chart.vue

<template>
  <div class="chart-container" style="position: relative; height: 25vh; width:100%;">
    <canvas id="DisplayChart" ></canvas>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'Chart_from_API',
  data () {
    return {
      myChart: []
    }
  },
   mounted () {
       this.display()
   },
   methods: {
       display () { this.$http.get('https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs') //Your API has to be given here
      .then((response) => {
        const result = response.data
        const ctx = document.getElementById('DisplayChart').getContext('2d')
        const Chart_data = []
        for (let i = 0; i < result.date.length; i++) {
          Chart_data.push({
            x_axis: moment(result.date[i], 'X').toDate(),  //To Convert Unix Timestamp into Date
            y_axis: result.challenge[i]
          })
        }
        // eslint-disable-next-line init-declarations,prefer-const
        let myChart
        if (myChart !== undefined) {
          myChart.destroy()
        }

        // eslint-disable-next-line no-undef
        myChart = new Chart(ctx, {
          type: 'line',
          data: {
            datasets: [
              {
                label: 'Chart_from_API',
                data: Chart_data,
                borderColor: '#EA5455',
                lineTension: 0
              }
            ]
          },
          options: {
            lineTension: 0,
            maintainAspectRatio: false,
            legend: {
              display: false
            },
            scales: {
              yAxes: [
                {
                  scaleLabel: {
                    display: false
                  },
                  ticks: {
                    beginAtZero: true,
                    // eslint-disable-next-line no-unused-vars
                    callback (value) {
                      return `${value  }k`    // y-axis value will append k to it
                    }
                  }
                }
              ],
              xAxes: [
                {
                  type: 'time',
                  time: {
                    unit: 'month'
                  },
                  scaleLabel: {
                    display: true,
                    labelString: ''
                  }
                }
              ]
            }
          }
        })
      })
      .catch((error) => {
        console.log(error)
      })
  }
 }

}

And here is my main component App.vue:

<template>
  <div class="vx-row">
    <div class="vx-col w-full mb-base">
      <vx-card>
        <div class="pull-right" style="float:right;">
          <!-- Timeframe buttons -->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="btn-group btn-group-toggle timeframeButtons" id="timeframe_button">
              <label class="btn btn-sm btn-secondary active">
                <input type="radio" name="options" value="all" autocomplete="off" checked> Overall
              </label>
              <label class="btn btn-sm btn-secondary">
                <input type="radio" name="options" value="6" autocomplete="off"> 6 months
              </label>
              <label class="btn btn-sm btn-secondary">
                <input type="radio" name="options" value="3" autocomplete="off"> 3 months
              </label>
              <label class="btn btn-sm btn-secondary">
                <input type="radio" name="options" value="1" autocomplete="off"> 1 month
              </label>
            </div>
          </div>
        </div>
        <Chart></Chart>
      </vx-card>
    </div>
  </div>
</template>

<script>
import Chart from './Chart.vue'
export default {
  component: {Chart}
}
</script>

I don't have any idea how to do it in my case, so please someone help me with this. Please send me what changes should be done completely at least for one option so that I can understand the logic behind it.

Anupam Singh · Accepted Answer · 2020-12-23 11:47:23Z

1

Try adding chart object in data

data () {
    return {
      chart = null;      
    }
  }

initialize chart = new Chart({..}) on mounted() hook and bind initial data as you are doing currently.

When you are applying the filters do-following to update the chart :

 this.chart.data.datasets = {
            label: 'Chart_from_API',
            data: Chart_data,
            borderColor: '#EA5455',
            lineTension: 0
          }
        ];
 this.chart.update();

Also, prefer removing code from mounted() and put it in a method for reusability.

Update -------

Handling Radio button

<section>
  <h3>radio buttons</h3>
  <input type="radio" v-model="month" @change="onChange($event)" value="6">6 Months
  <input type="radio" v-model="month" @change="onChange($event)" value="3">3 Montha
  <input type="radio" v-model="month" @change="onChange($event)" value="1">1 Month
</section>

var vm = new Vue({
  ....
  data: {
    month: 1
  },
  methods:{
    onChange(event){
     var val = event.target.value;
     // update dataset 
     // update chart 
    }
  }
})

edited Dec 23, 2020 at 11:47

answered Dec 22, 2020 at 12:46

Anupam Singh

1,15613 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Quantum Over a year ago

Can you please show me how to get the options as shown in the above image, and whenever i click any of those option the chart should change accordingly, please do help me i have no idea how to do it as I'm new to Vuejs.

Quantum Over a year ago

Thank you very much, but can you please send me the full Chart.vue code and also please send me the App.vue where the inputs are given with the changes that you said me to do. Because I'm confused and don't know to place things properly because I am dealing it for the first time.

Quantum Over a year ago

can you please send me full Chart.vue code and App.vue because i wanna know where i am going wrong and i wanna know the flow of the code in order to display the time frames.

Quantum Over a year ago

can you please send me the full Chart and App codes by modifying mine because i m confused as I am working for the time.

Collectives™ on Stack Overflow

How do I add Date range filter in chartjs in the context of Vue.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related