Vue 2 Tutorial- How To Add And Use Google Line Chart In Vue 2 App

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