This example demonstrates how to create a simple Band Chart with Xamarin to use it in your iOS and Android app.

The FastBandRenderableSeries in Android and
SCIBandRenderableSeries in iOS draws two lines, denoted by Y1 and Y2, and an optional fill between the lines.

The Filled area changes color depending on whether Y1 is above Y2 or not. The Band Series can be used to display:

• Envelopes
• Bollinger Bands
• Profit & Loss

Warnings, such as when a value is above a threshold.

The data is provided by XyyDataSeries in both iOS native and Android native.

Documentation Links

• The iOS Band Chart Documentation.
• The Android Band Chart Documentation.
• The Xamarin iOS Chart Tutorials
• The Xamarin Android Chart Tutorials

// BandChartViewController.cs (Xamarin.iOS)

using Xamarin.Examples.Demo.Data;
using SciChart.iOS.Charting;

namespace Xamarin.Examples.Demo.iOS
{
    [ExampleDefinition("Band Chart", "Generates a simple Band series chart in code", icon: ExampleIcon.BandChart)]
    public class BandChartViewController : SingleChartViewController<SCIChartSurface>
    {
        protected override void InitExample()
        {
            var data0 = DataManager.Instance.GetDampedSinewave(1.0, 0.01, 1000);
            var data1 = DataManager.Instance.GetDampedSinewave(1.0, 0.005, 1000, 12);

            var dataSeries = new XyyDataSeries<double, double>();
            dataSeries.Append(data0.XData, data0.YData, data1.YData);

            var xAxis = new SCINumericAxis { VisibleRange = new SCIDoubleRange(1.1, 2.7) };
            var yAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1) };

            var rSeries = new SCIFastBandRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeStyle = new SCISolidPenStyle(0xFFFF1919, 0.7f),
                StrokeY1Style = new SCISolidPenStyle(0xFF279B27, 0.7f),
                FillBrushStyle = new SCISolidBrushStyle(0x33279B27),
                FillY1BrushStyle = new SCISolidBrushStyle(0x33FF1919)
            };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rSeries);
                Surface.ChartModifiers.Add(CreateDefaultModifiers());

                SCIAnimations.ScaleSeries(rSeries, 3, new SCIElasticEase());
            }
        }
    }
}

// BandChartFragment.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.RenderableSeries;
using SciChart.Data.Model;
using SciChart.Drawing.Common;
using Xamarin.Examples.Demo.Data;
using Xamarin.Examples.Demo;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{

    [ExampleDefinition("Band Chart", description: "Creates a Band Series Chart", icon: ExampleIcon.BandChart)]
    public class BandChartFragment : ExampleBaseFragment
    {
        public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;

        private SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);

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

            var data = DataManager.Instance.GetDampedSinewave(1.0, 0.01, 1000);
            var moreData = DataManager.Instance.GetDampedSinewave(1.0, 0.005, 1000, 12);

            var dataSeries = new XyyDataSeries<double, double>();
            dataSeries.Append(data.XData, data.YData, moreData.YData);

            var rSeries = new FastBandRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeStyle = new SolidPenStyle(0xFFFF1919, 1f.ToDip(Activity)),
                StrokeY1Style = new SolidPenStyle(0xFF279B27, 1f.ToDip(Activity)),
                FillBrushStyle = new SolidBrushStyle(0x33279B27),
                FillY1BrushStyle = new SolidBrushStyle(0x33FF1919)
            };

            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 ScaleAnimatorBuilder(rSeries) { Interpolator = new OvershootInterpolator(), Duration = 1000, StartDelay = 600 }.Start();
            }
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES