Pre loader

Implementing Scrolling Realtime (FIFO) Line Charts in Android

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
0

Hi.

We want to use your Android Chart library in our project. I’m getting familiar with it and I don’t totally gets how to implement Scrolling Realtime (FIFO) Line Chart.

What we want to do: our copmany wants an app that will represent the data on the line charts from their sensors. I need real-time (FIFO) representation from 1 to 16 charts in RecyclerView.

The guide here doesn’t cover the whole implementation (for example, we add data to XyDataSeries, but where to add these series to surface is not indicated). And link to github is not working also.

Do you have some example code or documentation regarding it?

Version
v4.4
  • You must to post comments
0
0

Hi Yevhen,

Thank you for your question. For RecyclerView we suggest to switch RenderSurface implementation to Canvas based one . This allows to avoid overhead caused by using OpenGL based ones.

Note: when RecyclerView recycles Views it detaches them from Android View tree and this triggers disposing of OpenGL resources, which then will be reallocated when chart will be added on screen again – this isn’t very good for performance + can lead to visual bugs like black chart.

To switch RenderSurface with latest release you can modify XML with chart and add renderSurface=”canvas” attribute:

<com.scichart.charting.visuals.SciChartSurface
    android:id="@+id/chartView"
    android:layout_width="0dp"
    android:layout_height="106dp"
    app:renderSurface="canvas"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toEndOf="@+id/channelNumber" />

Also, in the code sample you emailed to us, we noticed that in your RecyclerView.ViewHolder you recreate line series in bindChart() and add it into RenderableSeries collection of chart without cleaning it. This means that every time this method its called – you add new line series that draws the same data. So if it’s called 100 times – you’ll have 100 line series in same chart which take their data from same dataSeries. Eventually this leads to hanging of app, because chart can’t render so many series in time.

Here is an example of how to use RecyclerView.ViewHolder and bindChart() efficiently, by moving the work to create series into the constructor.

class MyViewHolder extends RecyclerView.ViewHolder {

        private final ItemBinding binding;

        private final IRenderableSeries renderableSeries = sciChartBuilder.newLineSeries()
                .withStrokeStyle(ColorUtil.Brown, 2f, true)
                .build();


        // Do setup of the chart here in the constructor
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);

            binding = ItemBinding.bind(itemView);

            // Create a numeric X axis
            final IAxis xAxis = sciChartBuilder.newNumericAxis()
                    .withDrawMajorTicks(false)
                    .withDrawMinorTicks(false)
                    .withDrawLabels(false)
                    .withDrawMajorGridLines(false)
                    .withDrawMinorGridLines(false)
                    .withDrawMajorBands(false)
                    .build();
            // Create a numeric Y axis
            final IAxis yAxis = sciChartBuilder.newNumericAxis()
                    .withAxisAlignment(AxisAlignment.Left)
                    .withDrawMinorTicks(false)
                    .withDrawMinorGridLines(false)
                    .withDrawMajorBands(false)
                    .withAutoRangeMode(AutoRange.Never)
                    .withVisibleRange(-100, 100)
                    .withVisibleRangeLimit(new DoubleRange(-100d, 100d))
                    .withMaxAutoTicks(3)
                    .build();

            final SciChartSurface chartSurface = binding.chartView;

            // Add the Y axis to the YAxes collection of the surface
            Collections.addAll(chartSurface.getYAxes(), yAxis);
            // Add the X axis to the XAxes collection of the surface
            Collections.addAll(chartSurface.getXAxes(), xAxis);
            // add renderable series
            Collections.addAll(chartSurface.getRenderableSeries(), renderableSeries);
            chartSurface.setTheme(R.style.SciChart_White_Theme);
        }

        // Do as little work as possible in bindChart
        public void bindChart(Chart chart) {
            binding.channelNumber.setText(String.valueOf(chart.getItemName()));

            renderableSeries.setDataSeries(chart.getDataSeries());
            binding.chartView.zoomExtentsX();
        }
    }

This should make app more responsible, prevent ANR and prevent issue with black chart.

Of course there some other places to check for optimisation. Ensure that when you are updating data, you do not update data one point at a time.

We would suggest to aggregate your data into batches ( e.g. instead of 7 append calls with 1 point, do 1 append call with 7 points ) or at least use UpdateSuspender API to prevent unnecessary redraws of the chart.

This should make scichart perform very smoothly inside RecyclerView and in an app with fast updating data.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies