Vue js google area chart integration; In this tutorial, i am going to show you to use google area chart in vuejs application.
How to Use Google Area Chart In Vue Js App
Follow the below given steps and implement google area charts in vue js applications:
- Step 1 – Create New VUE JS App
- Step 2 – Install Google Map Package
- Step 3 – Add to Components in Main.js
- Step 4 – Add Component on App.vue
Step 1 – Create New VUE JS App
Run the following command on command prompt to create new vue js app:
vue create chart-app
Step 2 – Install Google Chart Package
Run the following command on terminal to install google chart package in your vue js app:
cd chart-app npm i vue-google-charts
Step 3 – Add to Components in Main.js
Go to /src directory and open main.js file. Then Import components in main.js:
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
Step 4 – Add Component on App.vue
Go to /src/ directory and App.vue file. And then add the following code into it:
<template> <div id="app" style="width:70%;"> <h1 style="padding-left:80px;">Vue Js Google area Charts Example - Laratutorials.com</h1> <GChart type="AreaChart" :data="chartData" :options="chartOptions" /> </div> </template> <script> import { GChart } from "vue-google-charts"; export default { name: "App", components: { GChart }, data() { return { // Array will be automatically processed with visualization.arrayToDataTable function chartData: [ ["Year", "Blog"], ["2018", 180], ["2019", 300], ["2020", 250], ["2021", 500], ], chartOptions: { chart: { title: "Company Performance", subtitle: "blog in total: year" } } }; } }; </script>
Conclusion
Vue js google area chart integration example. In this tutorial, you have learned How to use google area chart in vuejs app.
Recommended VUE JS Tutorials
Recommended:-Vue Js If Else Condition Example
Recommended:-Vue Js For Loop (v-for) Example
Recommended:-Vue JS Ajax Form Submit Tutorial
Recommended:-Vue Js Add Class To Element On Click Tutorial
Recommended:-Vue JS Checkbox Checked Event Tutorial
Recommended:-Vue Js Get Current Date and Time
Recommended:-How to Add and Use Bootstrap Modal in Vue Js App
Recommended:-Vue JS Download File using Axios App
Recommended:-Vue Js keydown Event Example
Recommended:-Vue.Js in Reverse Array Using v-for OrderBy Filter
Recommended:-Vue JS Radio Button OnChange Event
Recommended:-How to Show Flash Message Using Vue JS in Laravel 8
Recommended:-How to Create Laravel 8 Vue JS Like Dislike System
Recommended:-Laravel 8 Vue JS Image/File Upload Tutorial Example