Vue 2 Tutorial- How To Integrate And Use Google Pie Chart In Vue 2 App

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