What does in real-time mean

When an event or function is processed instantaneously, it is said to occur in real-time. To say something takes place in real-time is the same as saying it is happening "live" or "on-the-fly." For example, the graphics in a 3D action game are rendered in real-time by the computer's video card. You might have seen the use of a real-time scenario in a chat application and the likes.

In our tutorial, we are going to use React as a frontend framework. We will make use of a chart using react-chartjs-2 and chart.js package, which provides React components for easy chart integration (pie, bar, line e.t.c) into a React app. Mind you, we are using material UI for design.

We are going to simulate an API with a getData function and get it to show on our chart in real-time. You need to get the boilerplate/starter code ready.

Clone https://github.com/JamesUgbanu/real-time-chart-starter and run npm install to install the necessary dependencies.

It should look like the below when you run npm start

Great job if you see the above :)

Creating a Sample Dataset

We already have a set of data in the starter template, which is been consumed by our chart component. Next, we will reproduce a real-time experience.

Now we will create two (2) function getRandomInt and getData in App.js.

getRandomInt is a function that allows two (2) parameters and then returns a range between them.

const getRandomInt = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min + 1)) + min;
};

getData generates an integer, then adds it to the array in the state while removing the first number in the array in 1.5seconds.

const getData = () => {
    setTimeout(() => {
      setData((prevData) => {
        const newData = [...prevData];
        const random = getRandomInt(100, 200);
        newData.shift();
        newData.push(random);

        return newData;
      });
    }, 1500);
  };

What the useEffect hooks do is to call getData function when component mount and when data state changes

useEffect(() => {
getData()
}, [data]);

That's it. Full code here github.com/JamesUgbanu/react-real-time-chart