Android & Xamarin.Android Charting Documentation - SciChart Android Charts SDK v2.x
Tutorial 03 - Adding Series to a Chart

Following on from Tutorial 02 - Creating a Chart where we created the SciChartSurface control, added an XAxis and a YAxis, we will now add a some RenderableSeries with some data to the chart.

Adding Series to the Chart

In SciChart, there are 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.

Adding RenderableSeries onto a SciChartSurface

In this tutorial, we are going to add a Line and a Scatter series onto the chart. Once created, a RenderableSeries has to be added to the RenderableSeries collection of a SciChartSurface:

Copy Code
// Create and configure a line series
final IRenderableSeries lineSeries = sciChartBuilder.newLineSeries()
        .withStrokeStyle(ColorUtil.LightBlue, 2f, true)
        .build();

// Add a RenderableSeries onto the SciChartSurface
surface.getRenderableSeries().add(lineSeries);

There is a special class called PenStyle designed to hold styling info. Its instance is created internally in the builder and passed to the lineSeries to draw a stroke with it. A color value can be passed as an integer value, however, there are a bunch of constants for the most popular colors defined in the ColorUtil class.

Similarly we can create a Scatter series. It requires a PointMarker instance passed in:

Copy Code
// Create an Ellipse PointMarker for the Scatter Series
EllipsePointMarker pointMarker = sciChartBuilder
        .newPointMarker(new EllipsePointMarker())
        .withFill(ColorUtil.LightBlue)
        .withStroke(ColorUtil.Green, 2f)
        .withSize(10)
        .build();

// Create and configure a scatter series
final IRenderableSeries scatterSeries = sciChartBuilder.newScatterSeries()
        .withPointMarker(pointMarker)
        .build();

// Add a RenderableSeries onto the SciChartSurface
surface.getRenderableSeries().add(scatterSeries);

Adding Data to a RenderableSeries

Then, we would like to add some data to both RenderableSeries. There are special classes called DataSeries which are designed to store and access data efficiently. Since our axes are numeric, we are going to create a DataSeries that accepts numeric values as X and Y. Lets add some data as well:

Copy Code
XyDataSeries lineData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class).build();
XyDataSeries scatterData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class).build();
for (int i = 0; i < 1000; i++)
{
    lineData.append(i, Math.sin(i * 0.1));
    scatterData.append(i, Math.cos(i * 0.1));
}

Now the DataSeries have to be applied to RenderableSeries:

Copy Code
// Create a couple of DataSeries for numeric (Int, Double) data
XyDataSeries lineData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class).build();
XyDataSeries scatterData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class).build();

for (int i = 0; i < 1000; i++)
{
    lineData.append(i, Math.sin(i * 0.1));
    scatterData.append(i, Math.cos(i * 0.1));
}

// Create and configure a line series
final IRenderableSeries lineSeries = sciChartBuilder.newLineSeries()
        .withDataSeries(lineData)
        .withStrokeStyle(ColorUtil.LightBlue, 2f, true)
        .build();

// Create an Ellipse PointMarker for the Scatter Series
EllipsePointMarker pointMarker = sciChartBuilder
.newPointMarker(new EllipsePointMarker())
.withFill(ColorUtil.LightBlue)
.withStroke(ColorUtil.Green, 2f)
.withSize(10)
.build();

// Create and configure a scatter series
final IRenderableSeries scatterSeries = sciChartBuilder.newScatterSeries()
.withDataSeries(scatterData)
.withPointMarker(pointMarker)
.build();

// Add a RenderableSeries onto the SciChartSurface
surface.getRenderableSeries().add(scatterSeries);
surface.getRenderableSeries().add(lineSeries);

Zooming the Chart to the Data Extents

At this point our RenderableSeries are ready to be rendered. The only one detail is left, we need to bring our RenderableSeries to the Viewport of the SciChartSurface. To do this, you can either set VisibleRanges on axes manually or call the zoomExtents() method on the SciChartSurface:

Copy Code
surface.zoomExtents();
Please note that the zoomExtents() method should always be called in the end of chart set up. This will prevent VisibleRanges on axes from being overridden after the call to zoomExtents().

Viewing Results

Build and run the application. Both RenderableSeries should appear on the chart:

 

See Also

Quickstart Guide