mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
✨ Add reactive Data example
This commit is contained in:
41
src/examples/ReactiveExample.js
Normal file
41
src/examples/ReactiveExample.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import BarChart from '../BaseCharts/Bar'
|
||||
import reactiveData from '../mixins/reactiveData'
|
||||
|
||||
export default BarChart.extend({
|
||||
mixins: [reactiveData],
|
||||
data () {
|
||||
return {
|
||||
chartData: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fillData()
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.renderChart(this.chartData)
|
||||
|
||||
setInterval(() => {
|
||||
this.fillData()
|
||||
}, 5000)
|
||||
},
|
||||
|
||||
methods: {
|
||||
fillData () {
|
||||
this.chartData = {
|
||||
labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
getRandomInt () {
|
||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user