Android & Xamarin.Android Charting Documentation - SciChart Android Charts SDK v2.x
Tutorial 02 - Creating a Chart

This article is a continuation of a tutorial series on how to create a chart using SciChart Android. In the previous article was explained how to add SciChart libraries as dependencies to an Android project. It can be found here: Tutorial 01 - Adding SciChart libraries as dependencies.

Licensing SciChart

The SciChart Android control comes with an inbuilt fully-functional 30-day trial. During the trial period the SciChartSurface control displays a watermark “Powered by SciChart”. At the end of the trial period, applications you have built with SciChart will cease to work and you will not be able to keep working on them. In order to continue using SciChart, please Contact Us to buy a perpetual license key or to ask for an extended trial license key.

A license key can be applied following the instructions at www.scichart.com/licensing-scichart-android.

If you have applied a perpetual license key correctly, you should be able to run your applications on devices and without seeing the "Powered by SciChart" watermark.

The SciChartSurface Type

The root 2D chart Android control is called the SciChartSurface. This is the UI control you will be adding to your applications wherever you need a chart. You can add more than one SciChartSurface, you can configure them independently, and you can link them together.

Creating SciChartSurface

Once SciChart libraries have been added as dependencies, you should be able to access and use SciChart classes in your Android projects. SciChartSurface can be added to your activity layout either in the AndroidStudio designer or in code. In this tutorial, we are going to show how to do this in code.

For a detailed guide on how to add SciChartSurface in designer please see the Quickstart Guide: Creating your First SciChart Android App - Part 2.

SciChartBuilder Helper Classes

In order to simplify the chart creation process and make code more convenient and concise, there is a bunch or helper classes in SciChart. They follow the XXXBuilder naming pattern and allow to create and initialize everything with a set of withXXX(…) methods. The topmost builder class is called SciChartBuilder.

Create a Chart

Assuming that your layout file is called "activity_main.xml" and it declares a LinerLayout with the "chart_layout" ID, the following code will create a chart with two axes and the "Hello World" annotation, capable of being pinch-zoomed and panned:

Create SciChartSurface using Builders
Copy Code
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Create a SciChartSurface
        SciChartSurface surface = new SciChartSurface(this);

        // Get a layout declared in "activity_main.xml" by id
        LinearLayout chartLayout = (LinearLayout) findViewById(R.id.chart_layout);

        // Add the SciChartSurface to the layout
        chartLayout.addView(surface);

        // Initialize the SciChartBuilder
        SciChartBuilder.init(this);

        // Obtain the SciChartBuilder instance
        final SciChartBuilder sciChartBuilder = SciChartBuilder.instance();

        // Create a numeric X axis
        final IAxis xAxis = sciChartBuilder.newNumericAxis()
                .withAxisTitle("X Axis Title")
                .withVisibleRange(-5, 15)
                .build();

        // Create a numeric Y axis
        final IAxis yAxis = sciChartBuilder.newNumericAxis()
                .withAxisTitle("Y Axis Title").withVisibleRange(0, 100).build();

        // Create a TextAnnotation and specify the inscription and position for it
        TextAnnotation textAnnotation = sciChartBuilder.newTextAnnotation()
                .withX1(5.0)
                .withY1(55.0)
                .withText("Hello World!")
                .withHorizontalAnchorPoint(HorizontalAnchorPoint.Center)
                .withVerticalAnchorPoint(VerticalAnchorPoint.Center)
                .withFontStyle(20, ColorUtil.White)
                .build();

        // Create interactivity modifiers
        ModifierGroup chartModifiers = sciChartBuilder.newModifierGroup()
                .withPinchZoomModifier().withReceiveHandledEvents(true).build()
                .withZoomPanModifier().withReceiveHandledEvents(true).build()
                .build();

        // Add the Y axis to the YAxes collection of the surface
        Collections.addAll(surface.getYAxes(), yAxis);

        // Add the X axis to the XAxes collection of the surface
        Collections.addAll(surface.getXAxes(), xAxis);

        // Add the annotation to the Annotations collection of the surface
        Collections.addAll(surface.getAnnotations(), textAnnotation);

        // Add the interactions to the ChartModifiers collection of the surface
        Collections.addAll(surface.getChartModifiers(), chartModifiers);
    }

Congratulations! You have just created your first SciChartSurface!

See Also

Quickstart Guide