G Suite Business customers can preview App Maker. Ask your domain admin to apply for early access.

Charts

Charts use the Google Visualization API to visually represent your app's data. Charts use a creation wizard, similar to the wizard for form and table widgets. The wizard asks you to choose fields for labels and values to chart. In the Property Editor, data to chart is displayed in the Columns property group. Each column (or equivalent, for example, wedges for a pie chart) has a data property that takes an array as input and builds a chart from it.

Because columns' data properties require arrays, it's often helpful to use projections to create an array from a datasource's items list. For example, in a model with records representing annual historical income tax rates, you could bind a Data column's data property to @datasource.items..TaxRate, which returns an array that contains the TaxRate property of every item in the datasource. Similarly, you could bind the Label column's data property to @datasource.items..Year to display the year of each tax rate.

Usage

Drag a chart onto the page and use the Property Editor to configure its text, appearance, and the data it will display.

Styling

Use chartTitle, chartColors, and other properties in the Property Editor to customize the look of your chart.

Examples

The Charts sample shows how to use Bar, Table, and Pie Charts.

Additional information

The Widget API has more information about styles, properties, methods, and events for Charts: