Demonstrates the PointMarker API which allows data-point markers to be added to many RenderableSeries types.
Now built-in types handle Ellipse, Square, Cross, Triangle and a special type which allows to draw point marker via Canvas API (SpritePointMarker), so it’s possible to render tens or hundreds of thousands of point-markers using this method.

It is also possible to create custom PointMarkers by extending our SpritePointMarker or DrawablePointMarker type.

// Kotlin: UsePointMarkersFragment.kt

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// UsePointMarkersFragment.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.stylingAndTheming.kt

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import androidx.annotation.DrawableRes
import androidx.core.content.res.ResourcesCompat
import com.scichart.charting.model.dataSeries.IXyDataSeries
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.pointmarkers.SpritePointMarker.ISpritePointMarkerDrawer
import com.scichart.data.model.DoubleRange
import com.scichart.drawing.utility.ColorUtil
import com.scichart.examples.R
import com.scichart.examples.fragments.base.ExampleSingleChartBaseFragment
import com.scichart.examples.utils.scichartExtensions.*
import java.util.*

class UsePointMarkersFragment : ExampleSingleChartBaseFragment() {
    override fun initExample(surface: SciChartSurface) {
        surface.suspendUpdates {
            xAxes { numericAxis { growBy = DoubleRange(0.1, 0.1) } }
            yAxes { numericAxis { growBy = DoubleRange(0.1, 0.1) } }

            renderableSeries {
                fastLineRenderableSeries {
                    xyDataSeries<Double, Double> { fillDataSeries(this) }
                    strokeStyle = SolidPenStyle(ColorUtil.LightBlue, 2f)
                    ellipsePointMarker {
                        setSize(15)
                        fillStyle = SolidBrushStyle(0x990077ff)
                        strokeStyle = SolidPenStyle(ColorUtil.LightBlue, 2f)
                    }

                    opacityAnimation { duration = 1000 }
                }
                fastLineRenderableSeries {
                    xyDataSeries<Double, Double> { fillDataSeries(this, 1.0) }
                    strokeStyle = SolidPenStyle(ColorUtil.Red, 2f)
                    squarePointMarker {
                        setSize(20)
                        fillStyle = SolidBrushStyle(0x99ff0000)
                        strokeStyle = SolidPenStyle(ColorUtil.Red, 2f)
                    }

                    opacityAnimation { duration = 1000 }
                }
                fastLineRenderableSeries {
                    xyDataSeries<Double, Double> { fillDataSeries(this, 2.5) }
                    strokeStyle = SolidPenStyle(ColorUtil.Yellow, 2f)
                    trianglePointMarker {
                        setSize(20)
                        fillStyle = SolidBrushStyle(0xffffdd00)
                        strokeStyle = SolidPenStyle(0xffff6600, 2f)
                    }

                    opacityAnimation { duration = 1000 }
                }
                fastLineRenderableSeries {
                    xyDataSeries<Double, Double> { fillDataSeries(this, 4.0) }
                    strokeStyle = SolidPenStyle(ColorUtil.Magenta, 2f)
                    crossPointMarker {
                        setSize(25)
                        strokeStyle = SolidPenStyle(ColorUtil.Magenta, 4f)
                    }

                    opacityAnimation { duration = 1000 }
                }
                fastLineRenderableSeries {
                    xyDataSeries<Double, Double> { fillDataSeries(this, 5.5) }
                    strokeStyle = SolidPenStyle(ColorUtil.Wheat, 2f)
                    spritePointMarker(CustomPointMarkerDrawer(this@suspendUpdates.context, R.drawable.example_weather_storm)) {
                        setSize(15)
                        fillStyle = SolidBrushStyle(0x990077ff)
                        strokeStyle = SolidPenStyle(ColorUtil.LightBlue, 2f)
                    }

                    opacityAnimation { duration = 1000 }
                }
            }
            chartModifiers { defaultModifiers() }
        }
    }

    private fun fillDataSeries(dataSeries: IXyDataSeries<Double, Double>, offset: Double = 0.0) {
        for (i in 0 until dataSize) {
            dataSeries.append(i.toDouble(), offset + rnd.nextDouble())
        }
        dataSeries.updateYAt(7, Double.NaN)
    }

    private class CustomPointMarkerDrawer(context: Context, @DrawableRes drawableId: Int) : ISpritePointMarkerDrawer {
        private val drawable = ResourcesCompat.getDrawable(context.resources, drawableId, null)
        override fun onDraw(canvas: Canvas, stroke: Paint, fill: Paint) {
            drawable?.run {
                setBounds(0, 0, canvas.width, canvas.height)
                draw(canvas)
            }
        }
    }

    companion object {
        val rnd = Random()
        const val dataSize = 15
    }
}

// Java: UsePointMarkersFragment.java

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// UsePointMarkersFragment.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.stylingAndTheming;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import androidx.annotation.DrawableRes;
import androidx.annotation.NonNull;
import androidx.core.content.res.ResourcesCompat;

