Charting Status (Category Data) over Time

There are occassions when what we need to chart are not linear values over time - as is typical, but instead category data - like the status of a piece of machinery in a manufacturing process over the course of the day.  This can be achieved using KX Dashboards with the Canvas Chart component. 

Lets start with the data:

 

Time State 2014-02-24D08:00:11.113000000 Running Off 2014-02-24D08:10:11.894000000 Idle 2014-02-24D08:20:12.565000000 Idle 2014-02-24D09:00:18.114000000 Starting 2014-02-24D10:30:18.620000000 Faulted 2014-02-24D10:40:22.820000000 Stopping 2014-02-24D12:30:24.635000000 Starting 2014-02-24D12:35:25.888000000 Ready 2014-02-24D15:20:37.880000000 Ready 2014-02-24D19:59:45.713000000 Stopping 2014-02-25D08:00:11.113000000 Idle 2014-02-25D09:00:11.894000000 Idle 2014-02-25D10:10:12.565000000 Idle 2014-02-25D11:20:18.114000000 Out of Production 2014-02-25D13:50:18.620000000 Out of Production 2014-02-25D15:00:22.820000000 Starting 2014-02-25D15:10:24.635000000 Ready 2014-02-25D18:00:25.888000000 Starved 2014-02-25D18:05:37.880000000 Blocked 2014-02-25D18:10:45.713000000 Stopping

 

Add a Canvas Chart and start by defining the layer; here, X-Axis Data is going to be State, and a _Y-Axis Data _is going to be Time. 

Next, we set our X-Axes to use category data, and the Y-Axes to use time data.  

We then need to flip the chart, so our time data is along the bottom of the chart.  We do this by checking the _Transpose _option in the Basics property.  Our x-axis and y-axis have been reversed for display, but x-axis is still Time and our y-axis is still State as we continue to configure the chart. 

This still leaves our charted states as duplicated values.  We can elminate this by checking the _Filter Unique _property in our X-Axes Labels

We now have the core of our chart.  We can start the tidy up by making the Line chart a stepped chart; In the _Interpolation _of the Line Layer, select Stepped from the dropdown.  

Our line is still quite feint, so we can improve this by changing the _Border Width _to 3 in _Layer Basics _and in Layer Points, changing the _Radius _property to 5.  _Name _the layer, “Status”

Next, we tidy the Y-axis (which is actually our x-axis!).  We want to set the _Time __Format _to use _Force Time Unit _of hour.  Then for the _Hour _property, set the value to hh:00.   In the _Y Axis 1, Labels - _check the _Offset _property to move the edge values off the axis. 

Nice to have is a day label.  To do this, we create a copy of our existing Layer; just adding a new _Layer _will automatically do this for us.  

Then disable its display

However, we do add a second y-axis which we will use for this (now hidden) layer.  Create a second Y-axis, and set the format to use time.

Set the_Time Format, Force Time Unit_ of _Y-Axis _2 to use day

Now we go back to the copied Layer (“Status 1”), and set the _Y-axis ID _to use our newly created Y-Axis 2

This will give us our second label for the axis showing the day, “Feb 25”.

As a final touch, I like to add a highlight rule for when the status is Faulted.  We do this from our initial layer. 

Our final chart, now looks like this.  

Happy charting!

 

 

 

 

 

 

 

 

 

 

 

Brilliant content presented here @dfallon 

Great reference for everyone to follow! 

Thanks very much for the detailed guide,

Leah