How to Implement Google Bubble Charts in Vue Js

Last updated on: by Editorial Team

Vue js Bubble Chart tutorial; A quick yet informative tutorial on adding Google bubble chart in Vue js application. In this Vue js bubble chart example tutorial, we will show you how to use the Vue google charts package in the vue application and profoundly implement bubble chart in the vue app using Google charts.

The vue-google-charts library offers intuitive support for Google Charts integration. You can draw almost every type of chart and graph with this plugin. We will show you how to eloquently add bubble charts in vue using the vue google chart library.

Vue google chart renders charts in vue within the browser using SVG or VML. When hovering over bubbles in the chart, it manifests a tool-tip with essential information related to data plotted on the chart.

Add Google Bubble Chart in Vue Js App

  • Step 1: Create Vue Environment
  • Step 2: Install Vue Js Project
  • Step 3: Install Google Chart Package
  • Step 4: Create New Component
  • Step 5: Add Google Bar/Column Charts
  • Step 6: Start Vue App

Create Vue Environment

Vue CLI makes the vue app development experience delightful, consequently run command to install it in your device.

npm install -g @vue/cli

Install Vue Js Project

Moreover, if you are not lazy but save your energy for more complex tasks, use the below command to install a new vue app.

If the app is already downloaded, then jump on to the subsequent step.

vue create da-vinci-app
cd da-vinci-app

Install Vue Google Chart Package

Next, invoke the given command from the CLI console to begin installing the vue google chart package in vue js.

npm install vue-google-charts

Create and Register Chart Component

To create a chart component, create a new components/GoogleChart.vue file, make sure to initialize the vue template with provided code.

<template>
  <div>
     
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
  
    };
  }
};
</script>

After making the new component ready, register it inside 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>

Add Google Bar/Column Charts in Vue

Ideally, a bubble chart is used to envision a data set with two to four dimensions. The first two dimensions are referred to as coordinates in the bubble chart, the third as color, and the fourth as size.

In the vue bubble chart example, we added some dummy data to give a pragmatic approach; on an impulse, we used the static data; however, you can go ahead with the real one.

Insert code in src/components/GoogleChart.vue.

<template>
  <div>
    <h2>Vue Js Google Bubble Chart Demo</h2>

    <GChart
      type="BubbleChart"
      :options="options"
      :data="data"
    />    
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";

export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      data: [
        ['Country', 'Car Sales', 'Brand Marketing', 'State',        'Higher Sales'],
        ['Australia',  90.55,              1.67,     'Canberra',    24628000],
        ['Canada',    85.23,              1.36,      'Ottawa',      64901307],
        ['Denmark',   77.32,              1.84,      'Copenhagen',  6421084],
        ['Egypt',     66.12,              2.78,      'Cairo',       78825112],
        ['Finland',   75.09,              2,         'Helsinki',    11712681],
        ['Greece',    60.21,              1.7,       'Athens',      83137148]
      ],
      options: {
        width: 1100,
        height: 500
      }
    };
  }
};
</script>

Start Vue Application

You can execute the given command to run the app, don’t forget to use the provided url if testing locally.

npm run serve
http://localhost:8080

Vue Js Google Bubble Chart

Conclusion

We assumed you have got enough gratification due to the confluence of Google charts and Vue js.

So we used the agile process to integrate bubble charts in vue, with immaculate steps. We reckon you loved this step-by-step guide, have a good day.