We're always trying to make analysis of the data we collect for our clients easier. There is so much information on the Demand Logic platform that it can sometimes be a little overwhelming, particularly when trying to diagnose and respond to the many issues that the data uncovers.
Basheera Khan has joined our team to help us streamline our user experience and design process, and is carrying out a full review of all of our main pages at the moment. Through the design process and customer feedback, it was clear that the 'Asset' page - where you see charts about a particular Fan Coil Unit, or a Boiler for example - needed some attention.
Primarily, it wasn't very easy to discern between the different data traces on these charts - partly due to colour palette limitations, but also because of a lack of interactivity.
In the above image, it is impossible to distinguish between the entering and leaving temperature, and the slight differences in shading and width of the lines is not clear. As these charts are often projected onto walls for analysis by building performance teams, the projection also struggles with the low contrast of the coloured lines. Furthermore, to see what the value is along the line, you must refer directly to the Y axis.
In our latest release we've replaced our custom build chart library with PlotlyJS - a fantastic open source from Plotly. These are currently available for customers on our new asset model, which will be rolled out to all customers in the months to come.
Here's the same chart, driven by PlotlyJS. With this change, all these line charts become interactive, allowing you to:
- Examine the value of each trace by rolling over it (or all traces together at the same time value)
- Zoom in and out to get more detail or a better overview
- Easily read the charts, thanks to improved colour and contrast, assisting readability for low-light projections/screens
- Snapshot a chart for use elsewhere (see the little camera icon, top right)
Hopefully the new interactivity here will greatly boost the usability and readability. We're also aware that some of the colours we are using are not colour-blind accessible, and we're working toward solving that in a near-term update - in the first instance, these line charts now also show the label when you hover over them as well as the Y value.
As ever, we are always trying to improve your experience. Let us know your thoughts in the comments.
