Display State on a Time Series Chart

Forum|Forum|10 years ago
June 27, 2016
3 replies
3650 views

I have a number of properties that I want to display on a time series chart (or similar) these numeric properties vary over time. I also have a boolean again that varies over time that I need to display along side the data. As the data captured is likely to change based on the boolean I want to highlight the times at which the boolean is true along side the data.

Is there a widget that can do this? or is there a way to line up the times with in the time series data and something like an event chart?

Extensions

P

posipova

20-Turquoise

You may want to look into State Formatting. Once you bind data to the Time Series Chart, you may attach an appropriate state formatting (selecting pre-created state definitions). See helpcenter of the according Thingworx platform version for "Style and State definitions".

P

posipova

20-Turquoise

To further clarify on State definitons, below I provide the definitions and terms referencing the concept. In a similar manner, you would create a new state definition through the Thingworx Composer (by navigating to the explorer view and clicking on "state definitions" on the left-hand side, then adding a new one).

So, you could breakdown the logic on your data into states and corresponding booleans, defining the styles of each accordingly.

State Definitions

A State Definition is a collection of Style Definitions, along with rules on when to apply each Style Definition. The rule plus the Style Definition is a State. A State Definition should have more than one State. This allows you to do data based formatting of cells in a Grid, for example, based on the value of a column in the data service bound to the Grid.

When you apply a State Definition to a widget, you must also pick which field from the widget data set that you wish the rule to be evaluated against. This allows you to use fields other than the visible data column as the field that determines state.

Defining and Using State Definitions

When you create a State Definition, you must first define it as a string matching (String/Value selection) or as a numeric range (Numeric Range selection). With string matching, only an exact match will result in the Style Definition being applied. With a numeric range, any number within a defined range will cause the corresponding Style to be applied.

When you define a string match State Definition, define the following fields for each State:

Default Value — the string you want to match.
Display Name — use this to indicate a pump running versus off, for example, rather than using the match value. This name also shows up when dynamically binding state values (see below).
State Style — the Style Definition to apply on a match.

To define a numeric range State Definition, define the following per State:

Display Name — Name to be used for labeling State at run time. This name also shows up when dynamically binding state values (see below).
Style — Style Definition to be applied.
Range — numeric range for when this State's Style is to be applied.

To add another numeric range, press the Split button (pick the top or bottom Split button based on where you want to insert the new range, above or below the current range). Each numeric range starts at a minimum value up to some level, and also has a range of some value to the maximum. You can then insert as many ranges in between as desired.

It is important to note that you can define a State Definition rather generically, and use specific overrides when that State is applied to an object. For example, you may have a typical scenario where you have a Low-Low condition, a Low condition, a Normal condition, and High condition, and a High-High condition. You want to use the following color scheme whenever this concept applies:

Low-Low — Orange
Low — Yellow
Normal — Green
High — Purple
High-High — Red

However, the actual numeric range may be different for different data points, even though the five States will be the same. Rather than define a State Definition for each data point, you can apply the same State Definition, but override the actual numeric ranges for that specific application of a State Definition to a Widget. This is done within the Widget configuration.

There are two ways to override the State Definition. The first is to pick the state definition to use for a specific Widget, and put in widget specific values in the Renderer and State configuration dialog.

The second way is to bind the state values to a data service. When you pick a State Definition to be applied to a widget, an additional properties will be added to the Widget Properties panel, one for each State in a State Definition. The additional properties will be named ValueFormat_<Display Name>, where Display Name is the name you applied in the original State Definition. You can then bind a value from any data service to those properties, allowing you to dynamically set the State Definition limits, and make it completely data driven.

N

nadams1

Author

10-Marble

The issue with state based formatting is that you can only affect the lines, you can't colour the background based on the state.

In the end I converted the boolean to an int 0 or 1 and added a second y axis between -0.1 and 1.1, I now get a square wave effect on the same chart. it's not ideal but it does work.

Thanks for the suggestions anyway.