Xamarin Chart - Examples
Please note! These examples are new to SciChart Mobile v3 release! SciChart iOS & Android ship with Xamarin.iOS and Xamarin.Android bindings around our native iOS & Android Chart controls, allowing you to create fast & feature rich charts to your Xamarin applications. We include ~90 native iOS examples and 90 Android examples, but now also ~60 Xamarin Chart Examples to help you get started with SciChart. You can download the source for our Xamarin Chart Examples from Github, or browse the source code below.
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
The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Band 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.Xamarin.Examples from Github.
- Also, the SciChart for Xamarin Trial contains the full source code for the Xamarin chart examples (link below).
BandChartViewController.cs (Xamarin.iOS)
View source codeusing 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)
View source codeusing 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();
}
}
}
}
