Quick Start Guide > Tutorials (Java Android) > Tutorial 02 - Creating a Chart
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.

Source code for this tutorial can be found at our SciChart.Android.Examples Github Repository under v5.x > Tutorials

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  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!

 

A Note on Licensing SciChart.

The SciChart Android control comes with an inbuilt fully-functional 30-day trial. You will need to apply a trial license to the applications that you build, including the tutorial.

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

See Also