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 Xamarin Stacked Mountain Chart in code. A Stacked Mountain chart allows multiple mountain or area charts to be stacked one above each other, summing the values, or stacked up to 100%.
You may style chart by styling Mountains’ outline and fill. The Mountain-Series supports semi-transparent and gradient fills and looks great!
See Native iOS/Android Documentation on how to use this type here:
The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Stacked Mountain 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).
StackedMountainChartViewController.cs (Xamarin.iOS)
View source codeusing CoreGraphics;
using SciChart.iOS.Charting;
namespace Xamarin.Examples.Demo.iOS
{
[ExampleDefinition("Stacked Mountain Chart", description: "Demonstrates a Stacked Mountain Chart", icon: ExampleIcon.StackedMountainChart)]
public class StackedMountainChartViewController : SingleChartViewController<SCIChartSurface>
{
protected override void InitExample()
{
var yValues1 = new[] { 4.0, 7, 5.2, 9.4, 3.8, 5.1, 7.5, 12.4, 14.6, 8.1, 11.7, 14.4, 16.0, 3.7, 5.1, 6.4, 3.5, 2.5, 12.4, 16.4, 7.1, 8.0, 9.0 };
var yValues2 = new[] { 15.0, 10.1, 10.2, 10.4, 10.8, 1.1, 11.5, 3.4, 4.6, 0.1, 1.7, 14.4, 6.0, 13.7, 10.1, 8.4, 8.5, 12.5, 1.4, 0.4, 10.1, 5.0, 1.0 };
var ds1 = new XyDataSeries<double, double> { SeriesName = "data 1" };
var ds2 = new XyDataSeries<double, double> { SeriesName = "data 2" };
for (var i = 0; i < yValues1.Length; i++) ds1.Append(i, yValues1[i]);
for (var i = 0; i < yValues2.Length; i++) ds2.Append(i, yValues2[i]);
var rSeries1 = GetRenderableSeries(ds1, 0xDDDBE0E1, 0x88B6C1C3);
var rSeries2 = GetRenderableSeries(ds2, 0xDDACBCCA, 0x88439AAF);
var seriesCollection = new SCIVerticallyStackedMountainsCollection();
seriesCollection.Add(rSeries1);
seriesCollection.Add(rSeries2);
using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(new SCINumericAxis());
Surface.YAxes.Add(new SCINumericAxis());
Surface.RenderableSeries.Add(seriesCollection);
Surface.ChartModifiers.Add(new SCITooltipModifier());
SCIAnimations.WaveSeries(rSeries1, 3, new SCICubicEase());
SCIAnimations.WaveSeries(rSeries2, 3, new SCICubicEase());
}
}
private SCIStackedMountainRenderableSeries GetRenderableSeries(IDataSeries dataSeries, uint fillColorStart, uint fillColorEbd)
{
return new SCIStackedMountainRenderableSeries
{
DataSeries = dataSeries,
StrokeStyle = new SCISolidPenStyle(0xFFFFFFFF, 1),
AreaStyle = new SCILinearGradientBrushStyle(new CGPoint(0, 0), new CGPoint(1, 1), fillColorStart, fillColorEbd),
};
}
}
}StackedMountainChartFragment.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.Drawing.Common;
using Xamarin.Examples.Demo;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
[ExampleDefinition("Stacked Mountain Chart", description: "Demonstrates a Stacked Mountain Chart", icon: ExampleIcon.StackedMountainChart)]
public class StackedMountainChartFragment : 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);
var yAxis = new NumericAxis(Activity);
var yValues1 = new[] {4.0, 7, 5.2, 9.4, 3.8, 5.1, 7.5, 12.4, 14.6, 8.1, 11.7, 14.4, 16.0, 3.7, 5.1, 6.4, 3.5, 2.5, 12.4, 16.4, 7.1, 8.0, 9.0};
var yValues2 = new[] {15.0, 10.1, 10.2, 10.4, 10.8, 1.1, 11.5, 3.4, 4.6, 0.1, 1.7, 14.4, 6.0, 13.7, 10.1, 8.4, 8.5, 12.5, 1.4, 0.4, 10.1, 5.0, 1.0};
var ds1 = new XyDataSeries<double, double> {SeriesName = "data 1"};
var ds2 = new XyDataSeries<double, double> {SeriesName = "data 2"};
for (var i = 0; i < yValues1.Length; i++) ds1.Append(i, yValues1[i]);
for (var i = 0; i < yValues2.Length; i++) ds2.Append(i, yValues2[i]);
var series1 = GetRenderableSeries(ds1, 0xDDDBE0E1, 0x88B6C1C3);
var series2 = GetRenderableSeries(ds2, 0xDDACBCCA, 0x88439AAF);
var seriesCollection = new VerticallyStackedMountainsCollection();
seriesCollection.Add(series1);
seriesCollection.Add(series2);
using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(xAxis);
Surface.YAxes.Add(yAxis);
Surface.RenderableSeries.Add(seriesCollection);
Surface.ChartModifiers = new ChartModifierCollection
{
new CursorModifier(),
new ZoomExtentsModifier(),
};
new WaveAnimatorBuilder(series1) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
new WaveAnimatorBuilder(series2) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
}
}
private StackedMountainRenderableSeries GetRenderableSeries(IDataSeries dataSeries, uint fillColorStart, uint fillColorEbd)
{
return new StackedMountainRenderableSeries
{
DataSeries = dataSeries,
AreaStyle = new LinearGradientBrushStyle(0, 0, 0, 1, fillColorStart, fillColorEbd)
};
}
}
}
