Skip to content

Charting Tools

What is the Charting Tool?

The Chart plugin provides a map-based charting tool that enables the visualization of one of the most common time series data in a spatial context, i.e. time series monitoring data available on specific sites such as weather stations, or in fixed regions such as watersheds. With the distribution of the sites or regions represented as a map service, the Charting Tool enables the creation of a Line Chart or Bar Chart for the time series data by sites/regions. This time series dataset may contain more than one variable, which can be charted accordingly by both the Line and Bar Chart.

Figure 32: a) Line Chart showing the concentration of Fecal Coliforms per 100 ml samples over time for a shellfish site selected from the shellfish monitoring map; b) map showing shellfish monitoring sites.

Figure 32 shows an example of map-based charts for time series visualization. The Line Chart shows data collected for one of the shellfish sites under monitoring across Canada. By clicking a monitoring site on the Shellfish Monitoring Map below, the user will see the Chart pop up. The sliders for the X and Y Axis allow the user to filter results to show specific value ranges or time ranges respectively. More information on the data source can be found from the metadata.

Figure 33: a) Bar Chart showing the sample results in 2013, 2015 and 2016 for four parameters on one of the Independent Environmental Monitoring Stations in Canada by Canadian Nuclear Safety Commission; b) Map representing the distribution of the monitor stations.

An example of a Bar chart is provided in Figure 33 representing data collected from one of the Independent Environmental Monitoring Stations. The data verify that the public and environment around CNSC-regulated nuclear facilities are not adversely affected by releases to the environment. More information on the data source can be found from the metadata.

In addition, the Charting plugin supports Pie Chart, which may be used to visualize non-time series data.

When to use it?

Line Chart

If you have a map service created to represent monitoring sites or fixed regions and if time series data is available over each site or region, the Line Chart is the preferred choice for visualizing the time series data for several reasons:

  • The advantage of showing trends of change, which is often of central interest for monitoring;
  • The ability to show a long series of observations;
  • The capacity to include a good number of lines each corresponding to a variable; and
  • The capability to show the trend of a variable in comparison with that of other variables.
Figure 34: Line Chart showing concentration of Fecal Coliforms per 100 ml on a monitoring site; underneath the Chart is the map showing shellfish monitoring sites across Canada

In this example Figure 34, the Line Chart was used to visualize the time series data from data collected from Shellfish Sites. The data is dynamically represented in a rendered line chart where the user can use the onscreen slider to dynamically manipulate the data. The Line Chart supports a slider to filter results by the date or by the results.

Bar Chart

The Bar Chart is preferred to Line Chart when the site/region-based time series data has sparse observations, for example, three observations or even less. A Bar Chart in this case can be used with each observation represented by a bar, and successive bars to show the changes over time.

Figure 35: Bar Chart for a monitoring station, popped up when the user clicks on a monitoring station of the Independent Environmental Monitoring Stations map (underneath the Bar Chart).

In this use case (Figure 35), the map-based bar chart tool was used to visualize the Independent Environmental Monitoring Station time series data. The collected parameters was used along the x-axis while the y-axis represents the collected sample results. The year of data collection was used as the variables (i.e. 2013, 2015, 2016). Bar Chart was preferred to Line Chart for visualization of this dataset due to the limited timestamps available. More information on this dataset can be found in the metadata.

How to use it - A use case

Using the Shellfish Monitoring data for a use case, we illustrate how to use the Charting plugin to create map-based Line Charts. This dataset provides marine bacteriological water quality observations for bivalve shellfish harvest areas in Canada (British Columbia, New Brunswick, Newfoundland, Nova Scotia, Prince Edward Island and Quebec).

Preparing the Data

Linked Tables

Linked Tables refers to using two or more tables that share the same field. This data structure establishes a relationship between the datasets through which a single table containing all the parameters and values is related to the reference data. In the use case example, Shellfish Water Classification Program, the data structure of this dataset reveals that relationship tables are used. The layer “Marine Water Quality Data” is linked to the “Samples_Echantillons_National” table by the “Site” field (Figure 36). Starting from the layer, the Charting plugin is automatically directed to access this related table and pulls the required time series data to generate the appropriate chart.

