Google Charts Vue.js Tutorial

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.