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