You can display Google Charts in a Turnkey application by exposing chart data in a ViewModel and rendering it through an Angular component stored in the model's assets; this is for developers extending a Turnkey user interface.

How the integration works

A chart has two parts:

• The ViewModel supplies every value that the chart needs.
• An Angular component loads Google Charts and turns those ViewModel values into a chart.

You connect the two by adding the Angular_Ext_Component tagged value to a ViewModel column. The tag value is the component name. That component name must also be the name of the component folder in the assets.

For example, a dashboard can use a column tagged with Angular_Ext_Component = PerformanceChart. Turnkey then uses the PerformanceChart component for that column, with its files placed in an assets folder named PerformanceChart.

Before you start

Make sure that:

• Your application is a Turnkey application using Angular components.
• The ViewModel that displays the dashboard contains all data required by each chart.
• Google Charts is loaded through the application's Angular script includes.
• You have decided which ViewModel column represents each chart component.

Do not expect the component to retrieve missing chart values from the model on its own. Make the required values available in the ViewModel first.

Prepare the ViewModel data

Create or update the ViewModel used by the dashboard so that it exposes the data required to draw each chart.

1. Identify the ViewModel column that will host each chart.
2. Add the data columns that the component needs to build its chart.
3. Keep supporting data columns in the ViewModel even when you do not want users to see them.
4. Set the Visible expression to false on supporting columns that should not be rendered as ordinary user-interface fields.

For example, a performance chart might need a displayed chart column plus hidden columns that contain category labels and numeric values. The chart component reads the values from the ViewModel, while users see the chart rather than the individual supporting fields.

Add the component tag

For each chart-hosting ViewModel column, set the Angular_Ext_Component tagged value to the component name.

ViewModel column purpose	Angular_Ext_Component value	Required asset folder
Performance chart	PerformanceChart	PerformanceChart
Pie chart	PieChart	PieChart

The names must match. For example, if the tag value is PieChart, create the component files under the PieChart folder. A mismatch prevents Turnkey from finding the intended component.

Add Google Charts to the application

Google Charts must be available before a chart component can create a chart.

1. Open the model assets used by the Turnkey application.
2. Locate or create AppWideAngularScriptIncludes.html.
3. Add the Google Charts script include required by your component.
4. Save the asset.

AppWideAngularScriptIncludes.html is application-wide. Use it for scripts that must be loaded for components in the application rather than placing the Google Charts include separately in every chart component.

Create the chart components

In the model's assets folder, create one folder for each component name used in Angular_Ext_Component.

For the example dashboard, create this structure:

AssetsTK/
  AppWideAngularScriptIncludes.html
  PerformanceChart/
    PerformanceChart.cshtml
    PerformanceChart_module.js
  PieChart/
    PieChart.cshtml
    PieChart_module.js

Create the component markup

Create a .cshtml file in each component folder. The markup supplies the element in which Google Charts draws the chart.

Bind the chart data to ng-model so Angular watches the ViewModel data. When the bound data changes, the component can redraw the chart with the current values.

For example:

• PerformanceChart/PerformanceChart.cshtml contains the markup for the performance chart and binds to the data supplied by its ViewModel column.
• PieChart/PieChart.cshtml contains the corresponding pie-chart markup and binds to its data.

The markup must provide a chart container with a usable size. A chart container without a defined display area cannot show a meaningful chart.

Create the component module

Create a _module.js file in each component folder.

The module is responsible for:

• Registering the Angular component or directive.
• Reading the data bound from the ViewModel.
• Loading or waiting for Google Charts to be ready.
• Converting the ViewModel values to the data format expected by the selected Google chart.
• Drawing the chart in the markup container.
• Redrawing when the watched ng-model data changes.

Keep chart-specific behavior in its component module. For example, PerformanceChart_module.js should draw the performance chart, while PieChart_module.js should draw the pie chart.

Test the dashboard

1. Save the ViewModel and all assets.
2. Start or refresh the Turnkey application.
3. Navigate to the ViewModel that contains the dashboard.
4. Confirm that the chart-hosting column renders the intended component.
5. Change data that is exposed by the ViewModel and confirm that the chart updates.
6. Confirm that hidden supporting columns remain available to the component but are not shown as ordinary fields.

If no chart appears, check these items in order:

1. The ViewModel column has an Angular_Ext_Component tag.
2. The tag value exactly matches the component folder name.
3. The component markup and module files use that same component name.
4. Google Charts is included in AppWideAngularScriptIncludes.html.
5. The ViewModel exposes all values used by the chart.
6. The chart container has a visible size.

Design guidance

Use a ViewModel as the contract between the model and the chart component. This keeps chart rendering in the Angular asset while model logic continues to prepare the values.

For charts with several data series, include an explicit dimension and value for each point. In common chart terminology, the dimension is normally the x-axis value and the numeric value is normally the y-axis value. A series identifier lets the chart distinguish multiple plotted series, such as actual and budget values.

For small graphical indicators, consider whether an SVG-based widget is a better fit than loading an external chart library. Use a chart component when the chart interaction or chart type requires it; use a smaller rendering approach when the graphic is limited to a compact indicator.

Related component integration

The same asset-and-tag pattern is used for other external Angular components. Google Map with Turnkey shows a related example where a ViewModel column is connected to a component through Angular_Ext_Component.

See also

• Documentation:Google Map with Turnkey
• Documentation:Complete model examples
• HowTos:Google Analytics in Turnkey app
• Documentation:Google tag manager