cancel
Showing results for 
Search instead for 
Did you mean: 

Charting Status (Category Data) over Time

dfallon
New Contributor III
New Contributor III

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. 

transpose.jpg

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

dfallon_0-1655390880094.png

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"

dfallon_1-1655391114348.png

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. 

dfallon_2-1655391366393.png

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.  

dfallon_3-1655391592737.png

Then disable its display

dfallon_4-1655391644469.png

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.

dfallon_6-1655391974644.png

Set theTime 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

dfallon_7-1655392079404.png

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. 

dfallon_8-1655392314547.png

Our final chart, now looks like this.  

dfallon_9-1655392345918.png

Happy charting!

 

 

 

 

 

 

 

 

 

 

 

1 REPLY 1

LeahS
Moderator Moderator
Moderator

Brilliant content presented here @dfallon 👏

Great reference for everyone to follow! 

Thanks very much for the detailed guide,

Leah