import com.scichart.charting.model.dataSeries.IXyDataSeries;
import com.scichart.charting.model.dataSeries.XyDataSeries;
import com.scichart.charting.visuals.SciChartSurface;
import com.scichart.charting.visuals.pointmarkers.CrossPointMarker;
import com.scichart.charting.visuals.pointmarkers.EllipsePointMarker;
import com.scichart.charting.visuals.pointmarkers.IPointMarker;
import com.scichart.charting.visuals.pointmarkers.SpritePointMarker;
import com.scichart.charting.visuals.pointmarkers.SquarePointMarker;
import com.scichart.charting.visuals.pointmarkers.TrianglePointMarker;
import com.scichart.charting.visuals.renderableSeries.IRenderableSeries;
import com.scichart.data.model.DoubleRange;
import com.scichart.drawing.utility.ColorUtil;
import com.scichart.examples.R;
import com.scichart.examples.fragments.base.ExampleSingleChartBaseFragment;

import java.util.Collections;
import java.util.Random;

public class UsePointMarkersFragment extends ExampleSingleChartBaseFragment {
    private static final int dataSize = 15;
    private final Random rnd = new Random();

    @Override
    protected void initExample(@NonNull SciChartSurface surface) {
        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);

        fillDataSeries(ds1, 0);
        fillDataSeries(ds2, 1);
        fillDataSeries(ds3, 2.5);
        fillDataSeries(ds4, 4);
        fillDataSeries(ds5, 5.5);

        final IPointMarker pointMarker1 = sciChartBuilder.newPointMarker(new EllipsePointMarker()).withSize(15,15).withFill(0x990077ff).withStroke(ColorUtil.LightBlue, 2).build();
        final IPointMarker pointMarker2 = sciChartBuilder.newPointMarker(new SquarePointMarker()).withSize(20, 20).withFill(0x99ff0000).withStroke(ColorUtil.Red, 2).build();
        final IPointMarker pointMarker3 = sciChartBuilder.newPointMarker(new TrianglePointMarker()).withSize(20, 20).withFill(0xffffdd00).withStroke(0xffff6600, 2).build();
        final IPointMarker pointMarker4 = sciChartBuilder.newPointMarker(new CrossPointMarker()).withSize(25, 25).withStroke(ColorUtil.Magenta, 4).build();
        final IPointMarker pointMarker5 = sciChartBuilder.newPointMarker(new SpritePointMarker(new CustomPointMarkerDrawer(requireContext(), R.drawable.example_weather_storm))).withSize(40, 40).build();

        IRenderableSeries rs1 = sciChartBuilder.newLineSeries().withDataSeries(ds1).withPointMarker(pointMarker1).withStrokeStyle(ColorUtil.LightBlue, 2f).build();
        IRenderableSeries rs2 = sciChartBuilder.newLineSeries().withDataSeries(ds2).withPointMarker(pointMarker2).withStrokeStyle(ColorUtil.Red, 2f).build();
        IRenderableSeries rs3 = sciChartBuilder.newLineSeries().withDataSeries(ds3).withPointMarker(pointMarker3).withStrokeStyle(ColorUtil.Yellow, 2f).build();
        IRenderableSeries rs4 = sciChartBuilder.newLineSeries().withDataSeries(ds4).withPointMarker(pointMarker4).withStrokeStyle(ColorUtil.Magenta, 2f).build();
        IRenderableSeries rs5 = sciChartBuilder.newLineSeries().withDataSeries(ds5).withPointMarker(pointMarker5).withStrokeStyle(ColorUtil.Wheat, 2f).build();

        Collections.addAll(surface.getXAxes(), sciChartBuilder.newNumericAxis().withGrowBy(new DoubleRange(0.1, 0.1)).build());
        Collections.addAll(surface.getYAxes(), sciChartBuilder.newNumericAxis().withGrowBy(new DoubleRange(0.1, 0.1)).build());
        Collections.addAll(surface.getRenderableSeries(), rs1, rs2, rs3, rs4, rs5);
        Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers().build());

        sciChartBuilder.newOpacityAnimator(rs1).withDuration(1000).withStartDelay(350).start();
        sciChartBuilder.newOpacityAnimator(rs2).withDuration(1000).withStartDelay(350).start();
        sciChartBuilder.newOpacityAnimator(rs3).withDuration(1000).withStartDelay(350).start();
        sciChartBuilder.newOpacityAnimator(rs4).withDuration(1000).withStartDelay(350).start();
        sciChartBuilder.newOpacityAnimator(rs5).withDuration(1000).withStartDelay(350).start();
    }

    private void fillDataSeries(IXyDataSeries<Double, Double> dataSeries, double offset) {
        for (int i = 0; i < dataSize; i++) {
            dataSeries.append((double)i, offset + rnd.nextDouble());
        }
        dataSeries.updateYAt(7, Double.NaN);
    }

    private static class CustomPointMarkerDrawer implements SpritePointMarker.ISpritePointMarkerDrawer {
        private final Drawable drawable;

        CustomPointMarkerDrawer(Context context, @DrawableRes int drawableId) {
            this.drawable = ResourcesCompat.getDrawable(context.getResources(), drawableId, null);
        }

        @Override
        public void onDraw(Canvas canvas, Paint stroke, Paint fill) {
            drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
            drawable.draw(canvas);
        }
    }
}

< BACK TO ALL ANDROID CHART CHART EXAMPLES