This example demonstrates creating the Spline Mountain Series with Xamarin.iOS and Xamarin.Android in SciChart.

It is provided by the SplineMountainRenderableSeries in Xamarin.Android or SCISplineLineRenderableSeries in Xamarin.iOS. The API is flexible and allows you to customize the line and area colors, adding gaps in spline series and adding point markers.

Please read more about how to use Xamarin.iOS and Xamarin.Android Spline Mountain Series in the documentation below:

– Xamarin.iOS Spline Mountain Series

– Xamarin.Android Spline Mountain Series

// SplineMountainChartViewController.cs (Xamarin.iOS)

using SciChart.iOS.Charting;
using CoreGraphics;

namespace Xamarin.Examples.Demo.iOS
{
    [ExampleDefinition("Spline Mountain Chart", "Create a spline Mountain / Area Chart", icon: ExampleIcon.MountainChart)]
    public class SplineMountainChartViewController : SingleChartViewController<SCIChartSurface>
    {
        protected override void InitExample()
        {
            var xAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1) };
            var yAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.2, 0.2) };

            var dataSeries = new XyDataSeries<int, int>();
            var yValues = new[] { 50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60 };
            for (int i = 0; i < yValues.Length; i++)
            {
                dataSeries.Append(i, yValues[i]);
            }

            var rSeries = new SCISplineMountainRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeStyle = new SCISolidPenStyle(0xAAFFC9A8, 2f),
                AreaStyle = new SCILinearGradientBrushStyle(0xAAFF8D42, 0x88090E11),
                PointMarker = new SCIEllipsePointMarker
                {
                    Size = new CGSize(7, 7),
                    StrokeStyle = new SCISolidPenStyle(0xFF006400, 1f),
                    FillStyle = new SCISolidBrushStyle(0xFFFFFFFF)
                }
            };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rSeries);
                Surface.ChartModifiers = new SCIChartModifierCollection
                {
                    new SCIZoomPanModifier(),
                    new SCIPinchZoomModifier(),
                    new SCIZoomExtentsModifier(),
                };

                SCIAnimations.WaveSeries(rSeries, 3, 0.35, new SCICubicEase());
            }
        }
    }
}

// SplineMountainChartFragment.cs (Xamarin.Android)

using Android.Views.Animations;
using SciChart.Charting.Model;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Modifiers;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Animations;
using SciChart.Charting.Visuals.Axes;
using SciChart.Charting.Visuals.PointMarkers;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Data.Model;
using SciChart.Drawing.Common;
using Xamarin.Examples.Demo.Data;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
    [ExampleDefinition("Spline Mountain Chart", description: "Create a spline Mountain / Area Chart", icon: ExampleIcon.MountainChart)]
    public class SplineMountainChartFragment : ExampleBaseFragment
    {
        public SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);

        public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;

        protected override void InitExample()
        {
            var xAxis = new NumericAxis(Activity) {GrowBy = new DoubleRange(0.1, 0.1)};
            var yAxis = new NumericAxis(Activity) {GrowBy = new DoubleRange(0.2, 0.2)};

            var dataSeries = new XyDataSeries<int, int>();
            var yValues = new[] {50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60};
            for (int i = 0; i < yValues.Length; i++)
            {
                dataSeries.Append(i, yValues[i]);
            }

            var rSeries = new SplineMountainRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeStyle = new SolidPenStyle(0xAAFFC9A8, 2f.ToDip(Activity)),
                AreaStyle = new LinearGradientBrushStyle(0, 0, 1, 1, 0xAAFF8D42, 0x88090E11),
                PointMarker = new EllipsePointMarker
                {
                    Width = 7.ToDip(Activity),
                    Height = 7.ToDip(Activity),
                    StrokeStyle = new SolidPenStyle(0xFF006400, 1f.ToDip(Activity)),
                    FillStyle = new SolidBrushStyle(0xFFFFFFFF)
                }
            };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rSeries);
                Surface.ChartModifiers = new ChartModifierCollection
                {
                    new ZoomPanModifier(),
                    new PinchZoomModifier(),
                    new ZoomExtentsModifier(),
                };

                new WaveAnimatorBuilder(rSeries) {Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350}.Start();
            }
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES