2022 June Release

Control FSCHIGHCHARTS@1.1001:CTRLHighcharts Permanent link for this heading

This control is used to visualize data using the Highcharts control library.
For documentation of possible charts and options please see http://api.highcharts.com/highcharts. The information that should be visualized is provided by an aggregate list. The first member of an aggregate in that aggregate list defines the name and behavior of the x axis for visualization.
  1. If the first member is an integer, a float, or a datetime, the values of this member determine the position of the other members on the x axis.
  2. If the first member is a string, an enumeration, or an object, the values of this member determine discrete categories on the x axis.
  3. If the aggregate has only one (scalar) member, the values of this member are used as values for the chart.
  4. If the first (and only) member is an aggregate, then the members of the sub-aggregates determine the values for the chart in multiple dimensions. Each member in the sub-aggregate corresponds to one dimension.
When using rule 1 or rule 2, the series data for the chart can be provided in two ways:
  • If a remaining member of the aggregate is of type integer, float, or datetime, the name of the member is used as the name of the series and the value of the member is the data point in the series.
  • If a remaining member of the aggregate is a sub-aggregate list, then the first member of that sub-aggregate describes the name of the series, and the second member contains the data point. The name of the series is only taken from the first entry, the first member of the sub-aggregate is ignored for subsequent entries. Therefore, the order of the sub-aggregate list in such a member must be the same for all values.
The type of the chart and additional options of the chart are supplied via the controloptions expression. The list of all possible options is available via http://api.highcharts.com/highcharts. To meet the requirements of the Web Content Accessibility Guidelines 2.1 Level AA the following aspects need to be considered when using Highcharts:
  • A contrast ratio of 3:1 (foreground to background) when using colors in charts.
    Note: Using brighter colors (e.g. tints or yellow) requires to set a black border.
  • Line and area charts need a marker in the explore view.
  • Only stacked area charts may be used.
The following code snippets can be used to meet the requirements of WCAG 2.1:

Example:
// Bar chart
bar: {
  ...,
  borderColor: '#000000',
  ...
}
// Column chart
column: {
  ...,
  borderColor: '#000000',
  ...
}
// Pie chart
pie: {
  ...,
  borderColor: '#000000',
  ...
}
// Line chart
plotOptions: {
...
  series: {
  marker: { enabled : (::isdashboard ? "false" : "true")},
...
}
// Area chart
plotOptions: {
...
  series: {
  marker: { enabled : (::isdashboard ? "false" : "true")},
...
},
area: {
  ...,
  stacking: 'normal',
  lineColor: '#000000',
  ...
},
series: [{
  ...,
  marker: {
    fillColor: '#000000'
  },
  ...
}
The following example generates a standard line chart using an aggregate list. The first member (hcday) defines the values on the x axis.
struct HighchartsTemperature {
  datetime hcday;
  float hctemplinz;
  float hctempvienna;
  float hctempsalzburg;
  float hctempbregenz;
}

fields {
  HighchartsTemperature[] hctemperature;
}
The following example fills the data for the sample using the aggregate list:

Example:
formpage PageHighchartsTemperature {
  formpageisposterwidget = true;
  dataset {
    field hctemperature {
      get = expression {
        boolean ::isdashboard;
        HighchartsTemperature[] hctemperaturevalue = [];
        datetime date = coonow - 365 * 86400;
        integer increment = (::isdashboard ? 14 : 1);
        for (integer i = 0; i < 365; i += increment) {
          hctemperaturevalue += {
            hcday: date,
            hctemplinz: ...,
            hctempvienna: ...,
            hctempsalzburg: ...,
            hctempbregenz: ...
          };
          date += increment * 86400;
        }
        return hctemperaturevalue;
      }
    }
  }
  layout {
    row {
      CTRLHighcharts hctemperature {
        colspan = 4;
        labelvisible = false;
        controloptions = expression {
          return {
            chart: {
              type: "line",
              zoomType: "x"
            },
            legend: {
              enabled: true
            },
            plotOptions: {
              line: {
                marker: { enabled : (::isdashboard ? "false" :
                                      "true")}
              }
            },
            xAxis: {
              title: { text: null }
            },
            yAxis: {
              title: { text: null },
              allowDecimals: true
            }
          }
        }
      }
    }
  }
}
Control option:
  • clickApplication (object): Defines an application which is started when a point inside the chart is clicked. The application will be executed in a new transaction.
    It is recommended to use read-only applications.
    The parameters passed to this application are defined by the application prototype HighchartsClickPrototype.

FSCHIGHCHARTS@1.1001:CTRLHighcharts()

Additional Information