Google Charts Vue.js Tutorial

What is Google Charts?

Google Charts has a wide variety of charts and operates with both SVG and HTML5 technology to be highly compatible. It is free to use and is a great library to launch charting. It doesn't offer as much customizability as some other charting libraries, but is a great solution.

What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). It was created by Evan You and is designed to be incrementally adoptable. The core library focuses on the view layer only, making it easy to pick up and integrate with other libraries or existing projects. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. It has a virtual DOM for faster and more efficient manipulation, composable components, and a relatively low learning curve. It is great for ease-of-use, performance, and overall developer experience.

Google Charts Vue.js Code Example

To integrate Google Charts with Vue.js, we'll start by creating a Vue component that loads a Google Chart. The example will showcase a basic bar chart visualization.

Prerequisites

- Ensure you have Vue.js installed in your project. If not, you can add it by using a CDN or through npm:

 <!-- Include Vue via CDN for demonstration -->

 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

- We'll also load the Google Charts library using its loader:

 <!-- Load Google Charts -->

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Step 1: HTML Structure

In your HTML file, add a div element that will serve as the container for the Google Chart. Also, ensure Vue is integrated into your project.

<div id="app">

 <google-chart></google-chart>

</div>

Step 2: Creating the Vue Component

Now, let's create a Vue component named `google-chart` that will render the Google Chart.

<script>

// Define the google-chart component

Vue.component('google-chart', {

 template: '<div id="chart_div" style="width: 900px; height: 500px;"></div>',

 mounted() {

   // Load the Visualization API and the corechart package.

   google.charts.load('current', {'packages':['corechart']});

   // Set a callback to run when the Google Visualization API is loaded.

   google.charts.setOnLoadCallback(this.drawChart);

 },

 methods: {

   drawChart() {

     // Standard Google Charts setup

     var data = google.visualization.arrayToDataTable([

       ['Element', 'Density', { role: 'style' }],

       ['Copper', 8.94, '#b87333'],            

       ['Silver', 10.49, 'silver'],          

       ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2']

     ]);

     var options = {

       title: "Density of Precious Metals, in g/cm^3",

       bar: {groupWidth: "95%"},

       legend: { position: "none" },

     };

     // Instantiate and draw the chart

     var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

     chart.draw(data, options);

   }

 }

});

// Create the main Vue instance

new Vue({

 el: '#app'

});

</script>

This code defines a Vue component that utilizes the Google Charts library to render a bar chart inside the `#chart_div` element. The component is then used within a Vue instance bound to the `#app` div.

Thus, by following these steps and utilizing the given code example, you can easily integrate and use Google Charts in a Vue.js application to display data visually.

ABOUT EXPLO

Explo, the publishers of Graphs & Trends, is an embedded analytics company. With Explo’s Dashboard and Report Builder product, you can a premium analytics experience for your users with minimal engineering bandwidth.
Learn more about Explo →