In many ways, authoring a custom visualization is out of the scope of this book. However, it is worthwhile to be aware of the basic steps required to create a visualization from scratch, just in case a requirement for such a chart arises in the future. The general method of creating new visualizations involves knowledge of the HTML DOM (Document Object Model) and a reasonable amount of comfort working with programming abstraction.

To start, it is best to know some basic terminology that will be encountered when attempting to build a custom chart. As mentioned in Chapter 4, Basic Charts, the Google Visualization API is structured as an inheritance-based model. Classes of functions are realized through programming instances. The Visualization API charts, for example, barchart, geochart, areachart, and so on, become instances of a bundle of code when they are used in a program. In programming, the creation of an instance is taken care of by an element of code called the constructor. In order to build a custom visualization, a constructor, as well as a draw method of the chart must be defined. To build these elements and then translate them into something that an HTML page can understand, the HTML DOM is used. The HTML DOM is an agreed-upon standard for programmatically retrieving, modifying, adding, and deleting HTML elements.

At its simplest definition, a visualization chart is nothing more than a method for telling the HTML page what to do. The API is then just pre-configured with HTML-compatible rules for drawing graphics from data, which are given to the Chart app.

This section is not intended as an in-depth tutorial for HTML DOM object writing. It simply discusses the framework that can be used to manipulate the HTML DOM and encapsulate the functionality as a Google Visualization. This section discusses the ability to create custom chart types.

Building custom visualizations requires additional expertise with the JavaScript HTML DOM. W3Schools provides a nice introduction to working with the DOM.