Quick Start Guide > Your First App > Creating your First SciChart Android App - Part 4
Creating your First SciChart Android App - Part 4

Adding Axes to the SciChartSurface

There are several axis types provided by SciChart. While Y axis can be a Value type axis only, X axis can be either a Value type or a Category type axis. The key difference between those axis types is that using a Value axis, a data point is located on a chart according to its X value. However, using a Category axis, X values are ignored and data points are placed according to their order with equal spaces between them.

In this tutorial, we are going to demonstrate usage of DateAxis as X axis and NumericAxis as Y axis (both are Value axes).

Once an axis is created, you can add it to the corresponding AxisCollection of SciChartSurface:

Adding Axes to the SciChartSurface
Copy Code
DateAxis xAxis = new DateAxis(this);

AxisCollection xAxes = chartSurface.getXAxes();
xAxes.add(xAxis);

Don’t forget to import the used classes, either manually or using Android Studio’s capabilities.

Now, you can configure the X axis to achieve the desired appearance and behaviour. There is a bunch of setXXX(…) methods which can change axis’ properties:

The most important among these are: axis alignmentvisible range, grow by values, axis titleaxis idauto range, major and minor delta and text formatting.

Also there are many styling properties which have an impact on axis’ appearance, such as ticks style, tick labels style, grid lines style, title style, etc.

For example, to set a title on the X axis, you have to call the setAxisTitle(…) method:

Copy Code
xAxis.setAxisTitle("X Axis");

 

Similarly, an Y axis can be added to the SciChartSurface:

Copy Code
NumericAxis yAxis = new NumericAxis(this);

AxisCollection yAxes = chartSurface.getYAxes();
yAxes.add(yAxis);

 

Lets configure the Y axis to appear at the left calling the setAxisAlignment(…) method:

Copy Code
yAxis.setAxisAlignment(AxisAlignment.Left);

 

Using the abovementioned setAxisTitle(…), a title can be added to the Y axis:

Copy Code
yAxis.setAxisTitle("Y Axis");

 

Adding RenerableSeries to the SciChartSurface

Once axes are set up, we are going to make the SciChartSurface to draw a line. SciChart provides special classes called “RenderableSeries” that are responsible for drawing different chart types, such as lines (FastLineRenderableSeries), columns (FastColumnsRenderableSeries), candlestick series (FastCandlestickRenderableSeries), filled area (FastMountainRenderableSeries), heat maps (FastUniformHeatmapRenderableSeries), error bars (FastErrorBarsRenderableSeries), etc.

Every RenderableSeries type has its own features, but there are also many that they have in common, such as the possibility to hide or show a RenderableSeries or to show PointMarkers for every point in it.

As it was mentioned, we are going to use FastLineRenderableSeries in this tutorial. Once the line series is created, it can be added to the RenderableSeries collection of the SciChartSurface:

Copy Code
FastLineRenderableSeries lineSeries = new FastLineRenderableSeries();

RenderableSeriesCollection renderableSeries = chartSurface.getRenderableSeries();

renderableSeries.add(lineSeries);

 

To set a particular color and thickness to the line, you should call the setStrokeStyle(…) method. It accepts a parameter of the PenStyle type. During the creation of a PenStyle instance, you can pass the desired values as parameters to the constructor:

Copy Code
PenStyle penStyle = new SolidPenStyle(ColorUtil.Green, true, 2f, null);

 

Again, don’t forget to import all the used classes.

As you may notice, SciChart provides a special helper class called ColorUtil. It has several predefined integer color constants, for the most polular and widely used colors.

Now, we should tell the line series to use this PenStyle as StrokeStyle:

Copy Code
PenStyle penStyle = new SolidPenStyle(ColorUtil.Green, true, 2f, null);
lineSeries.setStrokeStyle(penStyle);

 

Adding a DataSeries to a RenderableSeries

The line series requires some data to be drawn. For best performance, SciChart provides a bunch of special classes called “DataSeries” which are designed to store data efficiently and access it in a rapid and optimal way.

The most usual DataSeries type is XyDataSeries, which is intended to store two collections, of X and Y values. However, it may not be enough for some RenderableSeries types. For instance, the FastCandlestickRenderableSeries requires four values as a data point (Open, High, Low, Close) instead of a simple X,Y pair. Therefore there is a special DataSeries type called OhlcDataSeries.

In this tutorial we are going to use XyDataSeries for holding data, since it is the DataSeries type FastLineRenderableSeries can work with.

The constructor for a DataSeries requires a data type for every component to be passed in; here, we will use Date for X and Double for Y values:

Copy Code
XyDataSeries<Date, Double> dataSeries = new XyDataSeries<>(Date.class, Double.class);

 

To add data points to the DataSeries, you should call the append(…) method on it. Every DataSeries type provides several overrides of it, allowing to add either a single data point or a bunch at a time. To get the best performance, you should try to append data points in batches as much as possible, using the those append(…) overrides that accept Arrays or Collections.

For this purpose, SciChart provides a special interface called IValues that allows to implement your own collections with fast access to data. There are several default implementations for the primitive types, DoubleValuesFloatValuesIntegerValuesLongValuesShortValues and DateValues. Use these to avoid boxing/unboxing of primitive types, thus enchanching performance of your charts.

In this tutorial, we are going to demonstrate how to use DoubleValues and DateValues. First, you need to initialize instances, passing the desired capacity to the constructor (optionally):

Copy Code
int size = 100;
DateValues xValues = new DateValues(size);
DoubleValues yValues = new DoubleValues(size);

 

