New Chart Components

Ignition Early Access
1

New Chart Components - 8.0.3 RC2

Timeseries charts, where the X-axis of the chart represents the passage of time, are of crucial importance in industrial applications like the kind built in Perspective. The 8.0.3 RC2 release brings with it two new timeseries chart components; the Time Series Component, and the Chart Range Selector Component. Each of these components are built with simplicity in mind. From the minimal configuration needed to get data displaying in the charts to the simplified style configuration, these components are easy to get functional and customized. These charts are of the sort where the data is represented in the chart’s properties. By default, the charts contain example data, but typically a tag history or named query binding will be used to feed data to the charts.

The Time Series Component is the main display component in this pair. It contains the following features (a full list of features and configuration is documented below):

  • Zoom in/out via mouse wheel interaction.
  • X-Trace display showing data at the hovered time position.
  • Multiple chart display types (Area, Bar, Line, and Scatter).
  • Multiple Y axes with the ability to align to the left or right side of the chart.
  • Multiple plots as well as multiple trends per plot.
  • Baselines and markers.
  • Custom axes.
  • Time range showing the overall range of the data being displayed in the chart
  • Simple display customization for the axes, different trend display types, baselines, and markers.

The Chart Range Selector Component is meant to complement the Time Series Component. As such, it has a smaller feature list:

  • Zoom in/out via mouse wheel interaction.
  • Click-and-drag brush range selection and panning.
  • “Start” and “End” property values that are updated as the brush range changes. These properties can govern the start/end points of data queries to return a DataSet.
  • Time range showing the overall range of the data being displayed by the brush (range updates as the brush is updated).
  • Simple display customization for the axes, baselines, markers, and the main chart data display.

These components are most powerful when paired together. When a query against the series data of the Time Series Component is made using the “start” and “end” values of the brush from the Chart Range Selector, a display like this is possible:

Chart Range Selector driving a Time Series Component

image
image1125×1314 157 KB

Time Series Component

This component provides a performant way to visualize data from a variety of different data sources as chart data. You can get up and running with this component in a minimal way by providing a name and data entry (see the series.data property for data formats) for the first series item in the component properties. This will create a data display in the chart and auto-generate the axis by using the series name and min/max values from the series data.

To create a richer data display, you can build up a full plot entry (or multiple entries). This allows for the creation of trends, custom axes, and different markers that can be applied to the plot. The best part about trends? Different display types. In this first release, you’ll have the ability to visualize your data as a Line, Area, Bar, or Scatter chart. …or as a mix of those. The following is a description of the configuration used by this component:

  • series (Array, required) - A list of series entries used as the base data source for the chart display. At a minimum, the Time Series component requires at least one complete series entry to display data. With no other configuration provided, an initial display will be created from the series data. Each series entry requires the following properties:
    • name (String, required) - The name of the series.
    • data (Array | Object | DataSet, required) - Data can be an Object containing a time entry and value entries (all must be Numbers). Each value entry must be labeled with the column name to which it corresponds. Data can also be an Array containing value entries (all must be Numbers). Each value entry consists of a timestamp (which must be the first value) and one or more values that were captured at that time. Finally, data can also be in the form of a DataSet. As an example of the DataSet format, the data property can be bound to a Tag History binding to display either realtime data, or historical data (via start and end dates). To allow the Chart Range Selector component to drive the display of this component, a historical Tag History binding can be made where the “Start Date” and “End Date” fields are references (respectively) to the selectedRange.start and selectedRange.end values of the Chart Range Selector component:
“Realtime” Databinding Example

image
image1404×938 152 KB

“Historical” Databinding Example

