KevinMidboe/vue-chartjs
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-chartjs.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

📺 Add reactive-prop example

Browse Source
This commit is contained in:
Jakub Juszczak
2017-07-02 16:14:03 +02:00
parent e8cbef7fa7
commit 9d44758976
1 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/examples/App.vue
View File

@@ -4,6 +4,8 @@
<bar-example></bar-example>
<h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
<reactive-example></reactive-example>
<h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data as props</h1>
<reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
<h1 style="text-align:center;margin:40px 0;">Linechart</h1>
<line-example></line-example>
<h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
@@ -41,6 +43,31 @@
BubbleExample,
ReactiveExample,
ReactivePropExample
},
data () {
return {
dataPoints: null
}
},
mounted () {
this.fillData()
},
methods: {
getRandomInt () {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
},
fillData () {
this.dataPoints = {
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()]
}
]
}
}
}
}
</script>