Then, you should be able to add some X, Y data to the collections. For the simplicity’s sake, lets use random generated doubles as Y values, and fill the collections in the following “for” loop:

Copy Code
Random random = new Random();
for (double i = 0; i < size; ++i) {

     long xValue = new Date().getTime() + DateIntervalUtil.fromDays(i);
    xValues.add(new Date(xValue));

    yValues.add(random.nextDouble());
}

 

Now, the data values can be appended to the DataSeries:

Copy Code
dataSeries.append(xValues, yValues);

 

Once this is done, you can assign the newly created DataSeries to the RenderableSeries:

Copy Code
lineSeries.setDataSeries(dataSeries);

 

To make the SciChartSurface drawing the line series stretched to the extents of the data range, you should call the zoomExtents() method on it:

Copy Code
chartSurface.zoomExtents();

 

Adding Interaction to the SciChartSurface

Vast majority of possible user interactions with a chart in SciChart is provided by the entities called “chart modifiers”. Using their API, making customization of the available out-of-the-box interactions and creation of new ones becomes simple and straightforward.

There is a bunch of modifiers provided by SciChart for the most common user interactions, such as zooming, panning, inspecting a chart with cursors and hit-testing RenderableSeries or data points: PinchZoomModifierRubberBandXyZoomModifierZoomPanModifierZoomExtentsModifier CursorModifierRolloverModifier, SeriesSelectionModifier etc. As you may notice, all these names follows the “XXXModifier” pattern, and we recommend that you name your custom modifiers in the same way.

For the tutorial’s sake, lets assume you want to allow users to zoom a chart in and out with a pinch gesture and scroll it with a finger. The default PinchZoomModifier and ZoomPanModifier sounds like doing exactly what is required. To add them to the SciChartSurface, you should do something pretty much similar to what we did before with axes and RenderableSeries:

Copy Code
PinchZoomModifier zoomModifier = new PinchZoomModifier();
ZoomPanModifier panModifier = new ZoomPanModifier();

ChartModifierCollection chartModifiers = chartSurface.getChartModifiers();
Copy Code
chartModifiers.add(zoomModifier);
chartModifiers.add(panModifier);

 

There is also a modifier, called “ZoomExtentsModifier”, which allows you to zoom out to the extents of chart’s data instantaneously, double-tapping a chart. Lets add it to the ChartModifierCollection too:

Copy Code
ZoomExtentsModifier zoomExtentsModifier = new ZoomExtentsModifier();
chartModifiers.add(zoomExtentsModifier);

 

Licensing the Application

At this point we are almost done with the set up of the chart. The only thing left is to license the SciChartSurface to allow it to be used in the application.

The SciChart Runtime License is an XML file named license.xml” that provides Customer Info, Order Details and the Expiration Date of your subscribtion:

Copy Code
<LicenseContract>
    <Customer>SciChart Ltd.</Customer>
    <OrderId>123-456</OrderId>
    <LicenseCount>1</LicenseCount>
    < IsTrialLicense>false</IsTrialLicense>
    <SupportExpires>01/01/202000:00:00</SupportExpires>
    <ProductCode>SC-ANDROID-2D-ENTERPRISE-SITE-SRC</ProductCode>
    <KeyCode>ADFVNKJQN123456789…</KeyCode>
< /LicenseContract>

 

 It must be added to a project as a resource file. To do this, right-click the “res” folder in the project’s structure tab and choose the New->Android Resource Directory option from the context menu:

The “New Resource Directory” window will appear:

 

Here, choose the “raw” option from the “Resource Type” drop down list:

The newly added folder should appear in the project’s structure tab:

Now, copy and paste your license file into the “raw” folder:

After this, you have to point the SciChartSurface to the location of the license file. The SciChartSurface class has a special method for this, setRuntimeLicenseKeyFromResource(…), which expects a Context and a relative path to the license file as parameters.

We are going to call it at the very beginning of the onCreate(…) method in the MainActivity class, just after creation of the SciChartSurface instance:

 

The call to setRuntimeLicenseKeyFromResource(…) should be enclosed in a try/catch block, because an exception may be thrown if the license file isn’t found.

Running and Viewing the Application

At this point, the application should compile and run without any issues. To Build it, choose the Build->Make Project option from the Android Studio’s menu:

You can monitor the build’s status using the “Messages” tab at the bottom of the Android Studio:

If you don’t see the “Messages” tab, it can be opened via the View->Tool Windows->Messages option from the menu:

If the build has failed, please try to do the steps again to ensure you haven’t missed something. If you still cannot manage it to succeed, please let us know at http://support.scichart.com.

If the build has succeeded, Android Studio will allow you to Run the application. To do this, ensure it is selected in the “Run/Debug Configuration” dropdown:

Now try to run the application using the Run->Run ‘[app name]’ option from the Android Studio’s menu:

The “Select Deployment Target” window will appear, suggesting to choose a target device from the list of available devices and emulators:

Select the desired one and press the “OK” button. Android Studio will re-build the application again and launch it on the selected device if the build has succeeded:

You should be able to zoom in and out, scroll the chart with fingers and double-tap to zoom out to the data range.

The only thing left is to get rid of the white paddings around the chart. These are declared in the layout file for the activity and can be simply removed either in the text or design mode:

Whithout the paddings the chart gets its final look:

Congratulations! You have just finished your first(probably) charting application using SciChart! We hope this tutorial was useful – please let us know what you think. If you have any ideas or remarks, feel free to share them at http://support.scichart.com.