Line Chart Widget
A line chart widget based on the g2plot library.
Usage
Allows displaying of time series data with one or more series (lines) on the y axis. The value in XAxisField must be a date (represented as either a string or a timestamp). The XAxisFormat can be used to format the way the date is displayed on the chart.
Properties
| Property | Type | Binding | Default | Description |
|---|---|---|---|---|
| Template | STRING | < | Template1 | This will be the template used for the widget styling. |
| HoverGroup | STRING | Can be set to any string. All charts with the same value for HoverGroup will display their tooltips whenever the mouse pointer moves over any of the charts in the group. | ||
| Renderer | STRING | canvas | Set the render way to canvas or svg | |
| Data | INFOTABLE | < | Chart data source. | |
| XAxisField | FIELDNAME | Name of the column in the Data infotable containing the values of the X axis. | ||
| Annotations | INFOTABLE | < | Annotations data source. | |
| AnnotationTimestampField | FIELDNAME | Name of the column in the Annotations infotable containing the annotation's timestamp value, used for determining where to place the annotation on the X axis. | ||
| AnnotationYField | FIELDNAME | Name of the column in the Annotations infotable containing the annotation's Y value, used for determining where to place the annotation on the Y axis. | ||
| AnnotationIconField | FIELDNAME | Name of the column in the Annotations infotable containing the IQNOX icon URI, used for determining how the annotation is rendered. | ||
| AnnotationDescriptionField | FIELDNAME | Name of the column in the Annotations infotable containing annotation's description, used for displaying additional information when hovering on the icon. If it is not provided, the annotation will not show any description on hover. | ||
| AnnotationColorField | FIELDNAME | Name of the column in the Annotations infotable containing annotation's color, used for controlling which color the icon font is rendered with. If it is not provided for an annotation, the chart will fall back to displaying it in the color selected in the template configuration. | ||
| HighResolutionData | INFOTABLE | < | A subset of the data that represents a higher resolution data that should be displayed at the current zoom level | |
| YAxisFields | STRING | < | A comma separated string representing the name of the data fields corresponding to the graph in the y direction, usually the fields corresponding to the vertical coordinate axis. | |
| Labels | STRING(localized) | < | A comma separated string representing the user facing names of the fields in YAxisFields. The items should be in the same order. | |
| XAxisFormat | STRING(localized) | Localizable token in order to format the values of the X axis. See Format Complex . | ||
| YAxisMax(1) | STRING | < | Determines the maximum value displayed on the Y axis. | |
| YAxisMin(1) | STRING | < | Determines the minimum value displayed on the Y axis. | |
| YAxisScaleOnZoom | STRING | false | When enabled, this causes the Y axis to scale to the visible data when zooming. When disabled, the Y axis remains scaled to the complete data set. | |
| XAxisType(2) | STRING | time | X axis meta option Type | |
| YAxisFormat | STRING(localized) | Localizable token in order to format the values of the Y axis label. (It will not format the values displayed in the tooltip, see YAxisFormats for that) | ||
| YAxisFormats | STRING(localized) | < | Localizable tokens specified in a CSV format in order to format the values of the Y axis that are displayed on the chart's tooltip. | |
| Interpolation(3) | STRING(localized) | < | This property controls which interpolation is used. | |
| StartDate | DATETIME | <> | The timestamp representing the start date of the chart. | |
| EndDate | DATETIME | <> | The timestamp representing the end date of the chart. | |
| ZoomStart | DATETIME | <> | The timestamp representing the start of the current zoom position. | |
| ZoomEnd | DATETIME | <> | The timestamp representing the end of the current zoom position. | |
| ZoomLevel | NUMBER | > | A property that indicates the percent of the dataset is currently visible. | |
| ZoomEventDebounceInterval | NUMBER | 500 | Controls how many milliseconds to wait between zoom events before triggering the ZoomLevelDidChange event. |
Events
| Property | Type | Binding | Description |
|---|---|---|---|
| ZoomLevelDidChange | EVENT | > | An event that is triggered when the zoom level or position changes. |
Additional explanations
YAxisFields and YAxisFormats
As described above, the YAxisFields is a comma separated string representing the name of the y axis data fields and the YAxisFormats is a comma separated string representing the localization tokens to format the YAxisFields in the order they were introduced (if we have YAxisFields: a, b, c and YAxisFormats: [[f1]], [[f2]], [[f3]], [[f1]] will format field a, [[f2]] will format field b, and [[f3]] will format field c).
(1) This may either be a specific number, an expression like [+10]/[-10] to add a fixed amount to the maximum value, an expression like [+10%]/[-10%] to add a percentage of the data interval or blank to automatically determine the maximum value from the data set.
(2) XAxisType can have the following values:Cat, TimeCat, Linear, Time, Log, Pow, Quantize, Quantile, Identity
(3) Interpolation can have the following values:
Linear- Indicates that the chart is using a linear interpolation, where two adjacent data points are connected via a straight line.StepBefore- Indicates that the chart is using a step-before interpolation, where the value instantly increases from one point to the value of the next point.StepAfter- Indicates that the chart is using a step-after interpolation, where the value instantly increases from one point to the value of the previous point.
HoverGroup
Is a string, and charts that have the same value for this property all get a tool tip at the same time when one of them is hovered. Additionally when one of the charts is zoomed, all other charts are also zoomed.
HighResolutionData, ZoomStart, ZoomEnd, ZoomLevel and ZoomLevelDidChange
This properties are used together to enable developers to load the data set with fewer points initially but then load a higher resolution part of the data when the user zooms. They are generally used as follows:
- ZoomLevelDidChange is invoked whenever the user zooms on the chart and can be used to trigger the service that retrieves the higher resolution data
- ZoomLevel is used to obtain the zoom percent on the chart and can be used together with ZoomLevelDidChange and a validator or script widget to control the zoom level for which higher resolution data is displayed. The following example shows a validator that loads higher resolution data when the zoom percent is lower than 0.5 (meaning a zoom of over 200%).
- ZoomStart and ZoomEnd represent a start and end timestamp of the data that is displayed at the current zoom level and position. They can be used with a service that returns higher resolution data to determent the interval for which to return the data
- HighResolutionData is a property on the chart that the data from the higher resolution service should be bound to. Whenever data is provided to this property the chart will replace a slice of the data with the higher resolution data bound. The slice that is replaced depends on the interval returned by that service and will be cached and reused whenever the user zooms back in. The data is used at the current zoom level and higher. When the user zooms out the chart will automatically display the lower resolution data again.
The following example shows how binding could be used for this properties.
State formatter on Line chart
State formatting is the concept of varying the visual styling of a widget depending on the data.
State formatting is done by creating formatting rules. A formatting rule is made up of two parts:
- conditions: A "filter" clause built out using an UI query builder, with support for nested AND/OR groups, that represents what conditions the data must match in order for the formatting to be applied. Conditions can reference any of the columns of the data that was bound into the widget.
- formatting rules: One or more "overrides" on top of the existing template that will apply whenever the conditions are evaluated to true.
The state formatting button can be found near the Configurator button.
State formatting is applied on a per widget basis and will be copied along with the widget if it's copied in some other part of the mashup or other mashups.
When rules are created in the state formatting tab, the number of rules will appear on the button.
Clicking the button will open the same Configurator window but on the State Formatting tab. This tab is only available for supported widgets.
Data bound to the widget will be available in state formatter for creating rules from it.
Formatting on the Line Chart works on 2 contexts:
Markers: Style markers on the chart, this is working like state formatter on the rest of the widgets. It's good to use this option for highlighting points on the chart.Regions: Used to capture regions on the chart based on timestamp/general value range or both of them. This type of formatting is limited only to 2 sub rules per rule
Examples
Configuration for rule applied on chart Markers.
Rule applied on chart markers that are less than 20
Configuration for rule applied on chart Region.
Rule applied on chart region below 40 and below 60 with thresholds enabled.
Both type of rules applied at the same time.
