From 0b674c25e75353df0bcbe08f998ad1293b6616fc Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 1 Jan 2019 22:01:01 +0300
Subject: [PATCH] Add combo chart demo

---
 src/AppMenu.vue                    |  1 +
 src/router.js                      |  5 ++
 src/views/chart/ComboChartDemo.vue | 81 ++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/views/chart/ComboChartDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 27e08e514..41f8dcb91 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -109,6 +109,7 @@
                 <div>
                     <router-link to="/chart">&#9679; ChartModel</router-link>
                     <router-link to="/chart/pie">&#9679; Pie</router-link>
+                    <router-link to="/chart/combo">&#9679; Combo</router-link>
                 </div>
             </div>
 
diff --git a/src/router.js b/src/router.js
index 91359e8b8..0542cee88 100644
--- a/src/router.js
+++ b/src/router.js
@@ -31,6 +31,11 @@ export default new Router({
         name: 'chart',
         component: () => import('./views/chart/ChartDemo.vue')
     },
+    {
+        path: '/chart/combo',
+        name: 'combochart',
+        component: () => import('./views/chart/ComboChartDemo.vue')
+    },
     {
         path: '/chart/pie',
         name: 'piechart',
diff --git a/src/views/chart/ComboChartDemo.vue b/src/views/chart/ComboChartDemo.vue
new file mode 100644
index 000000000..17e86ec3c
--- /dev/null
+++ b/src/views/chart/ComboChartDemo.vue
@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ComboChart</h1>
+                <p>Different chart types can be combined in the same graph.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Chart type="bar" :data="chartModel" :options="chartOptions"/>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartModel: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    type: 'line',
+                    label: 'Dataset 1',
+                    borderColor: '#AA5493',
+                    borderWidth: 2,
+                    fill: false,
+                    data: [
+                        50,
+                        25,
+                        12,
+                        48,
+                        56,
+                        76,
+                        42
+                    ]
+                }, {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: '#2f4860',
+                    data: [
+                        21,
+                        84,
+                        24,
+                        75,
+                        37,
+                        65,
+                        34
+                    ],
+                    borderColor: 'white',
+                    borderWidth: 2
+                }, {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: '#00bb7e',
+                    data: [
+                        41,
+                        52,
+                        24,
+                        74,
+                        23,
+                        21,
+                        32
+                    ]
+                }]
+            },
+            chartOptions: {
+                responsive: true,
+                title: {
+                    display: true,
+                    text: 'Combo Bar Line Chart'
+                },
+                tooltips: {
+                    mode: 'index',
+                    intersect: true
+                }
+            }
+        }
+    }
+}
+</script>