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.
This example demonstrates how to createa custom gestures-based chart modifier that you can attach to a chart in your Android application to perfrom a specific behaviour using SciChart Android API. When you want to do something to alter the behavior of any built-in gesture modifiers, you should be thinking about creating a custom gesture-based chart modifier to do it.
In this example, a single finger vertical pinch-zoom gesture modifier is implemented to zoom the chart on X-Axis. Also it is enabled by double-tap, similar to how it works in Google Maps App.
Learn more from Custom Chart Modifier Documentation
The full source code for the Android Line Chart 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: CreateCustomGestureModifierFragment.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
//
// CreateCustomGestureModifierFragment.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.createCustomCharts.kt
import android.graphics.PointF
import android.view.MotionEvent
import android.view.ViewConfiguration
import android.view.animation.DecelerateInterpolator
import com.scichart.charting.modifiers.GestureModifierBase
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.annotations.AnnotationCoordinateMode.Relative
import com.scichart.charting.visuals.annotations.HorizontalAnchorPoint.Center
import com.scichart.charting.visuals.annotations.VerticalAnchorPoint.Top
import com.scichart.charting.visuals.axes.IAxis
import com.scichart.core.IServiceContainer
import com.scichart.core.utility.touch.ModifierTouchEventArgs
import com.scichart.data.model.DoubleRange
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.*
import kotlin.math.abs
class CreateCustomGestureModifierFragment : ExampleSingleChartBaseFragment() {
override fun initExample(surface: SciChartSurface) {
val ds1Points = DataManager.getInstance().getDampedSinewave(1.0, 0.05, 50, 5)
surface.suspendUpdates {
xAxes { numericAxis { growBy = DoubleRange(0.1, 0.1) } }
yAxes { numericAxis { growBy = DoubleRange(0.2, 0.2) } }
renderableSeries {
fastImpulseRenderableSeries {
xyDataSeries<Double, Double> {
append(ds1Points.xValues, ds1Points.yValues)
}
ellipsePointMarker {
setSize(10)
strokeStyle = SolidPenStyle(0xFFe97064)
fillStyle = SolidBrushStyle(0xFFe97064)
}
strokeStyle = SolidPenStyle(0xFFe97064)
waveAnimation {
duration = Constant.ANIMATION_DURATION
startDelay = Constant.ANIMATION_START_DELAY
interpolator = DefaultInterpolator.getInterpolator()
}
}
}
chartModifiers { modifier(CustomZoomGestureModifier()) }
annotations {
textAnnotation {
x1 = 0.5; y1 = 0.0
coordinateMode = Relative
verticalAnchorPoint = Top
horizontalAnchorPoint = Center
text = "Double Tap and pan vertically to Zoom In/Out.\nDouble tap to Zoom Extents."
}
}
}
}
private class CustomZoomGestureModifier : GestureModifierBase() {
private var isScrolling = false
private var isZoomEnabled = false
private var touchSlop = 0f
private val start = PointF()
private var lastY = 0f
override fun attachTo(services: IServiceContainer) {
super.attachTo(services)
val context = context ?: return
touchSlop = (ViewConfiguration.get(context).scaledTouchSlop * 2).toFloat()
}
override fun onDoubleTap(e: MotionEvent): Boolean {
start.set(e.x, e.y)
lastY = e.y
isZoomEnabled = true
return true
}
override fun onTouch(args: ModifierTouchEventArgs) {
super.onTouch(args)
val motionEvent = args.e
if (isZoomEnabled && motionEvent.action == MotionEvent.ACTION_MOVE) {
onScrollInYDirection(motionEvent.y)
}
}
private fun onScrollInYDirection(y: Float) {
val distance = abs(y - start.y)
if (distance < touchSlop || abs(y - lastY) < 1f) return
isScrolling = true
val prevDistance = abs(lastY - start.y)
val diff = if (prevDistance > 0) (distance / prevDistance - 1).toDouble() else 0.toDouble()
growBy(start, xAxis, diff)
lastY = y
}
// zoom axis relative to the start point using fraction
private fun growBy(point: PointF, axis: IAxis, fraction: Double) {
val size = axis.axisViewportDimension
val coord = size - point.y
val minFraction = coord / size * fraction
val maxFraction = (1 - coord / size) * fraction
axis.zoomBy(minFraction, maxFraction)
}
override fun onUp(e: MotionEvent) {
// need to disable zoom after finishing scrolling
if (isScrolling) {
isZoomEnabled = false
isScrolling = isZoomEnabled
start[Float.NaN] = Float.NaN
lastY = Float.NaN
}
}
}
}Java: CreateCustomGestureModifierFragment.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
//
// CreateCustomGestureModifierFragment.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.createCustomCharts;
import android.content.Context;
import android.graphics.PointF;
import android.view.MotionEvent;
import android.view.ViewConfiguration;
import android.view.animation.DecelerateInterpolator;
import androidx.annotation.NonNull;
import com.scichart.charting.model.dataSeries.IXyDataSeries;
import com.scichart.charting.modifiers.GestureModifierBase;
import com.scichart.charting.visuals.SciChartSurface;
import com.scichart.charting.visuals.annotations.AnnotationCoordinateMode;
import com.scichart.charting.visuals.annotations.HorizontalAnchorPoint;
import com.scichart.charting.visuals.annotations.TextAnnotation;
import com.scichart.charting.visuals.annotations.VerticalAnchorPoint;
import com.scichart.charting.visuals.axes.IAxis;
import com.scichart.charting.visuals.pointmarkers.EllipsePointMarker;
import com.scichart.charting.visuals.renderableSeries.FastImpulseRenderableSeries;
import com.scichart.core.IServiceContainer;
import com.scichart.core.framework.UpdateSuspender;
import com.scichart.core.utility.touch.ModifierTouchEventArgs;
import com.scichart.drawing.utility.ColorUtil;
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 CreateCustomGestureModifierFragment extends ExampleSingleChartBaseFragment {
@Override
protected void initExample(@NonNull SciChartSurface surface) {
final IAxis xBottomAxis = sciChartBuilder.newNumericAxis().withGrowBy(0.1d, 0.1d).build();
final IAxis yRightAxis = sciChartBuilder.newNumericAxis().withGrowBy(0.1d, 0.1d).build();
final DoubleSeries ds1Points = DataManager.getInstance().getDampedSinewave(1.0, 0.05, 50, 5);
final IXyDataSeries<Double, Double> dataSeries = sciChartBuilder.newXyDataSeries(Double.class, Double.class).build();
dataSeries.append(ds1Points.xValues, ds1Points.yValues);
final EllipsePointMarker pointMarker = sciChartBuilder.newPointMarker(new EllipsePointMarker())
.withSize(10, 10)
.withStroke(0xFFe97064, 1)
.withFill(0xFFe97064)
.build();
final FastImpulseRenderableSeries rSeries = sciChartBuilder.newImpulseSeries()
.withDataSeries(dataSeries)
.withStrokeStyle(0xFFe97064)
.withPointMarker(pointMarker)
.build();
final TextAnnotation annotation = sciChartBuilder.newTextAnnotation()
.withText("Double Tap and pan vertically to Zoom In/Out.\nDouble tap to Zoom Extents.")
.withX1(0.5)
.withY1(0.0)
.withCoordinateMode(AnnotationCoordinateMode.Relative)
.withVerticalAnchorPoint(VerticalAnchorPoint.Top)
.withHorizontalAnchorPoint(HorizontalAnchorPoint.Center)
.build();
UpdateSuspender.using(surface, () -> {
Collections.addAll(surface.getXAxes(), xBottomAxis);
Collections.addAll(surface.getYAxes(), yRightAxis);
Collections.addAll(surface.getRenderableSeries(), rSeries);
Collections.addAll(surface.getAnnotations(), annotation);
Collections.addAll(surface.getChartModifiers(), new CustomZoomGestureModifier());
sciChartBuilder.newAnimator(rSeries).withWaveTransformation().withInterpolator(DefaultInterpolator.getInterpolator()).withDuration(Constant.ANIMATION_DURATION).withStartDelay(Constant.ANIMATION_START_DELAY).start();
});
}
private static class CustomZoomGestureModifier extends GestureModifierBase {
private boolean isScrolling = false;
private boolean isZoomEnabled = false;
private float touchSlop;
private final PointF start = new PointF();
private float lastY;
@Override
public void attachTo(IServiceContainer services) {
super.attachTo(services);
final Context context = getContext();
if (context == null) return;
this.touchSlop = ViewConfiguration.get(context).getScaledTouchSlop() * 2;
}
@Override
public boolean onDoubleTap(MotionEvent e) {
start.set(e.getX(), e.getY());
lastY = e.getY();
isZoomEnabled = true;
return true;
}
@Override
public void onTouch(ModifierTouchEventArgs args) {
super.onTouch(args);
final MotionEvent motionEvent = args.e;
if (isZoomEnabled && motionEvent.getAction() == MotionEvent.ACTION_MOVE) {
onScrollInYDirection(motionEvent.getY());
}
}
private void onScrollInYDirection(float y) {
final float distance = Math.abs(y - start.y);
if (distance < touchSlop || Math.abs(y - lastY) < 1f) return;
this.isScrolling = true;
final float prevDistance = Math.abs(lastY - start.y);
final double diff = prevDistance > 0 ? distance / prevDistance - 1 : 0;
growBy(start, getXAxis(), diff);
this.lastY = y;
}
// zoom axis relative to the start point using fraction
private void growBy(PointF point, IAxis axis, double fraction) {
final int size = axis.getAxisViewportDimension();
final float coord = size - point.y;
double minFraction = (coord / size) * fraction;
double maxFraction = (1 - coord / size) * fraction;
axis.zoomBy(minFraction, maxFraction);
}
@Override
protected void onUp(MotionEvent e) {
// need to disable zoom after finishing scrolling
if (isScrolling) {
isScrolling = isZoomEnabled = false;
start.set(Float.NaN, Float.NaN);
lastY = Float.NaN;
}
}
}
}
