DataView does not change data values, but instead designates which columns are to be viewed in the chart. It is also possible to specify particular rows as viewable. Both row and column views can be set manually by designating them directly in the view, or programmatically through other decision processes. The following example is a view intended to only show the age group categories and corresponding population numbers for males from the 2010 Chicago Census data. The code for creating and drawing the view itself is included here, but note in the live example the data in DataTable does not change in order to create the view.

// Make a view of only age groups and males
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0,1]);
// Draw a table with the new view
var table = new google.visualization.Table(document.getElementById('table'));
table.draw(dataView, {width: 400, height: 200});
// Draw a chart with the new view
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(dataView, {width: 400, height: 200});

Here we designated the columns to be viewed by using the setColumns function of DataView and set the configuration to a variable. Next, the new variable containing the view information is used to create a chart. In the preceding code snippet, the new view, dataView, is used to create a table in addition to a chart. The titles of the new view are defined as ordinary HTML. The resulting visualization is as follows:

For both horizontal and vertical chart axes, there are several basic customization options. Just as with other chart customizations, the axes are modified through the chart.draw() function. To modify the horizontal axis, the hAxis option of chart.draw() is used. Similarly, to format the vertical axis, vAxis of chart.draw() is implemented. For example, in order to set the horizontal axis title to "Age Groups" on the Census Area Chart, the following option would be listed in the AreaChart.draw() function:

hAxis: {title: 'Age Groups'}

To discuss advanced axis options, it is important to first understand several terms associated with axes. Firstly, axes can be defined as discrete or continuous. A discrete axis is one that has values that are defined into categories or groups. These groups are also evenly spaced. The Chicago Census data has a column of a series of age groups, which is interpreted as a discrete axis. A continuous axis has an infinite number of values. The population number axis of the Chicago Census is considered a type of continuous axis in this case, even though its values (population) are not truly infinite.

In addition to being either discrete or continuous, an axis can be either major or minor. A major axis is the natural interpretation of the chart. In the Chicago Census example, the age groups make up the major axis because the age groups are the intended primary focus relative to the population count. A minor axis is the secondary element in the graph, in this case being the population per age category. Finally, while the major axis is more likely to be the horizontal axis, this is not necessarily always the case. Other rules to know regarding major/minor and discrete/continuous axes are as follows:

Most axis settings will conform to the type of chart and data represented. However, it is possible to control the type of major axis through the dataView.SetColumns attribute, which was previously used in this chapter to set views. To make an axis discrete, set the type to string inside the dataView.SetColumns attribute.

// Set column 1 to be string
dataView.SetColumns([1, type: 'string' ]);

To convert a discrete axis to continuous, set the type to number, date, datetime, or timeofday.

The arrow formatter creates arrow icons next to values in the table. The arrow is green and points upward when the value in the table cell is above a certain value. Similarly, the arrow is red and points downward when the cell value is below a certain threshold. If the value is equal to the threshold value, no arrow is displayed.

In the following example, the threshold value is set to 0, which is also the default.

To change the threshold value, use the base option available for TableArrowFormat. The following line sets the threshold for comparison to a value 12.

var formatter = new google.visualization.TableArrowFormat({base: 12});

The bar formatter creates a bar-shaped visualization of the value in an adjacent column in the table. Just as with arrow formatters, bar formatters are also able to receive options at the time the formatter object is created. In the following example, a bar formatter is created for the male, female, and total population columns of the Chicago Census 2010 data. A new formatter must be created for each column. The bar colors, size, and maximum value are set using the formatter options available through the API.

<!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: ['table']});
    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.
    var table = new 
    google.visualization.Table(document.getElementById
    ('visualization'));
    
    // Create formatters for each column
    var formatter_male = new 
    google.visualization.TableBarFormat({width: 200, 
    colorPositive: 'blue', max: 276139});
  
    var formatter_female = new 
    google.visualization.TableBarFormat({width: 200, 
    colorPositive: 'blue', max: 276139});
  
    var formatter_both = new 
    google.visualization.TableBarFormat({width: 200, 
    colorPositive: 'green', max: 276139});
      
    // Apply formatter to male, female, & both sexes columnsformatter_male.format(data, 1); 
      formatter_female.format(data, 2);  
      formatter_both.format(data, 3); 

      table.draw(data, {allowHtml: true, 
      alternatingRowStyle: true});
    }
    
    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 1200px; height: 500px;"></div>
</body>
</html>

The following is the resulting visualization from the preceding example code:

The color formatter allows the developer to programmatically set color values for cells in a table visualization. Similar to the capabilities of general spreadsheet applications, cells can also be set to vary in color depending on an assigned mathematical condition. For example, in the following snippet of a table containing the Chicago Census 2010 data, the color of the cell is red with a white font if the number of individuals in that particular group is between 0 and 10000. The same cell is formatted orange with a white font if the number of individuals is between 10001 and 99999.

To display a date in a table, use the DateFormat formatter. The DateFormat Formatter has three options: short, medium, and long. The format option type is set at the time of the creation of the formatter.

var formatter = new google.visualization.DateFormat({formatType:'medium'});

The short, medium, and long types refer to the style in which the date is displayed. The short format is represented only with numbers and the year is truncated to two digits. The medium format uses all four digits of the year and provides the name of the month in its abbreviated form. The long format is the same as the medium format, but the name of the month is spelled out in its entirety.

To indicate special formatting for numbers, the number formatter is used. In the following example, the font color is set based on a positive or negative numerical value.

The number formatter can also be set to indicate a prefix or suffix symbol and provide parentheses for negative values. Formatting is set in a similar manner to other formatters using the options method.

var formatter = 
new google.visualization.TableNumberFormat(
    {prefix: "$", negativeColor: 'red', negativeParens: true});

The purpose of a pattern formatter is to condense two columns of information into a single column for display. This method is particularly useful when creating a table of URL links or mailto links. To create a table with a pattern formatter, select two columns to condense as a display. In the following example, the website name's column and corresponding URL's column are condensed to produce a live link for each site.

The previous sample was created from the following code:

// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
    ['US Census Bureau Links', 'URL'],
    ['Home Page', 'www.census.gov/'],
    ['Research Matters Blog', 
    'researchmatters.blogs.census.gov'],
    ['Random Samplings Blog', 'blogs.census.gov'],
    ]);

// Create and draw the visualization.
var table = new google.visualization.Table(document.getElementById('visualization'));

var formatter = new google.visualization.TablePatternFormat('<a href="http://{1}">{0}</a>'),

formatter.format(data, [0, 1]); // Apply formatter and set the formatted value of the first column.

var view = new google.visualization.DataView(data);
  
view.setColumns([0]); // Create a view with the first column only.
table.draw(view, {allowHtml: true});

Formatting a table into pages is a common practice when a long list of data needs to be presented in a small amount of space. The DataTable object allows for the enabling and customization of paging on table renderings. To convert a basic table into a paged table, add the following option to the table.draw() call.

page: true

Paging configurations may also be further customized. The full API request with the option to restrict the number of items per page to 5 is as follows:

table.draw(data, {allowHtml: true, page: 'enable', pageSize: 5});

Additional format settings can also be included in the options list, including how many rows to display per page (pageSize), the page to display by default (startPage), and paging icons or text to replace the default arrow buttons (pagingSymbols).