Figure 36: Shellfish Water Classification Program map service endpoint showing layers, linked tables and relationship tables data structure

Data Structure

Data structure here refers to the organization of the data file for use by the Chart plugin. It takes into consideration linked tables and efficient access and modifications of data. The Charting plugin supports three options of data structure.

Option 1

Following the same structure as the use case example (Figure 36), the data can be organized using linked tables. The map service has the layer “Marine Water Quality Data” is linked to the “Samples_Echantillons_National” table by the “Site” field (Figure 37). It can be seen that the “Site” name serves as the unique identifier linking the layer and the table, and the bracketed numbers in Figure 37 (b) refer to the number of observations on each monitoring site. The “Date” field contains the date of the observations and the “FC_MPN_CF_NPP_100_mL” field has the recorded values.

Figure 37: Data structure for Option 1 – a) Layer table with references to linked table highlighted, b) Linked table with reference to layer table and time series data highlighted

Option 2

Where a large number of parameters are observed on a site, you may use Option 2 to organize your data for use by the Charting plugin. Similar to option 1, the data is mapped as a layer and linked to a table that holds the records of time series observations (Figure 38 (a)). The difference from the previous use case is that there is a large number of parameters being observed, as shown in Tested substances of Figure 38 (b). In this case, the time series data can be organized in a manner to avoid making the linked table too wide.

As shown in Figure 38 (b), there is now one field that lists all the parameters [“VARIABLE_NAME”], a field that lists the corresponding data value [VALUE_VALEUR], a field that lists the corresponding dates [DATE] and likewise the units of the values [UNIT_UNITE]. The table starts with listing all the parameters with dates and monitoring sites repeating, then all the dates of observations with monitoring sites repeating, and finally all the monitoring sites.

Figure 38: Data Structure Option 2 – a) Layer table with references to linked table highlighted, b) Linked table with reference to layer table and time series data highlighted

Option 3

Organizing the time series data where fields are created by concatenating the data into one field as inline text. This structure requires that the data be formatted in a specific way. Each field to be charted is required to have the data listed and separated using parenthesis and commas. (Figure 39). If your data is not already in this format, this data structure will require a detailed workflow to get the data in this format.

This method is not recommended because it requires a structured workflow to concatenate the data in a new field to meet the requirements. Each parameter observed would require a new field to be created. However, if there are constraints in the data which require and suits this data structure it is available to be used for charting.

Figure 39: Data structure for Option 3

Configuring the Line Chart

Before you begin, Ensure that all Layers to be used should be configured in Authoring tool under the Map Tab. (See Section: Using the Authoring Tool to Configure a Plugin – Adding a new layer)

Step 1. Enable Charting plugin.

Navigate to the Plugins section in the FGP Authoring Tool. Under the Charts tab, click on Enable.

Figure 40: Line Chart - Enable

Step 2. Define Axis Labels

  1. Choose the “Type” and set the Title for the X-Axis. Under the “Type”, choose the option that best suits the intended use case.

    1. Date – If set, the expected format of the date data would be in the form of Year-Month-Day or follow a similar convention. (e.g., YYYY-MM-DD; DD-MM-YYYY)

    2. Linear – If set, the expected format of the date data would be linear (e.g., YYYY)

In the use case example, the “Type” is set to Date (Figure 41).

  1. Set the “Type” and Title for the Y-Axis Under the “Type” the only option available is Linear (Figure 41).
Figure 41: Line Chart - Axis Labels

Step 3. Select Layer

  1. Layer ID - Under the Layer Id, select the layer with which the plugin will work. The layer Id is automatically generated when adding a map service to the Authoring Tool. Each layer will have a unique Id generated. Ensure that the layer to be used is being selected. In the use case, this layer is “Shellfish Sites” (Figure 42).

  2. Name Field – Choose a corresponding field to be used to identify with the generated Charting visualization. In the use case, the “Site” field was used to identify what site data is being displayed.

  3. Chart Data Type – Choose the best option that relates to the data structure used for the dataset. In the use case, Link was used because the data structure uses Linked Tables.

  4. Link URL – If the link is set as the Chart Data Type, provide the URL link of the linked table. This can be found on the map service page. In the use case, the URL link for the Linked table was provided.

  5. Link Field – If Link is set as the Chart Data Type, provide the common field used for the relationship between the tables. In the use case, the “Site” field was the relationship field

