Search Results for

    Show / Hide Table of Contents

    SciChart Android Tutorial - Create a simple 2D Chart

    In this SciChart Android 3D tutorial, you will learn to:

    • create a 2D Chart
    • add X and Y Axes to a Chart;
    • render a Simple Line and Scatter Series.
    Note

    This tutorial assumes that you’ve already know how to Link SciChart Android and Add SciChartSurface instance into your Fragment. If you need more information - please read the following articles:

    • Integrating SciChart libraries
    • The SciChartSurface Type

    Getting Started

    This tutorial is suitable for Java and Kotlin.

    Note

    Source code for this tutorial can be found at our Github Repository: Java and Kotlin Tutorials Repository

    Adding Axes to the SciChartSurface

    Once you have added a SciChartSurface into your Fragment, you will not see anything drawn because you need to add axes. This is important thing here - two axes X and Y has to be added to your surface. This is a bare minimum to see drawn grid on your device.

    • Java
    • Java with Builders API
    • Kotlin
    • Xamarin.Android
    final IAxis xAxis = new NumericAxis(this);
    xAxis.setAxisTitle("X Axis Title");
    
    final IAxis yAxis = new NumericAxis(this);
    yAxis.setAxisTitle("Y Axis Title");
    
    UpdateSuspender.using(surface, () -> {
        Collections.addAll(surface.getXAxes(), xAxis);
        Collections.addAll(surface.getYAxes(), yAxis);
    });
    
    final IAxis xAxis = sciChartBuilder.newNumericAxis()
            .withAxisTitle("X Axis Title")
            .build();
    
    final IAxis yAxis = sciChartBuilder.newNumericAxis()
            .withAxisTitle("Y Axis Title")
            .build();
    
    UpdateSuspender.using(surface, () -> {
        Collections.addAll(surface.getXAxes(), xAxis);
        Collections.addAll(surface.getYAxes(), yAxis);
    });
    
    val xAxis: IAxis = NumericAxis(this)
    val yAxis: IAxis = NumericAxis(this)
    
    UpdateSuspender.using(surface) {
        Collections.addAll(surface.xAxes, xAxis)
        Collections.addAll(surface.yAxes, yAxis)
    }
    
    var xAxis = new NumericAxis(this);
    var yAxis = new NumericAxis(this);
    
    using (surface.SuspendUpdates())
    {
        surface.XAxes.Add(xAxis);
        surface.YAxes.Add(yAxis);
    }
    

    Empty SciChartSurface

    Adding Series to the Chart

    Now, we would like to see something more than just empty grid, e.g. Some Scatter Chart or a Line Chart. To draw some data in chart we need to create 3D DataSeries and RenderableSeries.

    The DataSeries is a class which is responsible for storing data which should be displayed. For more information about the DataSeries types available in SciChart - refer to the DataSeries Types article.

    The RenderableSeries on the other hand are the special classes in SciChart, that determine how data should be visualized by chart. You can find more information about RenderableSeries in the 2D Chart Types.

    In this tutorial, we are going to add a Line and a Scatter series onto the chart. First, let's declare the DataSeries for both and generate some data for them below:

    • Java
    • Java with Builders API
    • Kotlin
    • Xamarin.Android
    final XyDataSeries lineDataSeries = new XyDataSeries(Integer.class, Double.class);
    final XyDataSeries scatterDataSeries = new XyDataSeries(Integer.class, Double.class);
    
    for (int i = 0; i < 1000; i++) {
        lineDataSeries.append(i, Math.sin(i * 0.1));
        scatterDataSeries.append(i, Math.cos(i * 0.1));
    }
    
    final XyDataSeries lineData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class).build();
    final XyDataSeries scatterData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class).build();
    
    for (int i = 0; i < 1000; i++) {
        lineData.append(i, Math.sin(i * 0.1));
        scatterData.append(i, Math.cos(i * 0.1));
    }
    
    val lineDataSeries = XyDataSeries(Int::class.javaObjectType, Double::class.javaObjectType)
    val scatterDataSeries = XyDataSeries(Int::class.javaObjectType, Double::class.javaObjectType)
    
    for (i in 0..999) {
        lineDataSeries.append(i, Math.sin(i * 0.1))
        scatterDataSeries.append(i, Math.cos(i * 0.1))
    }
    
    var lineDataSeries = new XyDataSeries<int, double>();
    var scatterDataSeries = new XyDataSeries<int, double>();
    
    for (int i = 0; i < 999; i++)
    {
        lineDataSeries.Append(i, Math.Sin(i * 0.1));
        scatterDataSeries.Append(i, Math.Cos(i * 0.1));
    }
    

    The next step is to create Line and Scatter RenderableSeries and provide previously created DataSeries to it. Please note, that Scatter Series requires a PointMarker to be drawn.

    • Java
    • Java with Builders API
    • Kotlin
    • Xamarin.Android
    final IRenderableSeries lineSeries = new FastLineRenderableSeries();
    lineSeries.setDataSeries(lineDataSeries);
    
    final EllipsePointMarker pointMarker = new EllipsePointMarker();
    pointMarker.setFillStyle(new SolidBrushStyle(0xFF32CD32));
    pointMarker.setSize(10, 10);
    
    final IRenderableSeries scatterSeries = new XyScatterRenderableSeries();
    scatterSeries.setDataSeries(scatterDataSeries);
    scatterSeries.setPointMarker(pointMarker);
    
    final IRenderableSeries lineSeries = sciChartBuilder.newLineSeries()
            .withDataSeries(lineData)
            .build();
    
    final EllipsePointMarker pointMarker = sciChartBuilder
            .newPointMarker(new EllipsePointMarker())
            .withFill(0xFF32CD32)
            .withSize(10)
            .build();
    
    final IRenderableSeries scatterSeries = sciChartBuilder.newScatterSeries()
            .withDataSeries(scatterData)
            .withPointMarker(pointMarker)
            .build();
    
    val lineSeries: IRenderableSeries = FastLineRenderableSeries()
    lineSeries.dataSeries = lineDataSeries
    
    val pointMarker = EllipsePointMarker()
    pointMarker.fillStyle = SolidBrushStyle(-0xcd32ce)
    pointMarker.setSize(10, 10)
    
    val scatterSeries: IRenderableSeries = XyScatterRenderableSeries()
    scatterSeries.dataSeries = scatterDataSeries
    scatterSeries.pointMarker = pointMarker
    
    var lineSeries = new FastLineRenderableSeries() { DataSeries = lineDataSeries };
    var scatterSeries = new XyScatterRenderableSeries()
    {
        DataSeries = scatterDataSeries,
        PointMarker = new EllipsePointMarker()
        {
            Width = 10,
            Height = 10,
            FillStyle = new SolidBrushStyle(0xFF32CD32)
        }
    };
    

    Finally, we need to add newly created series into the renderableSeries collection, like so:

    • Java
    • Java with Builders API
    • Kotlin
    • Xamarin.Android
    UpdateSuspender.using(surface, () -> {
        Collections.addAll(surface.getRenderableSeries(), lineSeries, scatterSeries);
    });
    
    UpdateSuspender.using(surface, () -> {
        Collections.addAll(surface.getRenderableSeries(), lineSeries, scatterSeries);
    });
    
    UpdateSuspender.using(surface) {
        Collections.addAll(surface.renderableSeries, lineSeries, scatterSeries)
    }
    
    using (surface.SuspendUpdates())
    {
        surface.RenderableSeries.Add(lineSeries);
        surface.RenderableSeries.Add(scatterSeries);
    }
    

    Which will render the following Chart:

    Simple Chart

    Note

    Please note that we've added axes and renderableSeries to SciChartSurface inside IUpdateSuspender.using(ISuspendable, Runnable) block. This allows to suspend surface instance and refresh it only one time after you finished all needed operations. That's highly recommended technique, if you want to omit performance decrease due to triggering refreshes on every operation which could be performed in one batch.

    Where to Go From Here?

    You can download the final project from our Java and Kotlin Tutorials Repository.

    Also, you can find next tutorial from this series here - SciChart Android Tutorial - Zooming and Panning Behavior.

    Of course, this is not the limit of what you can achieve with the SciChart Android. Our documentation contains lots of useful information, some of the articles you might want to read are listed below:

    • Axis Types
    • 2D Chart Types
    • Chart Modifiers

    Finally, start exploring. The SciChart Android library and functionality is quite extensive. You can look into our SciChart Android Examples Suite which are full of 2D and 3D examples, which are also available on our GitHub

    Back to top © 2022 SciChart. All rights reserved.