As mentioned in the HTML framework section of this chapter, the google.load command with the 'controls' package is required in the HTML portion of the visualization code. The following two lines load the JavaScript API into the visualization. The next line is the google.load declaration for the Visualization controls library. Both the JavaScript API library and subsequent controls library must be present in order for visualizations with controls to function.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});

For reference only, to dynamically load chart libraries for a visualization with no controls or dashboard, use the following code:

<script type="text/javascript"src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
</script>

Use the previous code in replacement of the jsapi and google.load lines of a ChartWrapper chart without controls. Once again note this information has been provided for reference only in this section, and will not work properly with charts using dashboards and controls.

As mentioned in Chapter 6, Data Manipulation and Sources, Google Visualizations can accept a variety of data sources. The tradeoff to this flexibility is a translation step that is required when loading data from a data source to a chart. Sometimes the translation is easy yet some must be built, as is the case with using the API DataTable object. Other cases require some additional programming to properly align the data source and the visualization's formatting expectations. A benefit of the ChartWrapper helper function is the built-in streamlined access to several data sources. In particular, ChartWrapper has the ability to handle JSON strings directly. There is also a small assortment of data-related commands in ChartWrapper that can simplify initiating and then querying a data source. The most frequently used commands are as follows:

The declaration and drawing method for ChartWrapper is very similar to the chart.draw() function. In fact, on the surface, the primary difference between the two is simply the organization of the declaration. For example, both chart.draw() and ChartWrapper are set to a variable such that additional methods may be invoked using the variable. In more detail, the difference becomes apparent in the execution of the two methods. The chart.draw() method returns a chart and uses the variable as a reference, where ChartWrapper only uses the variable as a reference to the Chart Wrapper function.

Using chart.draw():

varmychart = new google.visualization.LineChart(document.getElementByID('visualization').
      draw(data, {curveType: "function",
                  width: 500, height: 400}

or, using ChartWrapper:

   var wrapper = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    options: {'curveType': 'function', 
    'width': 500, 'height': 400},
    containerId: 'visualization'
  });
  wrapper.draw();

Both methods produce identical charts. To break down the ChartWrapper declaration even further, the key components of the ChartWrapper declaration are listed as follows:

The setup process for the draw function is:

As an added feature of the ChartWrapper class method, developers are given in-built control to a standard set of messages outputted from ChartWrapper. The message availability is provided in order to enable additional functionality to a visualization application. When working with events, it is important to keep in mind that, in order for any event to occur, the draw() function must have occurred first, as it generates the event messages.

The three types of messages generated by ChartWrapper are:

Google.visualization.events.addListener(wrapper, 'event_type', run_on_event);

// Run this when the 'error' event occurs! 
 
function run_on_event() { 
alert("Chart failed to draw!");  } 
}