Google Charts JavaScript 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 Javascript?

Javascript is the base language by which people build charts and websites for the web. There are many additional frameworks that are built on top of Javascript. Learning Javascript is an absolute must for modern web development, particularly when it comes to using a charting library.

Google Charts JavaScript Code Example

Google Charts is a powerful, easy to use, free chart library for creating interactive charts in your web applications. This tutorial section will walk you through how to create a basic line chart using Google Charts with JavaScript. By following these steps, you will learn how to load the Google Charts library, prepare your data, and configure the chart options to create and display a simple line chart on your web page.

Step 1: Load the Google Charts Library

First, you need to load the Google Charts library by including the following script tag in the head section of your HTML document:

htmlCopy code

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


Step 2: Load the Visualization API and the Line Chart Package

Once the Google Charts library is loaded, you need to load the Visualization API and the specific chart package you intend to use, in this case, the line chart package. This can be done by adding the following JavaScript code:

javascriptCopy code

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


Step 3: Set a Callback to Draw the Chart

After loading the necessary libraries and packages, set a callback function that will execute once the Google Charts library is fully loaded. This function will be responsible for drawing your chart:

javascriptCopy code

google.charts.setOnLoadCallback(drawChart);


Step 4: Define the Chart Drawing Function

Now, you'll need to define the drawChart function, which will create the data table for your chart, set the chart options, and instantiate and draw the chart:

javascriptCopy code

function drawChart() {
 // Create the data table.
 var data = google.visualization.arrayToDataTable([
   ['Year', 'Sales'],
   ['2017',  1000],
   ['2018',  1170],
   ['2019',  660],
   ['2020',  1030]
 ]);

 // Set chart options
 var options = {
   title: 'Company Performance',
   curveType: 'function',
   legend: { position: 'bottom' }
 };

 // Instantiate and draw the chart.
 var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
 chart.draw(data, options);
}


Step 5: Prepare the HTML Element to Hold the Chart

In your HTML body, create a div element where the chart will be rendered. Assign it an ID that matches the one used in the drawChart function:

htmlCopy code

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


Conclusion

After completing these steps and including them in your HTML document, you should see a basic line chart representing the "Company Performance" over the years on your web page. This is just a starting point, and Google Charts offers a wide variety of chart types and customization options to suit your needs. Experiment with different chart types and options to discover the full capabilities of Google Charts.

‍