Tutorial 03 - Adding Series to a Chart

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

Source code for this tutorial is on Github.

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 a Line Plot to the Chart

In this tutorial, we are going to add a Line and a Scatter series onto the chart.

First, we create some XY XyDataSeries data for both the line and scatter plots:

	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)); }

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 add DataSeries lineData to the RenderableSeries lineSeries:

	Copy Code
final IRenderableSeries lineSeries = sciChartBuilder.newLineSeries() .withDataSeries(lineData) .withStrokeStyle(ColorUtil.LightBlue, 2f, true) .build();

Then add it to the surface:

	Copy Code
Surface surface.getRenderableSeries().add(lineSeries);

Add a Scatter Plot

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

	Copy Code
EllipsePointMarker pointMarker = sciChartBuilder .newPointMarker(new EllipsePointMarker()) .withFill(ColorUtil.LightBlue) .withStroke(ColorUtil.Green, 2f) .withSize(10) .build();

Now create the scatterSeries:

	Copy Code
final IRenderableSeries scatterSeries = sciChartBuilder.newScatterSeries() .withDataSeries(scatterData) .withPointMarker(pointMarker) .build();

Then add it to the surface:

	Copy Code
surface.getRenderableSeries().add(scatterSeries);

Add Style

Use the class PenStyle to hold style info. Its instance is created internally in the builder and passed to the lineSeries to draw a stroke.

You can pass a color value as an integer value, however, there are a constants for the most popular colors defined in the ColorUtil class.

Zooming the Chart to the Data Extents

At this point our RenderableSeries is ready to be rendered. Only one detail remains.

We need to bring the RenderableSeries to the Viewport of the SciChartSurface. To do this, you can either set VisibleRanges on the axes manually or call the zoomExtents() method on the SciChartSurface:

	Copy Code
surface.zoomExtents();

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:

Quickstart Guide

Creating your First SciChart Android App - Part 4