mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2026-02-09 19:13:31 +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