starting infographic

VueApp/package-lock.json

@@ -12872,6 +12872,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz",
       "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ=="
     },
+    "vue-google-charts": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/vue-google-charts/-/vue-google-charts-0.2.2.tgz",
+      "integrity": "sha512-FauHM5PdTard2MY65xeIyJtnpcA2IDqj8PN796iJWDs5lytwPF6rdZRWDDLG6Q/UhxxFJ7yoWW88qZ7l7o0KIA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz",

VueApp/package.json

@@ -20,6 +20,7 @@
     "eslint-plugin-node": "^5.1.0",
     "eventemitter3": "^2.0.3",
     "vue": "^2.3.4",
+    "vue-google-charts": "^0.2.2",
     "vue-resource": "^1.3.4",
     "vue-router": "^2.7.0",
     "vue2-google-maps": "^0.10.0"

VueApp/src/components/ElevationGraph.vue

@@ -0,0 +1,25 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "ElevationGraph",
+        data () {
+          return {
+            elevationService: null,
+            graphService: null
+          }
+        },
+        methods: {
+          getPathElevation (path) {
+            this.elevationService = new google.maps.ElevationService() // eslint-disable-line no-undef
+
+          }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

VueApp/src/main.js

@@ -2,6 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import * as VueGoogleMaps from 'vue2-google-maps'
+import VueGoogleCharts from 'vue-google-charts'
 import App from './App'
 import router from './router'
 
@@ -16,6 +17,8 @@ Vue.use(VueGoogleMaps, {
   }
 })
 
+Vue.use(VueGoogleCharts)
+
 new Vue({ // eslint-disable-line no-new
   el: '#app',
   router,