Charting Module

The Charting Module implements the ability to display charts of a feature layer's data in HTML5 viewers. The data can be from the layer's fields or from a data link that is configured for the layer.

Chart example

Charts are configured in Manager. For more information on how to configure charts, see Charting.

It is also possible to display charts for a single feature. For more information, see FeatureDetails Module.

Configuration Properties

The Charting Module requires the Charting library as well as the Mapping.Charting library.

Module

infrastructureLibraryId: The ID of the infrastructure library. By default, this is Charting.
adapters: An array of chart point adapters. Chart point adapters have the following properties:
- type: The fully-qualified type of the chart point adapter. For example, geocortex.essentialsHtmlViewer.mapping.modules.charting.FeatureChartPointAdapter or geocortex.essentialsHtmlViewer.mapping.modules.charting.DataLinkChartPointAdapter.
- source: The source of the chart data. For example, Field or DataLink.
- configuration: An object containing chart point adapter configuration. By default, this is empty.
behaviors: An array of named behaviors that run when an associated event occurs. By default, the behaviors are:
- ChartPointMouseHoverBeginBehavior: A behavior that runs an array of commands when the user hovers the mouse over a chart point. By default, this includes two commands: ClearChartHighlights and HighlightChartFeatureSet.
- ChartPointMouseHoverEndBehavior: A behavior that runs an array of commands when the user stops hovering the mouse over a chart point. By default, this includes the ClearChartHighlights command.
- ChartPointMouseDownBehavior: A behavior that runs an array of commands when the user clicks a chart point. By default, this includes two commands: ShowMap and RunChartFeatureActions.
You can remove or rearrange the commands of any behavior. You can also remove behaviors altogether.

You can add commands to a behavior if the command does not require a parameter, or if the type of the command's parameter matches the parameter of an existing command or the event associated with the behavior. Refer to "Viewer Commands and Events" in Developer Help to determine if the parameters are compatible. Note that private commands and events are not documented.

Adding a new behavior is only recommended for experienced developers.

See Viewer Commands and Events for more information.

Views

ChartingView: No configuration properties

View Models

ChartingViewModel:
- mobileMode: When set to true, the user can only select one chart at a time in the Handheld interface. The default is false. This setting does not affect the Desktop and Tablet interfaces.
- chartingEnabled: To enable charting, set to true. The default is true.
- chartConfiguration: A chart configuration object with the following properties:
  - animationsEnabled: To enable chart animations, set to true. In the Desktop and Tablet interfaces, the default is true. In the Handheld interface, the default is false.
  - gradientsEnabled: To enable chart gradients, set to true. The default is false.
  - interactiveLegendEnabled: To enable interactivity with legend items, set to true. The default is false. When enabled, clicking legend items of pie charts will enable or disable slices of the pie, and clicking legend items of linear charts will toggle the display of corresponding series.
  - pieStartAngle: The angle at which to start pie charts in degrees. The default is 180.
  - renderAs: The format in which to render charts. The default is svg. Possible values include:
    - svg renders the chart as an inline SVG document, if available.
    - vml renders the chart as VML, if available.
    - canvas renders the chart as a Canvas element, if available.
  - chartWidth: The width of charts in pixels. The default is 450.
  - chartHeight: The height of charts in pixels. The default is 220.
- infrastructureLibraryId: The ID of the infrastructure library. By default, this is Charting.
- containerRegionName: The name of the container region in which to host charts. The default is ChartingRegion.
- containerRegionType: The type of the container region in which to host charts. The default is geocortex.framework.ui.DivStackRegionAdapter.
- showXButton: To display a button to close charts, set to true. The default is true.
- defaultViewIcon: The path to an the default charting view icon. The default is Resources/Images/Icons/Toolbar/search-24.png.
- headerIsVisible: To display the charting header, set to true. The default is true.
- showHeaderForStandaloneViews: To display the charting headers for standalone views, set to true. The default is false.
- backButtonOnRootView: To display a back button on the root view, set to true. The default is false.
- showBackButtonAsX: To display the back button as an X, set to true. The default is true.
- showMaximizeButton: To display a maximize button for the container, set to true. The default is true.
- showHostedViews: To display views hosted in this view model, set to true. The default is false.
- resizeY: To allow the container to be vertically resized, set to true. The default is true.
- ordering: A mapping of views and their order ranking, starting with 0. A view with the rank of 0 is the root view of a particular view container. By default, this is empty.

Example - Add a Command with a Parameter to a Behavior

The following example demonstrates adding a new command with a parameter to the behavior, ChartPointMouseHoverBeginBehavior.

To add a command with a parameter to a behavior:

Run an XML editor or text editor as an administrator.
Open one of the viewer configuration files, Desktop.json.js, Tablet.json.js, or Handheld.json.js, in the editor.

By default, the configuration files are here:

C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\[instance]\REST Elements\Sites\[site]\Viewers\[viewer]\VirtualDirectory\Resources\Config\Default\

In the Charting module section, find the behaviors property. Locate the behavior you want to edit, for example, ChartPointMouseHoverBeginBehavior.

{
    "moduleName": "Charting",
    ...
    "configuration": {
        ...
        "behaviors": [
            {   
                "name": "ChartPointMouseHoverBeginBehavior",
                "event": "ChartPointMouseHoverBeginEvent",                            
                "commands": [
                    "ClearChartHighlights",
                    "HighlightChartFeatureSet"
                ]
            },
            ...
        ]
    },
    ...
}

The behavior executes two commands: ClearChartHighlights and HighlightChartFeatureSet.

Refer to Viewer Commands and Events to determine the type of parameter that is associated with these commands. While ClearChartHighlights does not have any parameter, HighlightChartFeatureSet has a parameter of type geocortex.essentialsHtmlViewer.mapping.infrastructure.FeatureSet.
Find a command that you want to add to the behavior that has the same parameter type. For example, ZoomToFeatures.

Add the desired command to the list of commands, separated by a comma. For example:

"commands": [
    "ClearChartHighlights",
    "HighlightChartFeatureSet",
    "ZoomToFeatures"
]

Save the file.