image
image1404×939 161 KB

  • plots (Array, required) - A list of plot entries for the chart, and at least one entry is required. Plot entries contain properties that allow much finer control over the way that the series data can be displayed. Each plot will be represented by its own row in the component. A plot contains the following properties:
    • trends (Array, optional) - If specified, a trend will become the display mechanism for the plot in which it resides. It describes the way that the data should look, and provides different display types as opposed to the line display type that is provided when building from series data. Multiple trends will be built on top of each other in the same plot. An axis will be generated for each trend, unless they share a common axis (either custom created, or generated from series data). A trend contains the following properties:
      • type (String, required) - This describes the type of chart to create. Options are area, bar, line, and scatter.
      • series (String, required) - This will point the trend to a series that should be used as the data source.
      • axis (String, optional) - If specified, the name of an axis that is described in the axes property of the plot to which this trend belongs. This axis will be used as the Y axis for the trend.
      • visible (Boolean, optional) - If specified, this is the visible state of the trend. If not visible, the trend data will be hidden, but the time range of the trend will still be represented in the overall time range of the plot.
      • breakLine (Boolean, optional and applicable to the line trend type) - This property will be available when a trend of type line is being used. If true, the line will be broken on either side of bad/missing data values. If false, bad/missing data values are removed and the adjoining points are connected.
      • stack (Boolean, optional and applicable to the area and bar trend types) - This property will be available when a trend of type area or bar is being used. If true, the multiple columns of the chart will stack on top of each other.
      • radius (Number, optional and applicable to the scatter trend type) - This property will be available when a trend of type scatter is being used. A number specifying the radius (in pixels) of the displaying points.
      • columns (Array, optional) - If provided, only the columns in this list will be shown. Any style properties provided here will also override any existing style currently in place. A column contains the following properties:
        • key (String, required) - This needs to match a column name from the series to which this trend is bound. Once in place, this will allow the style configuration provided here to override the styles provided in the defaultStyles property.
        • color (String, optional) - If provided, this value will override any previous color values for the column (both stroke and fill).
        • styles (Object, optional) - If provided, the styles for the state values listed here will override any previous state values. The state value options are:
          • normal (Object, optional) - Takes the same configuration options as the same named state value under the defaultStyles property.
          • highlighted (Object, optional) - Takes the same configuration options as the same named state value under the defaultStyles property.
          • selected (Object, optional) - Takes the same configuration options as the same named state value under the defaultStyles property.
          • muted (Object, optional) - Takes the same configuration options as the same named state value under the defaultStyles property.
      • baselines (Array, optional) - If specified, a line will be drawn on the trend based upon a given type of functionality. The options for a baseline are:
        • function (String, required) - The type of baseline that will be drawn. Options are min, max, avg, ucl (upper control limit), and lcl (lower control limit).
        • column (String, optional) - The column against which the baseline should be calculated. If not specified, the first column in the series to which the trend is bound will be used.
        • axis (String, optional) - The axis against which the baseline should be calculated. The trend must be bound to an axis for this to work correctly.
        • visible (Boolean, optional) - The visible state of the baseline.
        • color (String, optional) - The color of the line.
        • width (Number, optional) - The width of the line.
        • opacity (Number, optional) - The opacity of the line.
        • dashArray (Number, optional) - The dashed appearance of the line.
        • label (Object, optional) - The config used for the label drawn on the baseline.
          • text (String, optional) - The label text.
          • position (String, optional) - The position of the label relative to the baseline.
          • font (Object, optional) - The config used for the font style of the label.
            • color (String, optional) - The color of the label text.
            • size (Number, optional) - The font size, in pixels, of the label text.
          • style (Object, optional) - Custom CSS styles to apply to the baseline label. Any style that applies to an SVG text element can be used.
        • style (Object, optional) - Custom CSS styles to apply to the line portion of the baseline. Any style that applies to an SVG line element can be used.
    • axes (Array, optional) - A list of axis entries for that can be used for the plot. These can be used to override the Y Axis that is generated based on data in the series to which each trend is bound. An axis entry has the following properties:
      • name (String, required) - The name of the axis. Also used as the display label of the axis.
      • min (Number, required) - The minimum value of the axis.
      • max (Number, required) - The maximum value of the axis.
      • alignment (String, required) - The side of the trend upon which the axis should be presented.
      • width (Number, required) - The pixel width of the axis.
      • label (Object, optional) - The config used for the label drawn on the Y Axis.
        • visible (Boolean, optional) - The visible state of the label.
        • text (String, optional) - The label text.
        • offset (Nuymber, optional) - Offset the Y axis label from its default position. This allows you to fine tune the label location, which may be necessary depending on the scale and how much room the tick labels take up. This may be positive or negative.
        • font (Object, optional) - The config used for the font style of the label.
          • color (String, optional) - The color of the label text.
          • size (Number, optional) - The font size, in pixels, of the label text.
        • style (Object, optional) - Custom CSS styles to apply to the Y axis label. Any style that applies to an SVG text element can be used.
      • tick (Object, optional) - The config used for the ticks drawn on the axis.
        • color (String, optional) - The color of the ticks.
        • label (Object, optional) - The config used for the label drawn on the tick.
          • font (Object, optional) - The config used for the font style of the label.
            • color (String, optional) - The color of the label text.
            • size (Number, optional) - The font size, in pixels, of the label text.
          • style (Object, optional) - Custom CSS styles to apply to the tick labels. Any style that applies to an SVG text element can be used.
        • style (Object, optional) - Custom CSS styles to apply to the ticks. Any style that applies to an SVG line element can be used.
    • markers (Array, optional) - A list of visual indicators that can be added to the plot. These are meant to draw emphasis to the data. In this first release, the line marker will be the only available option. A marker entry has the following properties:
      • visible (Boolean, optional) - The visible state of the marker.
      • value (Number, required) - The numeric value that the marker represents.
      • type (String, required) - The type of marker to be used. Currently, the only option is line.
      • axis (String, required) - The axis against which the marker should be drawn.
      • line (Object, required) - The configuration for the line portion of the marker.
        • width (Number, required) - The width of the line.
        • color (String, optional) - The color of the line.
        • opacity (Number, optional) - The opacity of the line.
        • dashArray (Number, optional) - The dashed appearance of the line.
        • label (Object, optional) - The configuration for the label portion of the marker.
          • text (String, optional) - The text of the label for the marker.
          • position (String, optional) - The position of the label relative to the line.
          • font (Object, optional) - The config used for the font style of the label.
            • color (String, optional) - The color of the label text.
            • size (Number, optional) - The font size, in pixels, of the label text.
          • style (Object, optional) - Custom CSS styles to apply to the marker label. Any style that applies to an SVG text element can be used.
        • style (Object, optional) - Custom CSS styles to apply to the marker line. Any style that applies to an SVG line element can be used.
  • title (Object, required) - An object describing the title of the component. The following properties are available for the title:
    • visible (Boolean, optional) - The visible state of the the title.
    • text (String, optional) - The visual title of the chart.
    • height (Number, optional) - The vertical space taken up by the title.
    • font (Object, optional) - The config used for the style of the title.
      • color (String, optional) - The color of the title text.
      • size (Number, optional) - The font size, in pixels, of the title text.
    • style (Object, optional) - A style object that is used to add visual style to the title. Style that can be applied to an SVG text element can be used here.
  • timeAxis (Object, required) - This property provides settings for the X Axis. Note that multiple plots share the same axis. The following properties are available for timeAxis:
    • visible (Boolean, optional) - The visible state of the the axis.
    • tickCount (Number, optional) - The number of ticks on the axis (as a multiple of 2, 5, or 10).
    • height (Number, optional) - The height of the axis.
    • color (String, optional) - The color of the axis.
    • tick (Object, optional) - The config used for the ticks drawn on the axis.
      • color (String, optional) - The color of the ticks.
      • label (Object, optional) - The config used for the label drawn on the tick.
        • angled (Boolean, optional) - If set to true, the tick labels will be angled rather than horizontal.
        • font (Object, optional) - The config used for the font style of the label.
          • color (String, optional) - The color of the label text.
          • size (Number, optional) - The font size, in pixels, of the label text.
        • style (Object, optional) - Custom CSS styles to apply to the tick labels. Any style that applies to an SVG text element can be used.
      • style (Object, optional) - Custom CSS styles to apply to the ticks. Any style that applies to an SVG line element can be used.
    • style (Object, optional) - A style object containing properties which are applied to the horizontal line of the axis. Any property that would apply to an SVG line element can be used here.
  • timeRange (Object, optional) - An object describing the presentation of the time range display below the chart. The following properties are available:
    • visible (Boolean, optional) - The visible state of the time range display as a whole.
    • dateFormat (String, required) - The date format of the range using a MomentJS date string.
    • timeFormat (String, required) - The time format of the range using a MomentJS date string.
  • xTrace (Object, optional) - An object describing the presentation of the X Trace display. This display is shown when a chart is being hovered over with the mouse. Note that multiple plots will share the same X Trace display. The following properties are available:
    • visible (Boolean, optional) - The visible state of the X Trace display as a whole.
    • infoBox (Object, optional) - An object describing the presentation of the the box portion if the X Trace display. The following properties are available:
      • visible (Boolean, optional) - The visible state of the info box.
      • showTime (Boolean, optional) - If set to true, the timestamp of the current X Trace value will be shown above the info box.
      • width (Number, optional) - The width of the info box.
      • dataFormat (String, optional) - A NumeralJS value used to format the data found at the current timestamp of the X Trace display. See numeral.js for a list of available data formats.
      • stroke (Object, optional) - A configuration object describing the properties that will be applied to the stroke of the box display. The following properties are available:
        • color (String, optional) - The color of the box stroke.
        • width (Number, optional) - The width of the box stroke.
        • opacity (Number, optional) - The opacity of the box stroke.
        • dashArray (Number, optional) - The dashed appearance of the box stroke.
      • fill (Object, optional) - A configuration object describing the properties that will be applied to the fill of the box display. The following properties are available:
        • color (String, optional) - The color of the box fill.
        • opacity (Number, optional) - The opacity of the box fill.
      • style (Object, optional) - A style object containing properties which are applied to the info box. Any property that would apply to an SVG rect element can be used here.
    • line (Object, optional) - An object describing the presentation of the the line portion if the X Trace display. The following properties are available:
      • visible (Boolean, optional) - The visible state of the X trace line.
      • color (String, optional) - The color of the X trace line.
      • width (Number, optional) - The width of the X trace line.
      • opacity (Number, optional) - The opacity of the X trace line.
      • dashArray (Number, optional) - The dashed appearance of the X trace line.
      • style (Object, optional) - A style object containing properties which are applied to the line part of the xtrace display. Any property that would apply to an SVG line element can be used here.
  • defaultStyles (Object, optional) - An object providing default style to the chart trends as a whole. The following properties are available:
    • colorScheme (String, optional) - A Color Brewer color scheme to use on the series. See ColorBrewer2.org for available color schemes.
    • colors (Array, optional) - A list of colors to apply to the columns (in order) for each trend. If these values are provided, they will override the value provided for the colorScheme.
    • normal (Object, optional) - An object providing style configuration for the “normal” state (no user interaction) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. The following properties are available:
      • stroke (Object, optional) - A configuration object describing the properties that will be applied to the stroke of the trend type being displayed (if applicable). line, and area trend types will have these styles applied to them. The following properties are available:
        • color (String, optional) - The color of the trend stroke.
        • width (Number, optional) - The width of the trend stroke.
        • opacity (Number, optional) - The opacity of the trend stroke.
        • dashArray (Number, optional) - The dashed appearance of the trend stroke.
      • fill (Object, optional) - A configuration object describing the properties that will be applied to the fill of the trend type being displayed (if applicable). area, and box, and scatter trend types will have these styles applied to them. The following properties are available:
        • color (String, optional) - The color of the trend fill.
        • opacity (Number, optional) - The opacity of the trend fill.
    • highlighted (Object, optional) - An object providing style configuration for the “highlighted” state (mouse hover) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. The highlighted property uses the same configuration properties as the normal property.
    • selected (Object, optional) - An object providing style configuration for the “selected” state (mouse click) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. The selected property uses the same configuration properties as the normal property.
    • muted (Object, optional) - An object providing style configuration for the “muted” state (non selected) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. The muted property uses the same configuration properties as the normal property.

