My experience with Vuejs is still fresh, and I've incorporated 3 buttons named chart1, chart2, and chart3. Whenever any of these buttons are clicked, I want a Date selection to appear in a radio type format. You can see an example below:
https://i.sstatic.net/HUq8V.png
The goal here is to display the charts corresponding to the clicked button along with the Date selection options.
This is my attempt so far:
<template>
<div class="Different charts">
<div class="buttons" >
<vs-button color="warning" size="small" @click="chartapi(chart1, all)">Chart1</vs-button>
<vs-button color="warning" size="small" @click="chartapi(chart2, all)" >Chart2</vs-button>
<vs-button color="warning" size="small" @click="chartapi(chart3, all)">Chart3</vs-button>
</div>
<ul class="demo-alignment ">
<li>
<vs-radio id="all" color="warning" vs-name="options" vs-value="all" v-model="radios2" >All</vs-radio>
</li>
<li>
<vs-radio id="6mon" color="warning" vs-name="options" vs-value="6mon" v-model="val1">6mon</vs-radio>
</li>
<li>
<vs-radio id="3mon" color="warning" vs-name="options" vs-value="3mon" v-model="val1">3mon</vs-radio>
</li>
<li>
<vs-radio id="1mon" color="warning" vs-name="options" vs-value="1mon" v-model="val1">1mon</vs-radio>
</li>
</ul>
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
</template>
<script>
import Chart from 'chart.js'
export default {
data () {
return {
date: [],
challenge: [],
data: [],
val1: 'all'
}
},
mounted () {
this.chartapi()
},
methods: {
chartapi (type_name, interval) {
this.$http.get(`/different/chart/${ type_name }?interval=${ interval}`)
.then((r) => {
this.date = r.data.date
this.challenge = r.data.challenge
this.data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index]
}))
const ctx = this.$refs.chart.getContext('2d')
new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Challenge',
data: this.data,
borderColor: 'black',
}
]
},
options: {
scales: {
yAxes: [
{
ticks: {
callback (value) {
return `${value}%`
}
}
}
],
xAxes: [
{
type: 'time',
time: {
unit: 'month'
}
}
]
}
}
})
})
}
}
}
</script>
You'll notice that clicking a button triggers the display of the corresponding chart.
I've also implemented an interval feature in the function to define the Date range for each request.
My question revolves around displaying the Date range selection for every button option and how to integrate interval settings within the radio button selections.
For instance, by calling chartapi(chart1, 3mon), it would reveal the previous 3 months' data specific to chart1. However, my preference is to exhibit full chart data upon button click, enabling users to dictate intervals using the Date range selection via radio buttons. Can someone guide me on integrating the interval functionality into the radio buttons?