Vue Js Google Line Chart Tutorial; In this Vue guide, we will get to know how to implement a line chart in a Vue Js application. For that, we would be using the vue-google-charts plugin. Let’s learn how to integrate it into a Vue Js app:
Vue Js Google Line Charts Integration Example
Step 1- Create Vue Environment
Step 2- Install Vue Js Project
Step 3- Install Google Chart Package
Step 4- Register New Component
Step 5- Implement Google Line Chart In Vue
Step 6- Start Vue Application
Step 1- Create Vue Environment
The very basic step for starting with the implementation is just to install Vue CLI. We will be creating a new Vue app using the below- given commands which would install Vue CLI, download the app, and step inside the app:
npm install -g @vue/cli
Step 2- Install Vue Js Project
Since we have already installed Vue CLI, now we will create a new Vue app using the given command:
vue create vue-charts-app
Afterward, we move to the project folder:
cd vue-charts-app
Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.
"scripts": {
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},
Now, we have to install the bootstrap package if we want to create some user interface module:
npm install bootstrap
Next, we need to add the bootstrap CSS path in the src/main.js file:
import Vue from 'vue'
import App from './App.vue'
// Import Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
new Vue({
render: h => h(App),
}).$mount('#app')
Step 3- Add Google Chart Package
In this step, we will see how to install the Vue Google Chart package into the Vue js app. We need to head over to the command prompt and type the following command in order to install the Google Charts Library:
npm install vue-google-charts
Step 4- Create And Register New Component In App
Here, we will be knowing how to create components/GoogleChart.vue file. Then, we would add the following code to the file:
In addition, we will import the GChart from the “vue-google-charts” package and register the GChart module in the components object:
<template>
<div>
<h2>Add Google line chart in Vue Js</h2>
</div>
</template>
<script>
import { GChart } from "vue-google-charts";
export default {
name: "App",
components: {
GChart
},
data() {
return {
};
}
};
</script>
Further, we need to open the src/App.vue file and register the new component:
<template>
<div class="container mt-5 text-center">
<GoogleChart />
</div>
</template>
<script>
import GoogleChart from './components/GoogleChart.vue'
export default {
name: 'App',
components: {
GoogleChart
}
}
</script>
Further, we need to add the GoogleChart component to the src/App.vue file:
<template>
<div class="container mt-5 text-center">
<GoogleChart />
</div>
</template>
<script>
import GoogleChart from './components/GoogleChart.vue'
export default {
name: 'App',
components: {
GoogleChart
}
}
</script>
Step 5- Implement Google Line Chart In Vue
The GChart directive helps in displaying the chart, passing the options to GChart syntax to configure the line chart. Likewise, the data property holds the data that needs to be shown in the line chart.
Next, we open and update the src/components/GoogleChart.vue file with the suggested code:
<template>
<div>
<h2>Vue Js Google line Charts Demo</h2>
<GChart
type="LineChart"
:options="options"
:data="collectionData"
/>
</div>
</template>
<script>
import { GChart } from "vue-google-charts";
export default {
name: "App",
components: {
GChart
},
data() {
return {
collectionData: [
["Day", "Guardians of the Galaxy", "The Avengers", "Transformers"],
[1, 40.45, 90.5, 42.8],
[2, 22.5, 68.4, 33.4],
[3, 36.5, 47, 55.5],
[4, 12.7, 23.8, 14.5],
[5, 10.9, 44.5, 10.3],
[6, 7.8, 14.5, 6.7],
[7, 8.6, 11.2, 19.6]
],
options: {
chart: {
title: "First 7 days movies collection",
subtitle: "In millions of dollars (USD)"
},
width: 1000,
height: 400
}
};
}
};
</script>
Step 6- Start Vue Application
We have to use this npm command in order to start the Vue app:
npm run serve
Conclusion
So, friends, we have reached the end of this Vue Line Chart Example in which we have learned to easily integrate a Line Chart into a Vue app.
Thanks