Generating Google Charts in Web Viewer

Google deprecated Google Image Charts in 2012. While that API can still be used to create charts with a URL, Google currently recommends that people use the similarly named Google Charts. This blog post will go over how to format data for the Google Charts library and generate a chart within a Web Viewer object.

Classic vs Material

Google Charts offers two versions: Classic and Material. The two versions differ in how charts look and feel, and how customization options are defined. Material charts are redesigns of core charts that follow Material Design guidelines. They offer marked style improvements over Classic charts, and will appear familiar to users of Google products. However, they are currently in beta and do not support all of the features of Classic charts. If you are having trouble implementing a Material chart, make sure that you are not trying to include an unsupported customization option by referencing the open Feature Parity issue.

When you need to use an option that is only available for Classic charts, you can still style your chart like a Material chart by including the “theme : material” option.

DataTables

Information to be charted must be sent as a DataTable. The simplest approaches to generating DataTables within Web Viewer are by combining addColumn() and addRows(), or by using arrayToDataTable().

The addColumn() method requires either a type, or an object describing the column’s type and role. You can optionally pass labels as parameters as well.

In the example below, the x and y axes of a scatter plot are defined by calling data.addColumn(‘number’, ‘Revenue’) and data.addColumn(‘number’, ‘Gross Margin’). The third column is a tooltip, which displays when a user hovers over a datapoint.

Material-Themed Scatter Chart

The addRows() method accepts a nested array as a parameter. In the above example, a FileMaker script was used to assign a list of arrays to global variable $$A. When inspected using Data Viewer, $$A looks like this:

While these two methods do the job, if you are adding more than a few columns it will likely be more helpful to use arrayToDataTable(). This method converts a nested array to a DataTable and can infer the data types of each column, meaning you do not need to manually define them using addColumn().

Material Bar Chart

The global variable $$B referenced in the above code was generated using a FileMaker script and looks like this:

Trying It Out

1. Add a Web Viewer object to a layout and open Web Viewer Setup. Set the website to Custom Web Address and select Specify…
2. Begin your calculation with the following line: “data:text/html;charset=UTF-8,” & “
3. Prepare your own html code or sample code from Google’s Chart Gallery in a text editor. Specifically, replace any double quotes within the html with single quotation marks. This makes inserting FileMaker variables and fields into html code easier, since you can define a block of html between double quotes, concatenate a variable or field, then concatenate another block of html between another pair of double quotes.
4. Following the quotation mark, paste in the prepared html code.
5. End your calculation with a double quotation mark.

Questions?

If you’re interested in integrating Google Charts within a FileMaker solution but could use some more guidance, please feel free to contact us. We have experience with various web services, and have even created a free downloadable FileMaker module, fmMapping, using the Google Maps API.