Permalink
Find file
269ad4c Dec 5, 2016
39 lines (36 sloc) 1.33 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Chartkick</title>
<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script src="https://unpkg.com/chart.js@2.4.0/dist/Chart.bundle.js"></script>
<script src="https://unpkg.com/chartkick@2.2.1"></script>
<script src="dist/vue-chartkick.js"></script>
</head>
<body>
<div id="app">
<line-chart :data="data" :max="max" legend="bottom" :curve="false"></line-chart>
<pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]" :download="true"></pie-chart>
<column-chart :data="[['Sun', 32], ['Mon', 46], ['Tue', 28]]"></column-chart>
<bar-chart :data="[['Work', 32], ['Play', 1492]]"></bar-chart>
<area-chart :data="{'2013-02-10 00:00:00 -0800': 11, '2013-02-11 00:00:00 -0800': 6}"></area-chart>
<scatter-chart :data="[[174.0, 80.0], [176.5, 82.3], [180.3, 73.6]]"></scatter-chart>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
data: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3], ["Jun", 8], ["Jul", 4]],
max: 10
},
mounted: function() {
setTimeout(() => {
this.data = this.data.concat([["Aug", 10]])
this.max = this.max += 5
}, 1000)
}
})
</script>
</body>
</html>