Generating Real-Time Graphs in PSLab Android App
In PSLab Android App, we need to log data from the sensors and correspondingly generate real-time graphs. Real-time graphs mean a data streaming chart that automatically updates itself after every n second. This was different from what we did in Oscilloscope’s graph, here we need to determine the relative time at which the data is recorded from the sensor by the PSLab. Another thing we need to take care of was the range of x axis. Since the data to be streamed is ever growing, setting a large range of the x axis will only make reading sensor data tedious for the user. For this, the solution was to make real time rolling window graph. It’s like when the graph exceeds the maximum range of x axis, the graph doesn’t show the initial plots. For example, if I set that graph should show the data only for the 10-second window when the 11th-second data would be plot, the 1st-second data won’t be shown by the graph and maintains the difference between the maximum and the minimum range of the graph. The graph library we are going to use is MPAndroidChart. Let’s break-down the implementation step by step. First, we create a long variable, startTime which records the time at which the entire process starts. This would be the reference time. Flags make sure when to reset this time. if (flag == 0) { startTime = System.currentTimeMillis(); flag = 1; } We used Async Tasks approach in which the data is from the sensors is acquired in the background thread and the graph is updated in the UI thread. Here we consider an example of the HMC5883L sensor, which is actually Magnetometer. We are calculating time elapsed by subtracting current time with the sartTime and the result is taken as the x coordinate. private class SensorDataFetch extends AsyncTask<Void, Void, Void> { ArrayList<Double> dataHMC5883L = new ArrayList<Double>(); long timeElapsed; @Override protected Void doInBackground(Void... params) { timeElapsed = (System.currentTimeMillis() - startTime) / 1000; entriesbx.add(new Entry((float) timeElapsed, dataHMC5883L.get(0).floatValue())); entriesby.add(new Entry((float) timeElapsed, dataHMC5883L.get(1).floatValue())); entriesbz.add(new Entry((float) timeElapsed, dataHMC5883L.get(2).floatValue())); return null; } As we need to create a rolling window graph we require to add few lines of code with the standard implementation of the graph using MPAndroidChart. This entire code is placed under onPostExecute method of AsyncTasks. The following code sets data set for the Line Chart and tells the Line Chart that a new data is acquired. It’s very important to call notifyDataSetChanged, without this the things won’t work. mChart.setData(data); mChart.notifyDataSetChanged(); Now, we will set the visible range of x axis. This means that the graph window of the graph won’t change until and unless the range set by this method is not achieved. Here we are setting it to be 10 as we need a 10-second window. mChart.setVisibleXRangeMaximum(10); Then we will call moveViewToX method to move the view to the latest entry of the graph. Here, we have passed data.getEntryCount method which returns the no. of data points in the data…
