How to Implement Google Bubble Charts in Vue 3

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

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: Set Up Vue 3 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 3 Project

Here is the command that will help you Install Vue application.

After invoking the command, Vue CLI asks for the versions.

Make sure to choose Vue 3 option.

vue create da-vinci-app

cd da-vinci-app

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

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"
},

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>

Here is the final src/main.js file:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

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.

Reference: https://www.npmjs.com/package/vue-google-charts