Vue 2 Tutorial- How To Implement Google Bubble Chart In A Vue Js Application

Vue Js Bubble Chart Tutorial- How To Implement Google Bubble Chart In Vue Js Application

Vue js Bubble Chart Example; This Vue guide is about giving information on adding Google Bubble Chart in Vue js app.

In this Vue js Bubble Chart example, we will get to know how to use the Vue Google Charts package in the Vue app and implement Bubble Chart in the Vue app.

 

The vue-google-charts-library offers support for Google Charts integration. We can easily draw any type of chart and graph with this plugin. We will also learn how to add the bubble charts in Vue using the vue google chart library.

 

How To Add The 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

 

Step 1- Create Vue Environment

Vue CLI makes the Vue app development very smooth. We simply have to run the following command in order to install it in our device:

npm install -g @vue/cli

 

Step 2- Install Vue Js Project

We will use the below command for installing a new app. See below:

vue create da-vinci-app

cd da-vinci-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, make sure 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"
},

 

Step 3- Install Vue Google Chart Package

Further, we need to invoke the following command from the CLI console to begin installing the Vue Google Chart Package in vue js:

npm install vue-google-charts

 

Step 4- Create And Register Chart component

In order to create the chart component, we have to create a new components/GoogleChart.vue file and 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 the new component gets ready, we 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>

 

Step 5- Add Google Bar/Column Charts In Vue

Further, in this step, we need to add the below 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>

 

Step 6- Start Vue Application

We have to execute the following code to run the vue app:

npm run serve

 

Conclusion

So, in this Vue guide, we have learned to integrate the bubble charts into vue. Hope that this step-by-step tutorial is quite easy to implement in your Vue apps.

 

Thanks