Linear line chart widget
A line chart is a method of visualizing data points on a line, commonly used to illustrate trends or compare two data sets.
There are three types of line charts:
Category: The horizontal axis is defined using labels (categories) for each value. This type of chart is created from a single entity.Linear: Numerical data is plotted for each point. The scatter chart type automatically configures a line chart to use one of these scales for the x-axis. Linear interpolation is employed to determine the value’s position on the axis.Time: A point is defined by a date-number pair. The time scale displays date types, and its ticks are calculated based on the scale’s size.
Linear chart
Numerical data is plotted for each point. The scatter chart type automatically configures a line chart to use one of these scales for the x-axis. Linear interpolation is employed to determine the value’s position on the axis.
This chart type is defined using a list of series. Each series is constructed from an independent data source, specifying numerical points for both the horizontal and vertical axes.
View settings
Label
A human-readable name for the view. You can use spaces, special characters, and a mix of upper and lower case letters. This label will be displayed at the top of the widget view, ensuring user comprehension.
Name
The internal name of the view. It cannot contain special characters or spaces. This name is commonly used in scripts and the REST API. Changing it might impact your app, necessitating manual adjustments.
Description
A human-readable description of the widget. You can use spaces, special characters, and a mix of upper and lower case letters. This description will be shown at the top of the added widget on your dashboard.
Allow refresh
This setting toggles the display of the refresh button. It allows updating the widget’s information and is enabled by default.
Horizontal axis settings
Label
A human-readable name for the view’s horizontal axis. You can use spaces, special characters, and a mix of upper and lower case letters. This label will be displayed below the horizontal axis.
Grid lines
If disabled, grid lines for this axis will not be displayed.
Vertical axis settings
Label
A human-readable name for the view’s vertical axis. You can use spaces, special characters, and a mix of upper and lower case letters. This label will be displayed beside the vertical axis.
Ticks suggested min / max
These settings influence the data values used for scaling the axis. They are helpful for extending the axis range while preserving the auto-fit behavior.
Grid lines
If disabled, grid lines for this axis will not be displayed.
Series
Dataset
These settings dictate how the data source collects information.
Entity: Specifies the entity to which the view refers. Only records from this entity are included to define the horizontal and vertical axes.
Filter Type: Can be expression or script. Selecting “expression” requires setting record filters, while choosing other options requires scripting.
Filters: Defines the records to be included. Only records meeting the provided expression will be part of the table widget view.
Script: Returns a query parameter or queryMap, with the query map object used for filtering records. Refer to the Query language documentation for the query map version.
Size: Sets the maximum number of records to fetch during view loading and when clicking “More” to fetch additional records.
Sort Field: The default sorting field for the listing. Users might be able to change the default sorting by enabling it in any column.
Sort Type: Specifies the sorting direction. Users might be able to change the default sorting by enabling it in any column.
Point settings
Horizontal value
View Type: Represents the field type used to generate horizontal axis values. It can be an entity field or a calculated field.
Entity Field: Allows selection of an existing entity field. The value is stored as a metadata reference, which is updated similarly to field changes.
Calculated Field: The value is generated by a script for the horizontal axis.
Vertical value
View Type: Represents the field type used to generate vertical axis values. It can be an entity field or a calculated field.
Entity Field: Allows selection of an existing entity field. The value is stored as a metadata reference, which is updated similarly to field changes.
Calculated Field: The value is generated by a script for the vertical axis.
Point styling settings
Settings Mode: Can be simple or advanced. In simple mode, set the line color; other settings are calculated or set by default. In advanced mode, developers define each value.
Background Color: The fill color for points, specified as a hexadecimal color code.
Style: Style of the point, such as circle, cross, dash, line, rect, star, or triangle.
Radius: The radius of the point shape.
Hover Background Color: Point background color when hovered.
Border Width: The width of the point border in pixels.
Border Color: The border color for points.
Line styling settings
Settings Mode: Can be simple or advanced. In simple mode, set the line color; other settings are calculated or set by default. In advanced mode, developers define each value.
Color: The line color, specified as a hexadecimal color code.
Line Tension: Bezier curve tension of the line. Set to 0 for straight lines (default is 0.4).
Background Color: The line fill color, specified as a hexadecimal color code.
Border Width: The line width in pixels.
Border Dash: Length and spacing of dashes.
Stepped Line: Supported values include None, Before, Middle, and After.
Example
Use case
This type of chart is ideal for connecting a series of data points with a solid line. For instance, it’s helpful to visualize the resistance of different materials at varying temperatures.
Precondition
Entities must be in place to define information for each material. Calculated entities can be used to aggregate information. For example, the materialA entity has integer field types temperature and resistance, similar to an entity for materialB.
Creating a line chart
Here’s how to create a line chart:
- Access the root layout of your dashboard and navigate to “Assign Widget.”
- Choose an existing widget or create a new one, selecting the widget type as “Line Chart” with subtype “Linear.” Configure the label, name, and other settings before moving to widget configurations.
- Customize axis settings in the “Horizontal and Vertical Axis Settings” section.
- Add series for each material, defining labels, dataset settings, and point styling settings.
- Configure the line styling settings or use default values.
- Repeat the process to add more series, each with unique dataset settings.
- Save your changes.
UI message
Widgets can respond to UI messages, especially for refreshing data or applying filters.
Refresh and filter
Sending a refresh message updates the widget based on its default settings. You can also send a filter parameter to apply specific filters to the query fetching data. The filter can be a query object or query map.
To apply filters, set the widgetContainer with objects detailing the container’s name and the filter to be applied to each widget. The parameter can also include title to update the widget title.
For charts with multiple series from different entities, the filter parameter should be an array of objects specifying the series name and the associated filter.
Example
To refresh and apply a filter, send the filter parameter to the target widget container. Each series can define its own query independently, applying only to specific entities.
var query = sys.data.createQuery('polycarbonateInfo');
query.field('temperatureC').greaterOrEquals(100);
var query2 = sys.data.createQuery('nylonInfo');
query2.field('temperatureC').greaterOrEquals(50);
sys.ui.sendMessage({
scope: 'view',
name: 'refresh',
views: ['technicalDashboard'],
widgetContainers: [
{
name: 'col11',
filter: [
{
name: 'polycarbonate',
filter: query
},
{
name: 'nylon6',
filter: query2
}
]
}
]
});