Use of Google Charts to Insert Interactive Graphics

Google Charts Guide to Insert interactive graphics into web pages

Using Google Charts, you can create interactive graphics charts for web pages using any editor – Brackets will do – and a web browser.

Copy this code to the body of the page where you want to insert the chart:

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script> <script type=”text/javascript”> google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’,’table’]}); google.setOnLoadCallback(drawChart); </script>

You will only see the JSAPI library one time, regardless of how many and which interactive graphics charts you want to show on the page. The first line of the second script loads the 1.0 version of the Google Visualization library and indicates the packages to include, in this case corechart and table; this statement must also be included once. Next, in the second script, we call the function we will use to create a DataTable and populate it with data.

Interactive Chart for Survey Data

Take a look at an example where you want to publish survey data from a sample of 1012 users using a pie chart. In the last script, add the following code, which creates the DataTable and populates it with the survey data:

function drawChart() { var data = new google.visualization.DataTable(); data.addColumn(‘string’, ‘CMS’); data.addColumn(‘number’, ‘Preferenze’); data.addRows([ [‘WordPress’, 659], [‘Joomla!’, 186], [‘Drupal’, 79], [‘Typo3’, 31], [‘Altro’, 57] ]);

In setOnLoadCallback, the name of the function is drawChart, which appears in parentheses as drawChart. By adding a first column, you indicate the name of a CMS, which are string data; by adding a second column, you indicate the number of preferences; by adding a row for each CMS, you indicate its name and how many preferences it has.

What are Google Charts Configurations?

The configuration options in Google Charts allow you to define properties such as background color, drawing area, and font size, which can be customized down to the smallest detail. The options are really many and vary according to the type of graph, but it isn’t necessary to define them all since the default values in many cases lead to a satisfactory result.

Related: Link Spam Update

Within the drawChart() function, add the following line to define the pie chart’s title:

var options = {‘title’:’Sondaggio: il CMS preferito dagli utenti’};

The last line of the script allows you to draw a graph by specifying its type, the element that will host it and the options to combine:

var pie = new google.visualization.PieChart(document.getElementById(‘pie_div’)); pie.draw(data, options); }

The last parenthesis is used to close the function. To insert the graph, simply create an element with id=”pie_div”:

<div id=”pie_div”></div>

Types of Google Charts

There are 29 types of charts provided by Google, including word trees, geocharts, timelines, and tables. Simply load the individual packages (library files) to use them.

CoreChart is a free tool that lets you draw Pie Charts, Bar Charts, and Column Charts. In the case of adding the survey data table, after loading the table library and populating the DataTable, all you have to do is draw the table and add the div containing it to the script.

var table = new google.visualization.Table(document.getElementById(‘table_div’)); table.draw(data);

Then add the div with the element id=”table_div”:

<div id=”table_div”></div>

The script can be integrated with the following code if you want to insert a link to the png image of the cake:

google.visualization.events.addListener(pie, 'ready', function () { pie_div.innerHTML = '<img src="' + pie.getImageURI() + '">'; }); document.getElementById('pie_png').outerHTML = '<a href="' + pie.getImageURI() + '">Salva il grafico</a>';

Then add the id=”pie_png” element as follows:

<div id=’pie_png’></div>

I have included the pie chart and a link to save the PNG in the page body along with the data table:

<div id="pie_div"></div> <div id="pie_png"></div> <div id="table_div"></div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.0', {'packages':['corechart','table']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'CMS'); data.addColumn('number', 'Preferenze'); data.addRows([ ['WordPress', 659], ['Joomla!', 186], ['Drupal', 79], ['Typo3', 31], ['Altro', 57] ]); var options = {'title':'Sondaggio: il CMS preferito dagli utenti'}; var pie = new google.visualization.PieChart(document.getElementById('pie_div')); pie.draw(data, options); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data); google.visualization.events.addListener(pie, 'ready', function () { pie_div.innerHTML = '<img src="' + pie.getImageURI() + '">'; }); document.getElementById('pie_png').outerHTML = '<a href="' + pie.getImageURI() + '">Salva il grafico</a>'; } </script>