How to Add and Use Google Line Chart in Vue 3 App

Last Updated on March 4, 2024 by Digamber in Vue JS

Vue Js Google line chart tutorial; this agile guide will help you understand how to integrate the Google line chart in the Vue js application using the notable vue-google-charts package from absolute scratch.

Imagine you have a requirement to track the more minor changes; specifically, you have to keep an eye on changes that occur over a short or long period.

What will be the pragmatic solution?

In the UI world, the table plays a vital role in displaying data more eloquently; however, tables are not enough to deal with a specific type of problem. You can truly rely on Google charts for data visualization purposes.

Google charts offer an agile way to visualize data on your site, not just line charts, but it also provides tons of other charts or graphs that efficiently help you deal with data visualization.

This quick tutorial will explain every process that helps you implement a google line chart in the Vue js application.

Moreover, we will cover how to set up the vue development environment, add or install the google chart package in vue, and create reusable vue google chart components.

Vue Js 3 Google Line Chart Integration Example

Step 1: Create Vue Environment
Step 2: Create Vue Js Project
Step 3: Add Google Chart Library
Step 4: Register New Component
Step 5: Implement Google Line Chart in Vue
Step 6: Start Vue Application

Create Vue Environment

First, execute the command to install the Vue command-line interface on your system.

npm install -g @vue/cli

Create Vue 3 Project

Once the vue cli is installed, you are ready to download the Vue app.

vue create vue-charts-app

After installing the app, move to the project folder.

cd vue-charts-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

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 above error for invoking the app, make sure to update the "scripts": [] array in 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"
},

This step is optional, but if you want to create some user interface module with more agility, then the Bootstrap package is for you.

npm install bootstrap

Next, 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')

Add Google Chart Package

Next, use the following command to install the vue google charts plugin in the vue app.

npm install vue-google-charts

Create and Register New Component in App

In this section, we will create a new component, so head over to the components folder and create GoogleChart.vue file, then add the following code in the file.

Also, 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>

Next, 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>

Implement Google Line Chart in Vue

The GChart directive helps to display the chart, pass the options to GChart syntax to configure the line chart; similarly, the data property holds the data that needs to be shown in the line chart.

Next, 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>

Start Vue Application

Start the app executing the npm run serve command and view the app using the following url in the browser.

npm run serve

http://localhost:8080

Vue Js Google Line Chart

Conclusion

Data visualization is an eloquent work, and Google charts understand the importance of it. In this example, we comprehended the nuances of google line chart implementation in vue with example.

We hope this tutorial showed you the right and profound path and will undoubtedly help you integrate google charts in vue with agility; thanks for reading.