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 demo page for github pages

Browse Source 
Signed-off-by: Jakub Juszczak <netghost03@gmail.com>
This commit is contained in:
Jakub Juszczak
2016-12-07 08:38:30 +01:00
parent d980e32116
commit 1f91c96f83
11 changed files with 51 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
demo/dist/vue-chartjs.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
demo/dist/vue-chartjs.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
demo/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>📊 Vue-ChartJs</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="dist/vue-chart.js"></script>
</body>
</html>

8
src/examples/App.vue
View File

@@ -1,12 +1,20 @@
<template> <template>
<div class="container"> <div class="container">
<h1 style="text-align:center;margin:40px 0;">Barchart</h1>
<bar-example></bar-example> <bar-example></bar-example>
<h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
<reactive-example></reactive-example> <reactive-example></reactive-example>
<h1 style="text-align:center;margin:40px 0;">Linechart</h1>
<line-example></line-example> <line-example></line-example>
<h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
<doughnut-example></doughnut-example> <doughnut-example></doughnut-example>
<h1 style="text-align:center;margin:40px 0;">Piechart</h1>
<pie-example></pie-example> <pie-example></pie-example>
<h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
<radar-example></radar-example> <radar-example></radar-example>
<h1 style="text-align:center;margin:40px 0;">Polararea</h1>
<polar-area-example></polar-area-example> <polar-area-example></polar-area-example>
<h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
<bubble-example></bubble-example> <bubble-example></bubble-example>
</div> </div>
</template> </template>

2
src/examples/BubbleExample.js
View File

@@ -47,6 +47,6 @@ export default BubbleChart.extend({
] ]
} }
] ]
}) }, {responsive: true, maintainAspectRatio: false})
} }
}) })

2
src/examples/DoughnutExample.js
View File

@@ -15,6 +15,6 @@ export default DoughnutChart.extend({
data: [40, 20, 80, 10] data: [40, 20, 80, 10]
} }
] ]
}) }, {responsive: true, maintainAspectRatio: false})
} }
}) })

2
src/examples/LineExample.js
View File

@@ -11,6 +11,6 @@ export default LineChart.extend({
data: [40, 39, 10, 40, 39, 80, 40] data: [40, 39, 10, 40, 39, 80, 40]
} }
] ]
}) }, {responsive: true, maintainAspectRatio: false})
} }
}) })

2
src/examples/PieExample.js
View File

@@ -15,6 +15,6 @@ export default PieChart.extend({
data: [40, 20, 80, 10] data: [40, 20, 80, 10]
} }
] ]
}) }, {responsive: true, maintainAspectRatio: false})
} }
}) })

2
src/examples/PolarAreaExample.js
View File

@@ -24,6 +24,6 @@ export default PolarAreaChart.extend({
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
}) }, {responsive: true, maintainAspectRatio: false})
} }
}) })

2
src/examples/RadarExample.js
View File

@@ -26,6 +26,6 @@ export default RadarChart.extend({
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
}) }, {responsive: true, maintainAspectRatio: false})
} }
}) })

2
src/examples/ReactiveExample.js
View File

@@ -13,7 +13,7 @@ export default BarChart.extend({
}, },
mounted () { mounted () {
this.renderChart(this.chartData) this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
setInterval(() => { setInterval(() => {
this.fillData() this.fillData()