Chart Range Selector Component

When this component is configured, start and end sub properties of the selectedRange property can be used as the respective start/end points in a historical Tag History binding providing data to the series property of the Time Series component. As you interact with the time brush on this chart, those start and end properties will be updated with the millisecond timestamp that corresponds to their values. With that in place, you have a Chart Range Selector Component driving the display of a Time Series Component. The following is a description of the configuration used by this component:

  • data (Array | Object | DataSet, required) - This property uses the same configuration as the series.data property of the Time Series Component.
  • selectedRange (Object, required) - This property is updated as you interact with the brush. These are the values that can drive the display of other components. The following properties are available:
    • start (Number, required) - The millisecond timestamp representing the value of the head of the brush.
    • end (Number, required) - The millisecond timestamp representing the value of the tail of the brush.
  • brushRange (Object, optional) - An object used to control the display of the date/time range values at the bottom of the component. The following properties are available:
    • visible (Boolean, optional) - The visible state of the brush range.
    • dateFormat (String, optional) - The date format of the range using a MomentJS date string .
    • timeFormat (String, optional) - The time format of the range using a MomentJS time string .
  • timeAxis (Object, required) - This property uses the same configuration as the timeAxis property of the Time Series Component.
  • yAxis (Object, optional) - An object used to control the display of the Y Axis. This component was built with the assumption that this axis may be secondary information, so it can be deemphasized, if desired. The following properties are available:
    • visible (Boolean, optional) - The visible state of the axis.
    • width (Number, required) - The pixel width of the axis.
    • label (Object, optional) - The config used for the label drawn on the Y Axis.
      • visible (Boolean, optional) - The visible state of the label.
      • text (String, optional) - The label text.
      • offset (Nuymber, optional) - Offset the Y axis label from its default position. This allows you to fine tune the label location, which may be necessary depending on the scale and how much room the tick labels take up. This may be positive or negative.
      • font (Object, optional) - The config used for the font style of the label.
        • color (String, optional) - The color of the label text.
        • size (Number, optional) - The font size, in pixels, of the label text.
      • style (Object, optional) - Custom CSS styles to apply to the Y axis label. Any style that applies to an SVG text element can be used.
    • tick (Object, optional) - The config used for the ticks drawn on the axis.
      • color (String, optional) - The color of the ticks.
      • label (Object, optional) - The config used for the label drawn on the tick.
        • font (Object, optional) - The config used for the font style of the label.
          • color (String, optional) - The color of the label text.
          • size (Number, optional) - The font size, in pixels, of the label text.
        • style (Object, optional) - Custom CSS styles to apply to the tick labels. Any style that applies to an SVG text element can be used.
      • style (Object, optional) - Custom CSS styles to apply to the ticks. Any style that applies to an SVG line element can be used.
    • style (Object, optional) - Custom CSS styles to apply to the axis. Any style that applies to an SVG line element can be used.
  • areaStyles (Object, optional) - An object providing default style to the chart trends as a whole. This property uses the same configuration as the defaultStyles property of the Time Series Component.
