Tutorial 02 - Creating a Chart

In this tutorial we explain how to create a basic chart. In the previous Tutorial we explained how to add SciChart libraries as dependencies to an Android project.

Source code for this tutorial can be found at SciChart.Android.Examples Github Repository

The SciChartSurface Type

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

Creating SciChartSurface

Once SciChart libraries have been added as dependencies, you can access and use SciChart classes in your Android projects. SciChartSurface can be added to the activity layout either in the Android Studio 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 easier-to-read and concise, SciChart has helper classes. These follow the XXXBuilder naming convention. They let the developer create and initialize objects with a set of methods. The topmost builder class is called SciChartBuilder.

Create a Chart

First create a LinearLayout by replacing the contents of activity_main.xml with.

Example Title	Copy Code
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/chart_layout" tools:context="com.scichart.gettingstarted.MainActivity" android:orientation="vertical"> </LinearLayout>

Example Title

Copy Code

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:id="@+id/chart_layout" 
tools:context="com.scichart.gettingstarted.MainActivity" 
android:orientation="vertical"> 
 
</LinearLayout>

Then paste the code below into MainActivity.java.

This will create a chart with two axes and the Hello World annotation. You can pinch-zoom and pan this chart:

Example Title	Copy Code
Create SciChartSurface using Builders @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); }

Example Title

Copy Code

    Create SciChartSurface using Builders
    @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.

Quickstart Guide

Creating your First SciChart Android App - Part 2

Creating your First SciChart Android App - Part 3

Creating your First SciChart Android App - Part 4