How To Integrate And Use Google Pie Chart In Vue 2
In this tutorial, we will learn about integrating a pie chart in a Vue 2 app. We know that Google Charts prove a great help in displaying our data on our websites. It is an easy tool for integrating different types of charts in pou8r Vue apps.
Likewise, a pie chart is used to demonstrate numerical data. So, let’s learn below how to implement a pie chart in a Vue 2 app.
Vue Js Google Pie Chart Integration Example
Step 1- Create Vue Environment
Step 2- Install Vue Project
Step 3- Install Google Chart Package
Step 4- Create And Register Chart Component
Step 5- Add Google Pie Chart In Vue
Step 6- Start Vue App
Step 1- Create Vue Environment
The very basic step is just to install Vue CLI which is quite easy. Just execute the below-given command:
npm install -g @vue/cli
Step 2- install Vue Js Project
After the Vue CLI has been installed, we will install a new Vue app:
vue create vue-charts-app
Afterward, we need to get inside the app 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"
},
Step 3- Install 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 Chart Component
Here, we will be knowing how to create components/GoogleChart.vue file. Then, we would add the following code to the file:
<template>
</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>
Step 5- Add Google Pie Chart In Vue
Here, in this step, we will see how simple it is to add a pie chart in Vue by just adding the following code in src/components/GoogleChart.vue file:
<template>
<div>
<h2>Vue Js Google Pie Chart Demo</h2>
<GChart
type="PieChart"
:options="options"
:data="data"
/>
</div>
</template>
<script>
import { GChart } from "vue-google-charts";
export default {
name: "App",
components: {
GChart
},
data() {
return {
data: [
['Daily Routine', 'Hours per Day'],
['Work', 14],
['Eat', 1],
['Reading', 2],
['Exercise', 2],
['Sleep', 5]
],
options: {
width: 1100,
height: 400
}
};
}
};
</script>
Step 6- Start Vue App
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 guide in which we have learned how to add a Google Pie Chart in the Vue js app and that too in quite a simple way.
Thanks