12 Likes
2

This looks awesome, can’t wait! Any idea when it’ll be available in a nightly?

3

Should be available today unless last night’s build failed.

edit: nevermind, it went into the release branch. Available soon.

2 Likes
5

Any chance you folks will upload a detailed example on how to get most use of this? Is it possible to make it drag’n’drop like the vision template that is included in vision demo project?

6

Good morning. There was talk about making an Easy Chart flavor of this (similar in functionality to the same named component in Vision), but that isn’t scheduled for development yet.

7

+1 for this feature request.

At the very least we'd love to be able to trend directly to an HDA like the vision charting components support.

9

I’ve been trying to get started using this new component and there are a couple things I would like to see exposed in the Designer that will provide greater flexibility with fine-tuning the user experience.

With the implementation of charts in React.js, there are three parameters that prove extremely useful when polishing the user experience with these charts. These parameters are as follows:

  • enablePanZoom

    • This allows the user to disable the native interaction logic built-in to the React component, which is not desirable in certain situations. (i.e. as a static display of data presented in an intentional form)

  • maxTime / minTime / timeRange

    • These parameters allow the designer to control the view of a particular series. Say, you don’t want to re-run Tag History queries to capture a different time range - simply set the minTime and maxTime to the brushed range the user has selected.

For reference, here’s a good example of a case where enablePanZoom is best set to disabled: http://software.es.net/react-timeseries-charts/#/example/traffic

