Demonstrates how to add Error Bars to an Android Line or Scatter Chart. There are two Error Bar Series types in SciChart Android:

– FastErrorBarsRenderableSeries which can render HlDataSeries or OhlcDataSeries

– FastFixedErrorBarsRenderableSeries which can be used to render an XyDataSeries (which contains one X-point and one Y-point), XyyDataSeries (renders Y values), XyzDataSeries, HlDataSeries and OhlcDataSeries(renders Close values). Error values are fixed and specified by calling setErrorLow() and setErrorHigh() methods.

Tip!

Do you need to change the width of a error bar? Try calling the setDataPointWidth() method passing in any number from 0.0 to 1.0. This alters how much space the bar takes up.

// Kotlin: ShiftedAxesFragment.kt

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// ShiftedAxesFragment.kt is part of SCICHART®, High Performance Scientific Charts
// For full terms and conditions of the license, see http://www.scichart.com/scichart-eula/
//
// This source code is protected by international copyright law. Unauthorized
// reproduction, reverse-engineering, or distribution of all or any portion of
// this source code is strictly prohibited.
//
// This source code contains confidential and proprietary trade secrets of
// SciChart Ltd., and should at no time be copied, transferred, sold,
// distributed or made available without express written permission.
//******************************************************************************

package com.scichart.examples.fragments.examples2d.modifyAxisBehavior.kt

import com.scichart.charting.layoutManagers.DefaultLayoutManager
import com.scichart.charting.layoutManagers.DefaultLayoutManager.Builder
import com.scichart.charting.layoutManagers.ILayoutManager
import com.scichart.charting.layoutManagers.LeftAlignmentInnerAxisLayoutStrategy
import com.scichart.charting.layoutManagers.TopAlignmentInnerAxisLayoutStrategy
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.axes.AxisAlignment
import com.scichart.charting.visuals.axes.AxisAlignment.Left
import com.scichart.charting.visuals.axes.AxisAlignment.Top
import com.scichart.charting.visuals.axes.IAxis
import com.scichart.core.IServiceContainer
import com.scichart.core.common.Size
import com.scichart.data.model.DoubleRange
import com.scichart.examples.data.DataManager
import com.scichart.examples.fragments.base.ExampleSingleChartBaseFragment
import com.scichart.examples.utils.scichartExtensions.*

class ShiftedAxesFragment : ExampleSingleChartBaseFragment() {

    override fun showDefaultModifiersInToolbar(): Boolean = false

    override fun initExample(surface: SciChartSurface) {
        val butterflyCurve = DataManager.getInstance().getButterflyCurve(20000)

        surface.suspendUpdates {
            xAxes { numericAxis {
                axisAlignment = Top
                drawMajorTicks = false
                majorTickLineStyle = SolidPenStyle(0xFFFFFFFF, 2f)
                setIsCenterAxis(true)
                growBy = DoubleRange(0.1, 0.1)
                textFormatting = "0.0"
            }}
            yAxes { numericAxis {
                axisAlignment = Left
                drawMajorTicks = false
                majorTickLineStyle = SolidPenStyle(0xFFFFFFFF, 2f)
                setIsCenterAxis(true)
                growBy = DoubleRange(0.1, 0.1)
                textFormatting = "0.0"
            }}
            renderableSeries {
                fastLineRenderableSeries {
                    xyDataSeries<Double, Double> {
                        acceptsUnsortedData = true
                        append(butterflyCurve.xValues, butterflyCurve.yValues)
                    }

                    sweepAnimation { duration = 20000 }
                }
            }
            chartModifiers { defaultModifiers() }
        }
    }

    private class CenterLayoutManager(xAxis: IAxis, yAxis: IAxis) : ILayoutManager {
        private var isFirstLayout = false

        // need to override default inner layout strategies for bottom and right aligned axes
        // because xAxis has right axis alignment and yAxis has bottom axis alignment
        private val defaultLayoutManager: DefaultLayoutManager = Builder()
            .setLeftInnerAxesLayoutStrategy(CenteredLeftAlignmentInnerAxisLayoutStrategy(xAxis))
            .setTopInnerAxesLayoutStrategy(CenteredTopAlignmentInnerAxisLayoutStrategy(yAxis))
            .build()

        override fun attachAxis(axis: IAxis, isXAxis: Boolean) {
            defaultLayoutManager.attachAxis(axis, isXAxis)
        }

        override fun detachAxis(axis: IAxis) {
            defaultLayoutManager.detachAxis(axis)
        }

