How to Implement Google Charts and Graphs in Vue JS

Vue JS Google Charts and Graphs tutorial; Imagine, If you have tons of information that you want to show to your users, what would you do. The first solution that strikes your mind is to use a table; however, the tabular way is not enough for ample information. Charts and graphs are handy for displaying extensive data to users; for visualization purposes, charts offer eloquent ways to draw information on them and help make business decisions.

This extensive and agile tutorial will show you how to add charts and graphs in the Vue js app using the special vue-google-charts package.

Vue google chart is specially built for implementing charts in vue apps, and it allows the creating effortless at the same time aesthetically beautiful charts in the vue app.

No matter, If you are a novice developer and want to incorporate charts in vue in an eloquent manner with customization kept in mind. You can proliferate the customization with its powerful props, events and method.

We will create a basic vue app, add a vue google charts package and create a chart component; furthermore show you how to implement various types of charts and graphs in the vue component.

Vue JS Charts and Graphs Integration Example

  • Step 1: Download Vue Application
  • Step 2: Add Google Vue Chart Js Package
  • Step 3: Add Line Chart in Vue
  • Step 4: Add Bar Chart in Vue
  • Step 5: Create Doughnut Chart in Vue
  • Step 6: Add Pie Chart in Vue
  • Step 7: Create Bubble Chart in Vue
  • Step 8: Start Vue App

Download Vue Application

You need a Vue app, to begin with, you can use vue CLI to install the Vue application; here are the set of commands that let you configure vue cli, create the vue app and enter into the project folder.

# install vue cli
npm install -g @vue/cli

# create
vue create vue-astro-app

# enter
cd vue-astro-app

Add Vue Google Chart Js Package

This section will tell you to install vue-google-charts package, head over to the console, type command, and execute command to order CLI to add the library in vue.

npm install vue-google-charts

Add Line Chart in Vue

In this section, we will create a line chart in vue; ideally, the line chart is used to display information that constantly changes over a certain period.

<template>
  <div>
    <h2>Line Chart</h2>
    <GChart
      type="LineChart"
      :options="options"
      :data="chartData"
    />
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      chartData: [
        ["Weeks", "Gold", "Silver", "Diamond"],
        [1,  55, 45, 48],
        [2,  25, 64, 34],
        [3,  65, 54, 51],
        [4,  17, 18, 41],
        [5,  19, 45, 33]
      ],
      options: {
        width: 1100,
        height: 500
      }
    };
  }
};
</script>

Vue Google Line Chart

Add Bar Chart in Vue

Next, create a bar chart in vue; the bar chart is beneficial in showing certain information with rectangular bars with heights or lengths proportional to the values they represent. A bar chart is defined vertically and horizontally, and the seldom vertical chart is denoted as a column chart.

<template>
  <div>
    <h2>Bar Chart</h2>
    <GChart
      type="BarChart"
      :options="options"
      :data="chartData"
    />
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      chartData: [
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ],
      options: {
        width: 1100,
        height: 450
      }
    };
  }
};
</script>

Vue Google Bar Chart

Create Doughnut Chart in Vue

A doughnut is identical to a pie chart with a round hole at the center, making it look like a real doughnut. A pie chart is subdivided into sections; every part holds some size in conjunction with the entire round.

<template>
  <div>
    <h2>Doughnut Chart</h2>
    <GChart
      type="PieChart"
      :options="options"
      :data="chartData"
    />
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      chartData: [
        ['Task', 'Hours every day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
      ],
      options: {
        width: 1100,
        height: 450
      }
    };
  }
};
</script>

Vue Google Pie Chart

Create Bubble Chart in Vue

A bubble chart is an advanced version of a scatter plot that tells more about the relations between three dimensions of the data.

<template>
  <div>
    <h2>Bubble Chart</h2>
    <GChart
      type="BubbleChart"
      :options="options"
      :data="chartData"
    />
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      chartData: [
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ],
      options: {
        width: 1100,
        height: 450
      }
    };
  }
};
</script>

Google Bubble Chart in Vue

Start Vue App

Open command prompt, type the command, then evoke the command to run the vue app; if running the app locally, use the given url to run the app.

npm run serve
http://localhost:8080

Conclusion

At the beginning of this tutorial, we talked about charts and graphs; throughout this profound tutorial, we learned the process of creating charts in vue using vue google chart library; we hope you loved the fidelity that we revealed through this guide. So, this was it, and this vue chart example is over.