10

Hi @paul.longtine, we can certainly expose the enablePanZoom property if there is value in disabling those features.

For the max/min comment… If I understand you correctly, this is already available by having a Time Series Chart bound to a Historical Tag History query where the Start Date and End Date values of the query reference the selectedRange.start and selectedRange.end values (respectively) of the Chart Range Selector. Those values effectively become the min and max values used in the Time Series Chart, and they are updated as the brushed range changes.

11

My client is asking for ad-hoc trending in Perspective. This client is familiar with all of the great EasyChart features in Vision from their other plant. I am trying to deliver a Perspective project and they would like to see a way to drag and drop pens onto a trend. Even if it is not drag and drop, some way of trending on the fly with user selected tags would be helpful. Is this something in the works, what should I tell them?

12

Yes, an ‘Easy Chart’ analogue in Perspective is something we are working on.

13

Thanks for the consideration @jball ! The enablePanZoom being exposed would be very helpful for us.

As for the chart range options, this is less important as you can scrub the data you feed into the chart component. Although, I’m not sure how to sync up the users interaction with a TimeSeriesChart and a ChartRangeSelector component. For instance, the displayed date time range for the TimeSeriesChart when the user interacts with the chart with enablePanZoom feature enabled can become out of line with the range selected by the ChartRangeSelector.