        override fun onAxisPlacementChanged(axis: IAxis, oldAxisAlignment: AxisAlignment, oldIsCenterAxis: Boolean, newAxisAlignment: AxisAlignment, newIsCenterAxis: Boolean) {
            defaultLayoutManager.onAxisPlacementChanged(axis, oldAxisAlignment, oldIsCenterAxis, newAxisAlignment, newIsCenterAxis)
        }

        override fun attachTo(services: IServiceContainer) {
            defaultLayoutManager.attachTo(services)

            // need to perform 2 layout passes during first layout of chart
            isFirstLayout = true
        }

        override fun detach() {
            defaultLayoutManager.detach()
        }

        override fun isAttached(): Boolean {
            return defaultLayoutManager.isAttached
        }

        override fun onLayoutChart(width: Int, height: Int): Size {
            // need to perform additional layout pass if it is a first layout pass
            // because we don't know correct size of axes during first layout pass
            if (isFirstLayout) {
                defaultLayoutManager.onLayoutChart(width, height)
                isFirstLayout = false
            }

            return defaultLayoutManager.onLayoutChart(width, height)
        }
    }

    private class CenteredTopAlignmentInnerAxisLayoutStrategy(private val yAxis: IAxis) : TopAlignmentInnerAxisLayoutStrategy() {
        override fun layoutAxes(left: Int, top: Int, right: Int, bottom: Int) {
            // find the coordinate of 0 on the Y Axis in pixels
            // place the stack of the top-aligned X Axes at this coordinate
            val topCoord = yAxis.currentCoordinateCalculator.getCoordinate(0.0)
            layoutFromTopToBottom(left, topCoord.toInt(), right, axes)
        }
    }

    private class CenteredLeftAlignmentInnerAxisLayoutStrategy(private val xAxis: IAxis) : LeftAlignmentInnerAxisLayoutStrategy() {
        override fun layoutAxes(left: Int, top: Int, right: Int, bottom: Int) {
            // find the coordinate of 0 on the X Axis in pixels
            // place the stack of the left-aligned Y Axes at this coordinate
            val leftCoord = xAxis.currentCoordinateCalculator.getCoordinate(0.0)
            layoutFromLeftToRight(leftCoord.toInt(), top, bottom, axes)
        }
    }
}

// Java: ShiftedAxesFragment.java

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// ShiftedAxesFragment.java is part of SCICHART®, High Performance Scientific Charts
// For full terms and conditions of the license, see http://www.scichart.com/scichart-eula/
//
// This source code is protected by international copyright law. Unauthorized
// reproduction, reverse-engineering, or distribution of all or any portion of
// this source code is strictly prohibited.
//
// This source code contains confidential and proprietary trade secrets of
// SciChart Ltd., and should at no time be copied, transferred, sold,
// distributed or made available without express written permission.
//******************************************************************************

package com.scichart.examples.fragments.examples2d.modifyAxisBehavior;

import androidx.annotation.NonNull;

import com.scichart.charting.layoutManagers.DefaultLayoutManager;
import com.scichart.charting.layoutManagers.ILayoutManager;
import com.scichart.charting.layoutManagers.LeftAlignmentInnerAxisLayoutStrategy;
import com.scichart.charting.layoutManagers.TopAlignmentInnerAxisLayoutStrategy;
import com.scichart.charting.model.dataSeries.XyDataSeries;
import com.scichart.charting.visuals.SciChartSurface;
import com.scichart.charting.visuals.axes.AxisAlignment;
import com.scichart.charting.visuals.axes.IAxis;
import com.scichart.charting.visuals.renderableSeries.FastLineRenderableSeries;
import com.scichart.core.IServiceContainer;
import com.scichart.core.common.Size;
import com.scichart.core.framework.UpdateSuspender;
import com.scichart.examples.data.DataManager;
import com.scichart.examples.data.DoubleSeries;
import com.scichart.examples.fragments.base.ExampleSingleChartBaseFragment;

import java.util.Collections;

public class ShiftedAxesFragment extends ExampleSingleChartBaseFragment {

    public boolean showDefaultModifiersInToolbar() {
        return false;
    }

