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 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
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!
