Android Chart - Examples
SciChart Android ships with ~90 Android Chart Examples which you can browse, play with, view the source-code and even export each SciChart Android Chart Example to a stand-alone Android Studio project. All of this is possible with the new and improved SciChart Android Examples Suite, which ships as part of our Android Charts SDK.
A static example which demonstrates a line chart with two series and primary and secondary Y-Axis. SciChart supports unlimited left and right Y-Axes and this example shows in a simple way how to register a line series on each axis.
Tips!
Learn more about multi-axis Android Charts in the SciChart Android Axis Documentation
To set axis placement you need to call setAxisAlignment(AxisAlignment) method with appropriate AxisAlignment value
The setAxisId(String) method can used to assign Id to and axis and attach a RenderableSeries to it.
To register RenderableSeries on axis you need to set appropriate xAxisId or yAxisId.
The full source code for the Android Chart Secondary Y-Axis example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
- Clone the SciChart.Android.Examples from Github.
- Or, view source and export each example to an Android Studio project from the Java version of the SciChart Android Examples app.
- Also the SciChart Android Trial contains the full source for the examples (link below).
Kotlin: SecondaryYAxesFragment.kt
View source code//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// SecondaryYAxesFragment.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 android.view.animation.DecelerateInterpolator
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.axes.AxisAlignment.*
import com.scichart.data.model.DoubleRange
import com.scichart.examples.R
import com.scichart.examples.data.DataManager
import com.scichart.examples.fragments.base.ExampleSingleChartBaseFragment
import com.scichart.examples.utils.Constant
import com.scichart.examples.utils.interpolator.DefaultInterpolator
import com.scichart.examples.utils.scichartExtensions.*
class SecondaryYAxesFragment: ExampleSingleChartBaseFragment() {
override fun showDefaultModifiersInToolbar(): Boolean = false
override fun initExample(surface: SciChartSurface) {
surface.theme = R.style.SciChart_NavyBlue
val ds1Points = DataManager.getInstance().getFourierSeries(1.0, 0.1, 5000)
val ds2Points = DataManager.getInstance().getDampedSinewave(3.0, 0.005, 5000, 10)
surface.suspendUpdates {
xAxes {
numericAxis {
growBy = DoubleRange(0.1, 0.1)
axisId = X_BOTTOM_AXIS
axisAlignment = Bottom
axisTitle = "Bottom Axis"
}
}
yAxes {
numericAxis {
growBy = DoubleRange(0.1, 0.1)
axisId = Y_LEFT_AXIS
axisAlignment = Left
axisTitle = "Left Axis"
setTextColor(0xFF47bde6)
}
numericAxis {
growBy = DoubleRange(0.1, 0.1)
axisId = Y_RIGHT_AXIS
axisAlignment = Right
axisTitle = "Right Axis"
setTextColor(0xFFae418d)
}
}
renderableSeries {
fastLineRenderableSeries {
xAxisId = X_BOTTOM_AXIS
yAxisId = Y_RIGHT_AXIS
strokeStyle = SolidPenStyle(0xFFae418d)
xyDataSeries<Double, Double> { append(ds1Points.xValues, ds1Points.yValues) }
sweepAnimation {
duration = Constant.ANIMATION_DURATION
startDelay = Constant.ANIMATION_START_DELAY
interpolator = DefaultInterpolator.getInterpolator()
}
}
fastLineRenderableSeries {
xAxisId = X_BOTTOM_AXIS
yAxisId = Y_LEFT_AXIS
strokeStyle = SolidPenStyle(0xFF47bde6)
xyDataSeries<Double, Double> { append(ds2Points.xValues, ds2Points.yValues) }
sweepAnimation {
duration = Constant.ANIMATION_DURATION
startDelay = Constant.ANIMATION_START_DELAY
interpolator = DefaultInterpolator.getInterpolator()
}
}
}
chartModifiers { defaultModifiers() }
}
}
companion object {
private const val X_BOTTOM_AXIS = "xBottomAxis"
private const val Y_LEFT_AXIS = "yLeftAxis"
private const val Y_RIGHT_AXIS = "yRightAxis"
}
}Java: SecondaryYAxesFragment.java
View source code//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// SecondaryYAxesFragment.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 android.view.animation.DecelerateInterpolator;
import androidx.annotation.NonNull;
import com.scichart.charting.model.dataSeries.IXyDataSeries;
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.framework.UpdateSuspender;
import com.scichart.examples.R;
import com.scichart.examples.data.DataManager;
import com.scichart.examples.data.DoubleSeries;
import com.scichart.examples.fragments.base.ExampleSingleChartBaseFragment;
import com.scichart.examples.utils.Constant;
import com.scichart.examples.utils.interpolator.DefaultInterpolator;
import java.util.Collections;
public class SecondaryYAxesFragment extends ExampleSingleChartBaseFragment {
private final static String X_BOTTOM_AXIS = "xBottomAxis";
private final static String Y_LEFT_AXIS = "yLeftAxis";
private final static String Y_RIGHT_AXIS = "yRightAxis";
@Override
public boolean showDefaultModifiersInToolbar() {
return false;
}
@Override
protected void initExample(@NonNull SciChartSurface surface) {
surface.setTheme(R.style.SciChart_NavyBlue);
final IAxis xBottomAxis = sciChartBuilder.newNumericAxis()
.withGrowBy(0.1d, 0.1d)
.withAxisAlignment(AxisAlignment.Bottom)
.withAxisId(X_BOTTOM_AXIS)
.withAxisTitle("Bottom Axis")
.build();
final IAxis yLeftAxis = sciChartBuilder.newNumericAxis()
.withGrowBy(0.1d, 0.1d)
.withAxisAlignment(AxisAlignment.Left)
.withAxisId(Y_LEFT_AXIS)
.withAxisTitle("Left Axis")
.withTextColor(0xFF47bde6)
.build();
final IAxis yRightAxis = sciChartBuilder.newNumericAxis()
.withGrowBy(0.1d, 0.1d)
.withAxisAlignment(AxisAlignment.Right)
.withAxisId(Y_RIGHT_AXIS)
.withAxisTitle("Right Axis")
.withTextColor(0xFFae418d)
.build();
final DoubleSeries ds1Points = DataManager.getInstance().getFourierSeries(1.0, 0.1, 5000);
final DoubleSeries ds2Points = DataManager.getInstance().getDampedSinewave(3.0, 0.005, 5000, 10);
final IXyDataSeries<Double, Double> ds1 = sciChartBuilder.newXyDataSeries(Double.class, Double.class).build();
final IXyDataSeries<Double, Double> ds2 = sciChartBuilder.newXyDataSeries(Double.class, Double.class).build();
ds1.append(ds1Points.xValues, ds1Points.yValues);
ds2.append(ds2Points.xValues, ds2Points.yValues);
final FastLineRenderableSeries rs1 = sciChartBuilder.newLineSeries()
.withDataSeries(ds1)
.withXAxisId(X_BOTTOM_AXIS)
.withYAxisId(Y_RIGHT_AXIS)
.withStrokeStyle(0xFFae418d, 1f, true)
.build();
final FastLineRenderableSeries rs2 = sciChartBuilder.newLineSeries()
.withDataSeries(ds2)
.withXAxisId(X_BOTTOM_AXIS)
.withYAxisId(Y_LEFT_AXIS)
.withStrokeStyle(0xFF47bde6, 1f, true)
.build();
UpdateSuspender.using(surface, () -> {
Collections.addAll(surface.getXAxes(), xBottomAxis);
Collections.addAll(surface.getYAxes(), yLeftAxis, yRightAxis);
Collections.addAll(surface.getRenderableSeries(), rs1, rs2);
Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers().build());
sciChartBuilder.newAnimator(rs1).withSweepTransformation().withInterpolator(DefaultInterpolator.getInterpolator()).withDuration(Constant.ANIMATION_DURATION).withStartDelay(Constant.ANIMATION_START_DELAY).start();
sciChartBuilder.newAnimator(rs2).withSweepTransformation().withInterpolator(DefaultInterpolator.getInterpolator()).withDuration(Constant.ANIMATION_DURATION).withStartDelay(Constant.ANIMATION_START_DELAY).start();
});
}
}
