Enhancing Our UI - Using Interactive Charts

An important thing to note during the development of any application is that the experience of the user is paramount. In the end, all we are really doing when we make applications is valuing our users' time. If we manage to save the user some effort in thinking or understanding some piece of data, we know we are moving in the right direction.

In the previous chapter, this is exactly what we were focusing on by combining the temperature and humidity readings into a single interface and, after that, by highlighting the relevant pieces of information through the modification of size and color by using CSS.

In this chapter, we will be continuing with the concept of user experience improvement by introducing advanced UI elements such as charts, which will help us interpret and understand the data even further.

Here's what we will...

Considerations when implementing complex features

When it comes to building complex features in any software application, it often boils down to two options:

• Building each feature from scratch, thoroughly testing and integrating it into your application
• Using an existing library that has already taken care of the preceding point

Each option has its own trade-offs. If we decide to implement a feature and build it from scratch, we will have full control over what happens, and can customize it the way we like without any dependency. However, we must also take into consideration the time and effort that we will have to spend in building it. Even after spending months, there may still be scenarios and optimizations that we did not think of. These will, of course, be fixed as time passes, but this is time that could be spent elsewhere.

In contrast, we have numerous libraries available...

Introducing Chart.js

Following up the discussion in the last section, choosing a library to create charts appears to be the most logical choice. There are a lot of popular libraries to choose from. Out of these, the most popular are as follows:

• D3 (https://d3js.org/)
• Chart.js (http://www.chartjs.org/)
• Highcharts (https://www.highcharts.com/)

D3 is more of a general purpose library, and even though it's really great at making charts, there is still a lot of boilerplate code that has to be written to get a simple chart running.

Highcharts solves this problem by providing an easy configuration-based API that lets us create rich charts with just a few lines of code, but it comes with a very restricted license. This essentially means that any commercial applications are out of the question unless you get a paid subscription.

Chart.js gives us the best of both worlds. It provides...

Making the server response data-friendly

Our server is currently returning HTML responses. A humidity of 38% will give us this response:

    <strong>38</strong>

While this works for our current setup, it is not ideal for when we need raw data, like we do now for making our charts. It is far easier to convert raw data to HTML as opposed to doing the opposite, so we can make our sensor displays compatible for raw data as well.

The most popular standard for data interchange, and one that is almost universal now, is JavaScript Object Notation (JSON). JSON is a very simple data interchange specification that is used to serialize data that is exchanged between applications. As we have been programming in JavaScript the whole time, JSON should feel very familiar to us.

In this section, we will be modifying our application server to return JSON responses, as opposed to the...

Integrating sensor data into our charts

The goal of this section is to have our sensor data reflect in our charts. We know that readings are measured every two seconds. This means that we will also have to update our charts every two seconds. This is a slightly different situation when compared to the sample chart we created earlier because there are some assumptions that we didn't consider:

• The constant readings from the sensor require that our chart be dynamic. The values plotted have to change every time a new reading comes.
• We must choose a sensible scale. Our sample chart had values from 12 to 23. In the real world, temperature and humidity readings rarely change that often or that drastically, especially when we are measuring on a per-second timescale.

Fortunately, the Chart.js library has features to take care of both of these new findings. Let's modify our...

Summary

Throughout this chapter, we modified almost all aspects of our code in order to make it more data friendly.

First, you learned the basics of the Chart.js library. We also reasoned about why we are choosing Chart.js over other similar libraries. We went on to make a sample chart using this library, to be used in the later part of the chapter to integrate with out sensor readings.

To prepare for this, the server was made more data friendly through the use of JSON responses. Our frontend was then optimized to utilize these responses.

We finally made use of Chart.js' ranging and data animation features to make our charts look more to scale and to make them dynamic with respect to displaying new data.

Our frontend now looks much richer and more like a fully featured dashboard. However, there are still a few features that we are missing. If you notice, every time we refresh...