With the general structure of visualization application established for both HTML-based and App Script apps, data and rendering code can now be added. For now, the data used in each sample is created within the script for purposes of illustration. In Chapter 6, Data Manipulation and Sources, data source connectivity outside the API script will be addressed. However, the following high-level logic for creating a visualization remains the same.
Logical steps to create a visualization are as follows:
For the majority of developers, the most recognizable method of development is in a HTML context. For HTML, the Google Code Playground is perhaps the best development platform for newcomers.
Using the Google Code Playground, the following code renders the 2010 Chicago Census data used in the previous chapter examples.
function drawVisualization() {// Create and populate the data table.var data = google.visualization.arrayToDataTable([['Age', 'Male', 'Female', 'Both Sexes'],
['Under 5 years', 94100, 91787, 185887],
['5 to 9 years', 84122, 81955, 166077],
['10 to 14 years', 83274, 81192, 164466],
['15 to 19 years', 91528, 91405, 182933],
['20 to 24 years', 108407, 114620, 223027],
['25 to 29 years', 134931, 141208, 276139],
['30 to 34 years', 119828, 119584, 239412],
['35 to 39 years', 100651, 99857, 200508],
['40 to 44 years', 89957, 87674, 177631],
['45 to 49 years', 85645, 86217, 171862],
['50 to 54 years', 80838, 86037, 166875],
['55 to 59 years', 68441, 76170, 144611],
['60 to 64 years', 54592, 63646, 118238],
['65 to 69 years', 37704, 47366, 85070],
['70 to 74 years', 27787, 38238, 66025],
['75 to 79 years', 20448, 30252, 50700],
['80 to 84 years', 14637, 24467, 39104],
['85 to 89 years', 7842, 16548, 24390],
['90 years and over',3340, 9303, 12643]
]);
// Create and draw the visualization.
new google.visualization.AreaChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 600, height: 400,
vAxis: {title: 'Population'},
hAxis: {title: 'Age Groups'}
);
}First, in the drawVisualization function, a data variable is created to house the census data. Next, the data variable is passed to the chart.draw() method and is rendered via the API. With the call to draw the visualization, additional formatting parameters are included at the same time.
Finally, in its HTML form entirety, the Area Chart visualization of the 2010 Chicago Census data looks like the following code:
<!--You are free to copy and use this sample in accordance with the terms of theApache license (http://www.apache.org/licenses/LICENSE-2.0.html)--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Age', 'Male', 'Female', 'Both Sexes'],
['Under 5 years', 94100, 91787, 185887],
['5 to 9 years', 84122, 81955, 166077],
['10 to 14 years', 83274, 81192, 164466],
['15 to 19 years', 91528, 91405, 182933],
['20 to 24 years', 108407, 114620, 223027],
['25 to 29 years', 134931, 141208, 276139],
['30 to 34 years', 119828, 119584, 239412],
['35 to 39 years', 100651, 99857, 200508],
['40 to 44 years', 89957, 87674, 177631],
['45 to 49 years', 85645, 86217, 171862],
['50 to 54 years', 80838, 86037, 166875],
['55 to 59 years', 68441, 76170, 144611],
['60 to 64 years', 54592, 63646, 118238],
['65 to 69 years', 37704, 47366, 85070],
['70 to 74 years', 27787, 38238, 66025],
['75 to 79 years', 20448, 30252, 50700],
['80 to 84 years', 14637, 24467, 39104],
['85 to 89 years', 7842, 16548, 24390],
['90 years and over',3340, 9303, 12643]
]);
// Create and draw the visualization.
new google.visualization.AreaChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 600, height: 400,
title:'Chicago Population by Age and Sex - 2010 Census',
vAxis: {title: 'Population'},
hAxis: {title: 'Age Groups'}
}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 500px; height: 400px;"></div>
</body>
</html>For additional chart.draw() configuration options using AreaChart, check the following link:
https://developers.google.com/chart/interactive/docs/gallery/areachart#Configuration_Options
If the documentation style used by Google is unfamiliar, refer to the following image as an aid.
The Visualization API and Google APIs in general follow the preceding documentation convention.
For an Apps Script visualization of the same 2010 Census data, similar but equivalent API calls are used to create a data variable and then render the data as an area chart.
functiondoGet() {
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "Age")
.addColumn(Charts.ColumnType.NUMBER, "Male")
.addColumn(Charts.ColumnType.NUMBER, "Female")
.addColumn(Charts.ColumnType.NUMBER, "Both Sexes")
.addRow(['Under 5 years', 94100, 91787, 185887])
.addRow(['5 to 9 years', 84122, 81955, 166077])
.addRow(['10 to 14 years', 83274, 81192, 164466])
.addRow(['15 to 19 years', 91528, 91405, 182933])
.addRow(['20 to 24 years', 108407, 114620, 223027])
.addRow(['25 to 29 years', 134931, 141208, 276139])
.addRow(['30 to 34 years', 119828, 119584, 239412])
.addRow(['35 to 39 years', 100651, 99857, 200508])
.addRow(['40 to 44 years', 89957, 87674, 177631])
.addRow(['45 to 49 years', 85645, 86217, 171862])
.addRow(['50 to 54 years', 80838, 86037, 166875])
.addRow(['55 to 59 years', 68441, 76170, 144611])
.addRow(['60 to 64 years', 54592, 63646 118238])
.addRow(['65 to 69 years', 37704, 47366, 85070])
.addRow(['70 to 74 years', 27787, 38238, 66025])
.addRow(['75 to 79 years', 20448, 30252, 50700])
.addRow(['80 to 84 years', 14637, 24467, 39104])
.addRow(['85 to 89 years', 7842, 16548, 24390])
.addRow(['90 years and over', 3340, 9303, 12643])
.build();
var chart = Charts.newAreaChart()
.setDataTable(data)
.setDimensions(600, 400)
.setXAxisTitle("Age Groups")
.setYAxisTitle("Population")
.setTitle("Chicago Population by Age and Sex - 2010 Census")
.build();
varui = UiApp.createApplication();
ui.add(chart);
returnui;
}The purpose of illustrating equivalent methods through both the HTML and Apps Script example is to demonstrate that there is no single method of coding a visualization. Instead, there are multiple options available. Choosing an option becomes dependent on the overall application purpose.