I have a chart displayed in my user interface that needs to be updated based on the selected time period. By default, the chart displays data from the past year, but when the user selects "Month," it should show data from the past month.
<div class="graph">
<p>Select {{ selected }}</p>
<form>
<select class="select" v-model="selected">
<option value="year">Year</option>
<option value="month">Month</option>
<option value="week">Week</option>
</select>
</form>
<canvas id="mix" count="2"></canvas>
<chartjs-line target="mix"></chartjs-line>
<chartjs-bar :labels="mylabels" :datasets="mydatasets" target="mix"></chartjs-bar>
</div>
export default {
data(){
return{
mydatasets:[{
responsive:true,
borderWidth: 2,
data: [20, 50, 20, 41, 26, 15, 20, 10, 29, 5, 33, 55] // this data should update based on the selected time period
}]
}
}
}