Figure 42: Line Chart – Layers

Step 4. Configure Data Parameters (Figure 43)

  1. Type of Link – Choose the type that reflects how the data is structured.

    1. Single – Choose this If the data structure of your data follows Option 1 (see Preparing data), i.e. the names of parameters being observed are shown only at the top of the linked table. This is the case for the Shellfish use case. See Preparing the data - Option 1 for more details.
    2. Multi – Select this If Option 2 applies to your data, i.e., there is one field of the linked table having parameter names as the values. one field with the date and one field with the results. See Preparing the data – Option 2.

  2. Link Field – Provide the name of the field that links the layer and the linked table

  3. Date Field – Provide the field name that corresponds to the “Date” field of the linked table. In the use case, this field name was “Date”.

  4. Label Values – If the “Type of Link” was set to multi, provide the field name that corresponds to the units of measure. Otherwise, this remains empty. In the use case, this was left empty because the “Type of Link” was set to “Single”

  5. Measure Field – Provide the field name that corresponds to the data to be displayed by the Chart. In the use case, the field name used was ”FC_MPN_CF_NPP_100_mL”. Note that the exact field name must be used.

  6. Prefix – If required, provide a prefix to be displayed when the user hovers over the data. In this use case, when the user hovers the mouse over the chart data, “Concentration” will be used as the prefix before displaying the value.

  7. Suffix - If required, provide a suffix to be displayed when the user hovers over the data. In this use case, when the user hovers the mouse over the chart data, “by 100 / ml” will be used as the suffix after displaying the value.

Optional, if more data Fields are required to be displayed, click on the Add button (Figure 43) to add a new data parameter and repeat the steps to configure.

Figure 43: Line Chart – Data

Step 5. Details Option

Optionally (Figure 44), under the “Details” parameter, the details panel can be customized. Using the markdown notation, it is possible to provide customized additional information in the details panel. An example can be found here

Figure 44: Line Chart - Custom Details Parameter

Definition of parameters

Listed in the following table are the definitions of all the parameters available when using the FGP Authoring Tool to configure the Charting plugin.

Parameters Description
General Type Determines the type of chart to be created. This includes a pie chart, bar chart or line chart
Title Determines the chart title to be displayed
Options Datasets Colors An option to include hexadecimal color values to use to display the chart
Label Axis Type Determines the type of label to be used. The label names can be retrieved from a field from the layer (Linear or Date for line chart) or configuration. (Linear or Date) for the line chart.
Title Determines the title name to be used for the different axis
Layers Id Determines the layer id as defined in the layer section.
Name Field Determines the field used to identify the data being displayed by the chart.
Chart Data Type Determines the type of data to be expected by the Charting plugin (Inline, Link).
  1. Inline – Data structure using Inline Text. See Preparing data for more information
  2. Link – Data is structured using Linked Tables. See Preparing data for more information
Link URL Determines the URL for the linked Table. This is only required if the “Chart Data Type” is set to “Link”
Link Field Determines the field name that links the layer to the data table. This is only required if the “Chart Data Type” is set to “Link”
Data Determines the different parameters for the layer to use to create the chart
  1. Type of Link – Determines the type of data structure to expect. This is based on how the data is structured inside the link table
    1. Single – For option 1. See Preparing your data for more information
    2. Multi – For option 2. See Preparing your data for more information
  2. Link Field – Determines the field used to link the relationship between layer and table.
  3. Date Field – Determines the field used for time series dates.
  4. Label Values – Determines the field corresponding to the unit labels for the parameters if available..
  5. Measure Field – Determines the field corresponding to the time series collected results to create the chart. Note the field name must be used and not the field alias.
  6. Prefix – Determines the prefix to be added to the data hover
  7. Suffix – Determines the suffix to be added to the data hover
Details Specifies if the details panel should be customized. Custom details can be included using the markdown notation.