14

No prob!

Yes, that’s true. One thing I will be adding shortly is “zoom reset” functionality that will also double as an indicator that the Time Series Chart has be zoomed in tighter than the time range it has been assigned. Clicking on the indicator would zoom you back out to the assigned time range. While this won’t sync the zoom across the components, it will provide an indication that the charted data is displaying only a portion of the assigned time range.

15

Just a heads up, the 8.0.5 nightly build from today exposes the enablePanZoom setting on the Time Series and Chart Range Selector components.

3 Likes
16

Is there a current way to do one of the following with the time series chart:

  1. Hide a line from the chart?
  2. store the values that are displayed in the infobox that you see with the xTrace?

I am currently tracking several values in a table, but some of them are not values that I would like charted, I would just like to know them or query for them if I notice a peak in a value on the chart? For example, If a temperature spikes, I would like to know the name of the program which I have located in the table, but I obviously cannot chart this value as it is text. However, I could query for this if I had the value for the temperature stored somewhere in one of the properties.

17

Hi @chelseajbenzie,

With the Time Series Chart component, you have the ability to hide trends. Setting up each data source (series property) in the chart as its own trend will give you the ability to toggle on and off each line:
image

To answer the second point, in an upcoming nightly, the data behind the xTrace display will be exposed as a property that you’ll have access to. From there, you’ll be able to use that value in whatever way you need.

3 Likes
18

Hi,

I asked this in another thread, but it got lost with no responses.

I’m trying to set a minimal time series chart next to a linear scale and have them line up. The chart seems to have padding that I cannot get rid of. In the example below, the axis min and max is set to 0 - 30k, with some remaining space left above and below:

image.png

How can can make the chart take up all the available space?

Also, setting the axis width to 0 sets it to default width. The smallest I can get it is to set it to 1.

I don’t want to use the sparkline, as the x trace is wonderful and we need multiple plots.

Regards,
Deon

19

Hi @deon.korb, the Y axis is drawn with a small amount of padding top and bottom to allow the top/bottom labels on that axis to display without being cut off. If the effect that you’re after is to hide the axis completely to mimic the look of the sparkline, you can give the Y axis a width of -1.

20

Hi Joshua.

Thanks, the -1 did get rid of the axis horisontally, but the top and bottom padding still remains as seen below:
image

Can I get rid of that spacing as I want the chart area to fill the entire container? Else, if I can accurately control the size of the dead space, I can manipulate the linear scale to the right.

Regards,
Deon