Work with Charts

The following sections describe how to work with charts in the Geocortex Inline Designer:

Advanced configuration

Some of the configuration settings described below provide an Advanced option. Enabling this allows you to configure a function that sets the option at runtime, when the view is loaded in a viewer. Functions are not discussed in the following sections. For details, see Advanced Configuration.

 

If you configure style rules, these will override any advanced functions configured to set the display of the chart.

Add and Configure a Chart

  1. In the View panel, in the Bands section, click the band to which you want to add a chart.

    The Band Options panel opens.

  2. On the Band Options panel, in the Charts section, click Add Chart to Band.

    - or -

    In the main workspace area, click the Add Chart to Band button that displays beneath the band.

     

    The Chart Options panel opens.

  3. Configure chart options as described below:

General Chart Options

These options set the basic properties of the chart.

The ID field is not editable. This value is automatically assigned and used internally to identify the chart - for example, it will display in any browser console error messages. You may use this field in advanced functions, if required (see Advanced Configuration).

Chart Type

Use these settings to specify the chart type and configure its display.

Style Rules

The Inline Designer includes a Style Rule builder that makes it easy to create simple functions to control the display of the chart's symbols at runtime.

Each style rule consists of a Boolean conditional expression (if-then statement). At runtime, the expression is evaluated to determine how the symbol displays on the chart.

To create a style rule:

  1. Enable the Use Style Rules option.

  2. Click Add Rule. The Style Rule builder opens.

  3. In the first row, create the comparison expression—the if statement:

    1. In the first drop-down list, select the field whose value will determine the symbol display.

    2. In the second drop-down list, select the appropriate comparison operator.

    3. In the text box, enter the value to be compared with the field value.

      You can enter a discrete value, or you can reference the field whose value will be used at runtime. To do this, use the data context (d) function (for syntax details, see Advanced Configuration).

  4. In the second row, create the outcome of the evaluated expression—the then statement.

    1. In the first drop-down list, select the symbol attribute you want to configure.

    2. Set the attribute property to be applied. This may be color, line width, shape, etc., depending on the attribute selected.

  5. (Optional) To add another comparison expression:

    1. Click .

      A new row is added to the if statement section.

    2. Select AND or OR, as appropriate.

    3. Complete the statement as described above.

  6. Click Apply.

When building complex expressions, we recommend that you enclose sections of the expression in parentheses, to clarify the expression logic and the order in which the expression conditions are evaluated.

Simply click inside the square text boxes at the start and end of the expressions you would like to enclose in parentheses.

 

Tooltip Text Configuration

These options let you configure the tooltip font size and color.

 

By default, the tooltip displays the Y axis value at the current point on the chart. If required, you can configure a text function that sets the tooltip text at runtime, when the view is loaded in the viewer.

Chart Type

Use these settings to specify the chart type and configure its display.

Style Rules

The Inline Designer includes a Style Rule builder that makes it easy to create simple functions to control the display of the chart's symbols at runtime.

Each style rule consists of a Boolean conditional expression (if-then statement). At runtime, the expression is evaluated to determine how the symbol displays on the chart.

To create a style rule:

  1. Enable the Use Style Rules option.

  2. Click Add Rule. The Style Rule builder opens.

  3. In the first row, create the comparison expression—the if statement:

    1. In the first drop-down list, select the field whose value will determine the symbol display.

    2. In the second drop-down list, select the appropriate comparison operator.

    3. In the text box, enter the value to be compared with the field value.

      You can enter a discrete value, or you can reference the field whose value will be used at runtime. To do this, use the data context (d) function (for syntax details, see Advanced Configuration).

  4. In the second row, create the outcome of the evaluated expression—the then statement.

    1. In the first drop-down list, select the symbol attribute you want to configure.

    2. Set the attribute property to be applied. This may be color, line width, shape, etc., depending on the attribute selected.

  5. (Optional) To add another comparison expression:

    1. Click .

      A new row is added to the if statement section.

    2. Select AND or OR, as appropriate.

    3. Complete the statement as described above.

  6. Click Apply.

When building complex expressions, we recommend that you enclose sections of the expression in parentheses, to clarify the expression logic and the order in which the expression conditions are evaluated.

Simply click inside the square text boxes at the start and end of the expressions you would like to enclose in parentheses.

 

Tooltip Text Configuration

These options let you configure the tooltip font size and color.

 

By default, the tooltip displays the Y axis value at the current point on the chart. If required, you can configure a text function that sets the tooltip text at runtime, when the view is loaded in the viewer.

For more on functions, see Advanced Configuration.

Actions

Actions are configured events that users can trigger from a band, chart or feature in an Geocortex Inline view. For example, you might want to create an action that allows the user to print a report from a chart or search for data on the map.

See Work with Actions.

Edit a Chart

  1. In the View panel, the Bands section lists all of the bands configured for the view. Click the band that contains the chart you want to edit.

  2. In the Band Options panel, the Charts section lists all of the charts in the band. Click a chart to open the Chart Options panel.

  3. To edit the chart options, follow the steps outlined in the previous sections:

Delete a Chart

You can delete a chart from the Band Options panel or from the Chart Options panel.

To delete a chart from the Band Options panel:

  1. In the Band Options panel, the Charts section lists all of the charts in the band.

  2. To delete a chart, click Edit Items.

  3. Click the appropriate Delete button.

  4. You will be prompted to confirm the deletion. Click Yes to proceed or No to cancel.

  5. Click Done.

To delete a chart from the Chart Options panel:

  1. In the Band Options panel, the Charts section lists all of the charts in the band. Click a chart to open the Chart Options panel.

  2. In the upper-right corner of the panel, click the More button.

  3. Click Delete.

  4. You will be prompted to confirm the deletion. Click Yes to proceed or No to cancel.

Copy a Chart

  1. In the Band Options panel, the Charts section lists all of the charts in the band.

  2. To copy a chart, click Edit Items.

  3. Click the appropriate Copy button.

     

    The chart is copied to the main Designer workspace and listed in the Charts section of the Band Options panel.

  4. Click Done.