The Stacked Column Series Type
The Stacked Column series can be created by using StackedColumnRenderableSeries and one of the provided collections, which are used to stack columns Horizontally or Vertically. Stacked Column series shares most of its properties with the regular Column Series, in addition the columns are automatically vertically stacked (the Y-Values are aggregated) or horizontally grouped.
There are 2 available collections to work with StackedColumnRenderableSeries:
- VerticallyStackedColumnsCollection - allows to stack columns vertically;
- HorizontallyStackedColumnsCollection - allows to stack (group) columns horizontally.
Note
In multi axis scenarios, a series has to be assigned to particular X and Y axes. This can be done by passing the axes IDs to the xAxisId, yAxisId properties.
Note
Examples of the Stacked Column Series can be found in the SciChart Android Examples Suite as well as on GitHub:
How the Stacking Works for Column Series
For Stacked Column Series, it's possible to perform either Vertical or Horizontal stacking, or even both at the same time.
Vertical Stacking
Vertical Stacking of IStackedColumnRenderableSeries is handled by special renderableSeries - VerticallyStackedColumnsCollection.
Basically, it's a simple ObservableCollection<E> of Stacked Column Series, where the order of items in it determines how series should be stacked and drawn - the first item will be drawn as regular column series and the rest will be stacked on top of each other.
If you want to have several sets of Stacked Column Series which should be stacked independently, all you need to do is to create the corresponding amount of VerticallyStackedColumnsCollection which will hold appropriate IStackedColumnRenderableSeries.
Horizontal Stacking (Grouping)
Horizontal Stacking of Stacked Column Series is very similar to the Vertical one. The only difference is that it stacks (groups) its items horizontally. By default it supports stacking of any IStackedColumnRenderableSeries implementor.
For horizontal Stacking, you can define spacing, which depends on spacingMode, as well as whole group dataPointWidth using the following properties:
- spacing - if you use Absolute mode then it accepts value in pixels, and if you use Relative mode - it expects value from
0 to 1
, which tells how much of the available space it should use relatively to each column size; - spacingMode - Absolute or Relative modes are available through SpacingMode;
- dataPointWidth - specifies how much space the whole stacked group occupies, varying from 0 to 1 (when columns are conjoined).
If you need to have both vertical and horizontal stacking at the same time, just use VerticallyStackedColumnsCollection (which conforms to IStackedColumnRenderableSeries) inside your HorizontallyStackedColumnsCollection.
Create a Stacked Column Series
To create a Stacked Column Series, use the following code:
@Override
protected void initExample(@NonNull SciChartSurface surface) {
// declare arrays with data to append
final double[] porkData = new double[]{10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11};
final double[] vealData = new double[]{12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10};
final double[] tomatoesData = new double[]{7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22};
final double[] cucumberData = new double[]{16, 10, 9, 8, 22, 14, 12, 27, 25, 23, 17, 17};
final double[] pepperData = new double[]{7, 24, 21, 11, 19, 17, 14, 27, 26, 22, 28, 16};
// declare and append data into data series
final IXyDataSeries<Double, Double> ds1 = new XyDataSeries<>(Double.class, Double.class);
final IXyDataSeries<Double, Double> ds2 = new XyDataSeries<>(Double.class, Double.class);
final IXyDataSeries<Double, Double> ds3 = new XyDataSeries<>(Double.class, Double.class);
final IXyDataSeries<Double, Double> ds4 = new XyDataSeries<>(Double.class, Double.class);
final IXyDataSeries<Double, Double> ds5 = new XyDataSeries<>(Double.class, Double.class);
final int data = 1992;
for (int i = 0; i < porkData.length; i++) {
double xValue = data + i;
ds1.append(xValue, porkData[i]);
ds2.append(xValue, vealData[i]);
ds3.append(xValue, tomatoesData[i]);
ds4.append(xValue, cucumberData[i]);
ds5.append(xValue, pepperData[i]);
}
// declare few StackedColumnRenderableSeries and assign data series to draw
final StackedColumnRenderableSeries porkSeries = createStackedColumn(ds1, 0xff226fb7);
final StackedColumnRenderableSeries vealSeries = createStackedColumn(ds2, 0xffff9a2e);
final StackedColumnRenderableSeries tomatoSeries = createStackedColumn(ds3, 0xffdc443f);
final StackedColumnRenderableSeries cucumberSeries = createStackedColumn(ds4, 0xffaad34f);
final StackedColumnRenderableSeries pepperSeries = createStackedColumn(ds5, 0xff8562b4);
// wrap porkSeries and vealSeries into VerticallyStackedColumnCollection to stack them vertically
final VerticallyStackedColumnsCollection verticalCollection1 = new VerticallyStackedColumnsCollection();
verticalCollection1.add(porkSeries);
verticalCollection1.add(vealSeries);
// wrap cucumberSeries, cucumberSeries and pepperSeriesinto VerticallyStackedColumnCollection to stack them vertically
final VerticallyStackedColumnsCollection verticalCollection2 = new VerticallyStackedColumnsCollection();
verticalCollection2.add(tomatoSeries);
verticalCollection2.add(cucumberSeries);
verticalCollection2.add(pepperSeries);
// wrap previously created VerticallyStackedColumnCollection into HorizontallyStackedColumnsCollection to stack resulting series horizontally
final HorizontallyStackedColumnsCollection columnsCollection = new HorizontallyStackedColumnsCollection();
columnsCollection.setSpacing(0f);
columnsCollection.add(verticalCollection1);
columnsCollection.add(verticalCollection2);
UpdateSuspender.using(surface, () -> {
Collections.addAll(surface.getXAxes(), new NumericAxis(requireContext()));
Collections.addAll(surface.getYAxes(), new NumericAxis(requireContext()));
Collections.addAll(surface.getRenderableSeries(), columnsCollection);
});
}
private StackedColumnRenderableSeries createStackedColumn(IXyDataSeries<Double, Double> dataSeries, int fill) {
final StackedColumnRenderableSeries stackedColumnSeries = new StackedColumnRenderableSeries();
stackedColumnSeries.setDataSeries(dataSeries);
stackedColumnSeries.setFillBrushStyle(new SolidBrushStyle(fill));
stackedColumnSeries.setStrokeStyle(new SolidPenStyle(Color.TRANSPARENT, true, 0f, null));
return stackedColumnSeries;
}
100% Stacked Columns
Similarly to Stacked Mountain Series in SciChart - it is possible to have Stacked Columns, that fills in all available vertical space. This mode is called 100% Stacked Columns.
To use it on your VerticallyStackedColumnsCollection, just change the corresponding property of your collection to isOneHundredPercent