The SciChartSurface Type

The root 2D chart view is called the SciChartSurface. This is the Android ViewGroup 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.

First up, let’s start by declaring one.

Are you new to SciChart? Check out our most popular pages to get started below:

Declaring a SciChartSurface Instance

Once the SciChart AARs are added as dependencies to an application’s build configuration, a SciChartSurface instance can be declared in a layout file using the following markup:

Layout file	Copy Code
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.scichart.charting.visuals.SciChartSurface android:id="@+id/chart" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout>

Layout file

Copy Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
    <com.scichart.charting.visuals.SciChartSurface
         android:id="@+id/chart"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" />
 </LinearLayout>

Then, it can be accessed in code (assuming the layout file is called “base_scichart_layout.xml”) for further manipulations:

Java

@Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
     // Inflate the layout from “base_scichart_layout.xml”
    View view = inflater.inflate(R.layout.base_scichart_layout, container, false);

    // Find the surface by id
     SciChartSurface surface = (SciChartSurface) view.findViewById(R.id.chart);

    // Create a numeric X axis
     final IAxis xAxis = new NumericAxis(getActivity());
     xAxis.setAxisTitle("X Axis Title");

    // Turn off AutoRanging and set the VisibleRange
     xAxis.setAutoRange(AutoRange.Never);
     xAxis.setVisibleRange(new DoubleRange(-5d, 20d));

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

    // Create a numeric Y axis
     final IAxis yAxis = new NumericAxis(getActivity());

    // Set a title for Y axis
     yAxis.setAxisTitle("Y Axis Title");

    // Turn off AutoRanging and set the VisibleRange
     xAxis.setAutoRange(AutoRange.Never);
     yAxis.setVisibleRange(new DoubleRange(0d, 100d));

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

    // Create a TextAnnotation
     TextAnnotation textAnnotation = new TextAnnotation(getActivity());

    // Specify the position and alignment for the TextAnnotation
     textAnnotation.setHorizontalAnchorPoint(HorizontalAnchorPoint.Center);
     textAnnotation.setVerticalAnchorPoint(VerticalAnchorPoint.Center);
     textAnnotation.setX1(5.0);
     textAnnotation.setY1(50.0);

    // Set a FontStyle for the TextAnnotation
     FontStyle fontStyle = new FontStyle(70, ColorUtil.Orange);
     textAnnotation.setFontStyle(fontStyle);

    // Set the inscription
     textAnnotation.setText("Hello World!");

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

    // Create interactivity modifiers
     PinchZoomModifier pinchZoom = new PinchZoomModifier();
     ZoomExtentsModifier zoomExtents = new ZoomExtentsModifier();
     ModifierGroup chartModifiers = new ModifierGroup(pinchZoom, zoomExtents);

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

    return view;
 }

To summarize, the code above declares a SciChartSurface, adds two numeric axes, X and Y, onto it, adds a single text annotation and two zoom behaviours:

Also, the surface should appear in the design view of Android Studio.

Creating a SciChartSurface Instance in Code

Process of creation and configuring a SciChartSurface instance in code is essentially the same and quite straightforward. To make it even easier, SciChart Android provides a bunch of helper classes called Chart Builders. Please see the Chart Builders Helper Classes article for more details.

What's Next?

To learn more about how to configure SciChartSurface further, please refer to the following documentation sections:

For a step-by-step instruction on how to create a simple application with SciChart, please see the Quickstart Guide. Also, there are over 30 chart examples that can be found in the downloadable SciChart Android Examples Suite.

Quickstart Guide

Creating your First SciChart Android App - Part 4