    @Override
    protected void initExample(@NonNull SciChartSurface surface) {
        final IAxis xAxis = sciChartBuilder.newNumericAxis().withAxisAlignment(AxisAlignment.Top).withMajorTickLineStyle(0xFFFFFFFF, 2f, true).withTextFormatting("0.00").withDrawMinorTicks(false).withIsCenterAxis(true).withGrowBy(0.1, 0.1).build();
        final IAxis yAxis = sciChartBuilder.newNumericAxis().withAxisAlignment(AxisAlignment.Left).withMajorTickLineStyle(0xFFFFFFFF, 2f, true).withTextFormatting("0.00").withDrawMinorTicks(false).withIsCenterAxis(true).withGrowBy(0.1, 0.1).build();

        final DoubleSeries butterflyCurve = DataManager.getInstance().getButterflyCurve(20000);
        final XyDataSeries<Double, Double> dataSeries = sciChartBuilder.newXyDataSeries(Double.class, Double.class).withAcceptsUnsortedData().build();
        dataSeries.append(butterflyCurve.xValues, butterflyCurve.yValues);

        final FastLineRenderableSeries rSeries = sciChartBuilder.newLineSeries().withDataSeries(dataSeries).build();

        UpdateSuspender.using(surface, () -> {
            surface.setLayoutManager(new CenterLayoutManager(xAxis, yAxis));

            Collections.addAll(surface.getXAxes(), xAxis);
            Collections.addAll(surface.getYAxes(), yAxis);
            Collections.addAll(surface.getRenderableSeries(), rSeries);
            Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers().build());

            sciChartBuilder.newAnimator(rSeries).withSweepTransformation().withDuration(20000).withStartDelay(350).start();
        });
    }

    private static final class CenterLayoutManager implements ILayoutManager {
        private final DefaultLayoutManager defaultLayoutManager;
        private boolean isFirstLayout;

        CenterLayoutManager(IAxis xAxis, IAxis yAxis) {
            // need to override default inner layout strategies for bottom and right aligned axes
            // because xAxis has right axis alignment and yAxis has bottom axis alignment
            this.defaultLayoutManager = new DefaultLayoutManager.Builder()
                    .setLeftInnerAxesLayoutStrategy(new CenteredLeftAlignmentInnerAxisLayoutStrategy(xAxis))
                    .setTopInnerAxesLayoutStrategy(new CenteredTopAlignmentInnerAxisLayoutStrategy(yAxis))
                    .build();
        }

        @Override
        public void attachAxis(IAxis axis, boolean isXAxis) {
            defaultLayoutManager.attachAxis(axis, isXAxis);
        }

        @Override
        public void detachAxis(IAxis axis) {
            defaultLayoutManager.detachAxis(axis);
        }

        @Override
        public void onAxisPlacementChanged(IAxis axis, AxisAlignment oldAxisAlignment, boolean oldIsCenterAxis, AxisAlignment newAxisAlignment, boolean newIsCenterAxis) {
            defaultLayoutManager.onAxisPlacementChanged(axis, oldAxisAlignment, oldIsCenterAxis, newAxisAlignment, newIsCenterAxis);
        }

        @Override
        public void attachTo(IServiceContainer services) {
            defaultLayoutManager.attachTo(services);

            // need to perform 2 layout passes during first layout of chart
            isFirstLayout = true;
        }

        @Override
        public void detach() {
            defaultLayoutManager.detach();
        }

        @Override
        public boolean isAttached() {
            return defaultLayoutManager.isAttached();
        }

        @Override
        public Size onLayoutChart(int width, int height) {
            // need to perform additional layout pass if it is a first layout pass
            // because we don't know correct size of axes during first layout pass
            if (isFirstLayout) {
                defaultLayoutManager.onLayoutChart(width, height);
                isFirstLayout = false;
            }

            return defaultLayoutManager.onLayoutChart(width, height);
        }
    }

    private static class CenteredTopAlignmentInnerAxisLayoutStrategy extends TopAlignmentInnerAxisLayoutStrategy {
        private final IAxis yAxis;

        CenteredTopAlignmentInnerAxisLayoutStrategy(IAxis yAxis) {
            this.yAxis = yAxis;
        }

        @Override
        public void layoutAxes(int left, int top, int right, int bottom) {
            // find the coordinate of 0 on the Y Axis in pixels
            // place the stack of the top-aligned X Axes at this coordinate
            final float topCoord = yAxis.getCurrentCoordinateCalculator().getCoordinate(0);
            layoutFromTopToBottom(left, (int) topCoord, right, axes);
        }
    }

    private static class CenteredLeftAlignmentInnerAxisLayoutStrategy extends LeftAlignmentInnerAxisLayoutStrategy {
        private final IAxis xAxis;

        CenteredLeftAlignmentInnerAxisLayoutStrategy(IAxis xAxis) {
            this.xAxis = xAxis;
        }

        @Override
        public void layoutAxes(int left, int top, int right, int bottom) {
            // find the coordinate of 0 on the X Axis in pixels
            // place the stack of the left-aligned Y Axes at this coordinate
            final float leftCoord = xAxis.getCurrentCoordinateCalculator().getCoordinate(0);
            layoutFromLeftToRight((int) leftCoord, top, bottom, axes);
        }
    }
}

< BACK TO ALL ANDROID CHART CHART EXAMPLES