Menu

Charting data quickly with Chart.js in React

, ,

I’m working on a small weather station project, and I was looking for a way to plot the weather data quickly on a chart.

My first idea was to use the big visualization libraries such as D3.js and Fabrics, but they were way too heavy to get started with for my needs. They can do everything, but I was just looking for a quick chart, not another new framework to learn.

I finally choose to use the Chart.js library (https://www.chartjs.org/). It’s not the smallest library ever at 117.7KB minified and gzipped, but it does pull moment.js as a dependency which account for half the size. Still, for a chart-heavy application such as this one, I’m willing to pay that resource cost. Besides, I’ll be the only one use this application on my own network.

ChartJS chart example
Weather plotted on a Chart.js chart. Example data, it was not really that cold in June.

Since it’s a JavaScript library, but not React specific, I wanted to decouple the Chart.js code from the React code. Since Chart.js expects a canvas to render the content; I just added the  tag to my React component, such as:

And imported the JavaScript file containing the Chart.js code so it would initialize the chart (tucked away neatly in a chart folder in my project):

import drawWeatherVisualization from "../../chart/WeatherVisualization.js";

The chart itself is a simple object to which you pass various options. For a line chart like this one, you’ll need to feed it a dataset for each line (using the currentWeatherModule variable from the functional React component pulling this). The dataset will be shown on the Y axis, in that case the minimum and maximum temperature reached for each day in the last 30 days.

const drawWeatherVisualization = async currentWeatherModule => {
    var ctx = document.getElementById("myChart").getContext("2d");
    try {
        response = await axios.get("/api/temperatureHistory?moduleId=" + currentWeatherModule.moduleId);
    } catch (error) {
        console.error(error);
    }
    var myChart = new Chart(ctx, {
        type: "line",
        data: {
        labels: response.data.labels,
        datasets: [
            {
            label: "Maximum",
            data: response.data.maximumTemperatureData,
            fill: false,
            borderColor: "rgb(245, 99, 66)",
            lineTension: 0.1
            },
            {
            label: "Minimum",
            data: response.data.minimumTemperatureData,
            fill: false,
            borderColor: "rgb(75, 66, 245)",
            lineTension: 0.1
            }
        ]
        }
    });
};

export default drawWeatherVisualization;

You also need to set the axis for the data. In my case, I’m generating a list of dates as the X axis, using the moment.js data format.

The minimum and maximum are not necessary; the library can figure it out from the data. For my use case, I want to make sure the display still make sense even if I don’t have data for all 30 days yet and to have always the same axis in all charts.

On the other hand, I forgot to sort the data by date before sending it to Chart.js and I had really strange results. Don’t forget your sorts!

I’m also setting the minimum and maximum weather expected so it looks better and it’s not just an arbitrary number, but it’s not necessary either.

scales: {
    xAxes: [
    {
        type: "time",
        time: {
        unit: "day",
        round: "day",
        displayFormats: {
            day: "D/M"
        },
        ticks: {
            suggestedMin: new Date(new Date() - 30 * 24 * 60 * 60 * 1000),
            suggestedMax: new Date(),
            source: "auto"
        }
        }
    }
    ],
    yAxes: [
    {
        ticks: {
        suggestedMin: -40,
        suggestedMax: 40
        }
    }
    ]
}

Here is the complete code for the line chart with a few more formatting options added in. It’s not perfect, but I’m pretty satisfied at the speed at which I was able to add this in my project. If you want to see the complete project, you can check it out on GitHub (https://github.com/CindyPotvin/temperature-logger).

import Chart from "chart.js";
import axios from "axios";

const drawWeatherVisualization = async currentWeatherModule => {
var ctx = document.getElementById("myChart").getContext("2d");
let response;
try {
    response = await axios.get("/api/temperatureHistory?moduleId=" + currentWeatherModule.moduleId);
} catch (error) {
    console.error(error);
}
var myChart = new Chart(ctx, {
    type: "line",
    data: {
    labels: response.data.labels,
    datasets: [
        {
        label: "Maximum",
        data: response.data.maximumTemperatureData,
        fill: false,
        borderColor: "rgb(245, 99, 66)",
        lineTension: 0.1
        },
        {
        label: "Minimum",
        data: response.data.minimumTemperatureData,
        fill: false,
        borderColor: "rgb(75, 66, 245)",
        lineTension: 0.1
        }
    ]
    },
    options: {
    maintainAspectRatio: false,
    responsive: true,
    layout: {
        padding: {
        right: 40
        }
    },
    scales: {
        xAxes: [
        {
            type: "time",
            time: {
            unit: "day",
            round: "day",
            displayFormats: {
                day: "D/M"
            },
            ticks: {
                suggestedMin: new Date(new Date() - 30 * 24 * 60 * 60 * 1000),
                suggestedMax: new Date(),
                source: "auto"
            }
            }
        }
        ],
        yAxes: [
        {
            ticks: {
            suggestedMin: -40,
            suggestedMax: 40
            }
        }
        ]
    }
    }
});
};

export default drawWeatherVisualization;

Create a Minimal Custom Gutenberg Block in WordPress

, , ,

I’ve started playing with the new Gutenberg editor in WordPress, and the experience is a lot more modern than the old TinyMCE editor that’s been around for a good 15 years (and I’ve had blogs for almost that long!).

Instead of editing all the content of the post at once, the Gutenberg editor works with blocks of content that can be reordered, with a clean look similar to the Medium editor.

WordPress comes with many blocks by default for standard elements such as list, button or image galleries (see https://gogutenberg.com/blocks/ for all the blocks that comes built-in). You can also save blocks you’ve used in a post to reuse them in other posts.

For a really effective blogging workflow, you’ll need to build new blocks to extent the functionalities of the editor. For another blog I own (https://robotsbench.com/), I wanted to use the HTML

Fixing the NetworkOnMainThread exception in your Android app with AsyncTask

,

As soon as you start doing long-running operations such as network calls or anything else that can take more than a few seconds in your Android application, you’ll come across one of the following problems:

  • The [Application] not responding (ANR) popup is shown while you run your application, and the The application may be doing too much work on its main thread. warning is shown in your Logcat traces.
  • The NetworkOnMainThreadException exception is launched as soon as you call anything over the network like an API, regardless of the duration of the call.

Why does the Android SDK complains when one of those things happens? Why does code that seems to be correct doesn’t work? Well, if your application stays frozen, your users could think it crashed. A few seconds is an eternity when you don’t have any feedback about what’s going on, and users are probably going to keep pressing buttons as a response, or close your application and never return. So, to prevent this, the Android SDK enforces minimum standards for responsiveness and display errors if those standards are not respected.

To understand why the application freezes, we must take a look at the architecture of the application. By default, your Android application has only one thread, called the main thread. All you code execute on this single thread, and a thread can only do one thing at a time.

So, if you call the network and there is a delay, everything stops while the application waits for an answer, freezing your UI completely. You won’t even be able to display a progress bar because nothing else can run. The timeline looks like:

Fortunately, you can create new threads, which allow you to do more than one thing at once:

For one-time operations that only takes a few seconds, the easiest way to manage this is to use the AsyncTask class available in the Android SDK. It will create a new thread for you that will do a specific task, and then notify you when that task is over so you can update your UI.

Here is an example of an AsycTask that calls the GitHub API to calculate the number of repository that contains the “Android” string. While the query is running, a progress bar is shown in the UI.

private class GithubAndroidRepositoryQueryTask extends AsyncTask<String, Integer, String> {

@Override
protected void onPreExecute() {
   super.onPreExecute();
   // Prepare the UI in the main UI thread before executing the task.
   mGitRepositoryProgressBar.setVisibility(View.VISIBLE);
}

@Override
protected String doInBackground(String... params) {
   // Do the operation on a new thread and returns the result. It calls the GitHub API to 
   // calculate the number of repository that contains the Android string
   return getAndroidRepositoryCountFromGitHub();
}

@Override
protected void onProgressUpdate(Integer... progress) {
   // Could be used to update the main UI thread with the progress of the background
   // operation.
}

@Override
protected void onPostExecute(String result) {
   // Receive the result of the operation done in the new thread in the main UI thread and
   // use it to update the UI.
   super.onPostExecute(result);
   mGitRepositoryProgressBar.setVisibility(View.INVISIBLE);
   mGitRepositoryTextView.setText(result);
}
}

And here is how you execute that task. In that case, it’s launched onCreate event of the Activity so the response is visible immediately in the layout, but it could be launched from anywhere else:

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   mGitRepositoryTextView = (TextView) this.findViewById(R.id.github_repositories_tv);
   mGitRepositoryProgressBar = (ProgressBar) this.findViewById(R.id.github_repositories_pb);

   // Fires off an AsyncTask to get the number of Android repositories on GitHub and displays
   // it in the application.
   new GithubAndroidRepositoryQueryTask().execute();
}

When you’re working with threads of any kinds, remember that updating the UI should only be done on the main thread. The Android SDK doesn’t support updating the UI from other threads, so you’ll likely have random crashes and weird behavior if you attempt it.

Also, as a caveat, Google doesn’t recommend relying on showing a progress bar exclusively for long-running operations. They believe that users should be able to keep working in the application and that you should manage what’s going on in the backend.

If you have a simple application that has only a few simple cases it may work, but if you have complex interactions between your data you can sink a lot of time trying to make everything work nicely together and handling what happens if an operation fails.

Still, you can start with a simple AsyncTask and optimize as you go along. In most cases, it’s going to be a good starting point, but as soon you need to execute many tasks at once it won’t be enough. When you’re ready to go further with this, you should take a look at libraries such as RxJava to help you manage your tasks.

Load More