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.
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)); } |
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(); |
Viewing Results
Build and run the application. Both RenderableSeries should appear on the chart: