SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
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 apply on of the 8 Themes shipped with SciChart out of the box with your charts created in Xamarin.iOS and Xamarin.Android.
See more in the documentation:Create a 3D Chart with Xamarin.Android Create a 3D Chart with Xamarin.iOS Styling and Theming in SciChart Android Styling and Theming in SciChart iOS
The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Theme Manager 3D 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?
using System.Collections.Generic;
using SciChart.iOS.Charting;
using UIKit;
using Xamarin.Examples.Demo.Data;
using Xamarin.Examples.Demo.Utils;
namespace Xamarin.Examples.Demo.iOS
{
[Example3DDefinition("Theme Manager 3D Chart", description: "Styling Chart3D via the ThemeManager", icon: ExampleIcon.Themes)]
class ThemeManager3DChartViewController : SingleChartWithTopPanelViewController<SCIChartSurface3D>
{
private static readonly Dictionary<string, string> _themesDictionary = new Dictionary<string, string>
{
{ "Black Steel", SCIThemeManager.BlackSteel },
{ "Bright Spark", SCIThemeManager.Bright_Spark },
{ "Chrome", SCIThemeManager.Chrome },
{ "Chart V4 Dark", SCIThemeManager.SciChartv4Dark },
{ "Electric", SCIThemeManager.Electric },
{ "Expression Dark", SCIThemeManager.ExpressionDark },
{ "Expression Light", SCIThemeManager.ExpressionLight },
{ "Oscilloscope", SCIThemeManager.Oscilloscope },
};
private readonly UIButton SelectThemeButton = new UIButton(UIButtonType.RoundedRect);
public override UIView ProvidePanel()
{
SelectThemeButton.SetTitle("Select Theme", UIControlState.Normal);
SelectThemeButton.TouchUpInside += (sender, args) =>
{
var actionSheetAlert = UIAlertController.Create("Select Theme", null, UIAlertControllerStyle.ActionSheet);
foreach (var themeName in _themesDictionary.Keys)
{
var themeAction = UIAlertAction.Create(themeName, UIAlertActionStyle.Default, action => SetTheme(themeName));
actionSheetAlert.AddAction(themeAction);
}
actionSheetAlert.AddAction(UIAlertAction.Create("Cansel", UIAlertActionStyle.Cancel, null));
if (actionSheetAlert.PopoverPresentationController != null)
{
actionSheetAlert.PopoverPresentationController.SourceView = View;
actionSheetAlert.PopoverPresentationController.SourceRect = ((UIButton)sender).Frame;
}
View.Window.RootViewController.PresentViewController(actionSheetAlert, true, null);
};
return SelectThemeButton;
}
protected override void InitExample()
{
var dataManager = DataManager.Instance;
var dataSeries3D = new XyzDataSeries3D<double, double, double>();
var metadataProvider = new SCIPointMetadataProvider3D();
for (int i = 0; i < 1250; i++)
{
var x = dataManager.GetGaussianRandomNumber(5, 1.5);
var y = dataManager.GetGaussianRandomNumber(5, 1.5);
var z = dataManager.GetGaussianRandomNumber(5, 1.5);
dataSeries3D.Append(x, y, z);
var metadata = new SCIPointMetadata3D((uint)dataManager.GetRandomColor().ToArgb(), dataManager.GetRandomScale());
metadataProvider.Metadata.Add(metadata);
}
var renderableSeries3D = new SCIScatterRenderableSeries3D
{
DataSeries = dataSeries3D,
MetadataProvider = metadataProvider,
PointMarker = new SCISpherePointMarker3D { FillColor = ColorUtil.Lime, Size = 2f },
};
using (Surface.SuspendUpdates())
{
Surface.XAxis = new SCINumericAxis3D { GrowBy = new SCIDoubleRange(0.1, 0.1) };
Surface.YAxis = new SCINumericAxis3D { GrowBy = new SCIDoubleRange(0.1, 0.1) };
Surface.ZAxis = new SCINumericAxis3D { GrowBy = new SCIDoubleRange(0.1, 0.1) };
Surface.RenderableSeries.Add(renderableSeries3D);
Surface.ChartModifiers.Add(CreateDefault3DModifiers());
Surface.Camera = new SCICamera3D();
}
}
private void SetTheme(string themeName)
{
SCIThemeManager.ApplyTheme(Surface, _themesDictionary[themeName]);
SelectThemeButton.SetTitle(themeName, UIControlState.Normal);
}
}
}
using Android.Widget;
using SciChart.Charting.Themes;
using SciChart.Charting3D.Model;
using SciChart.Charting3D.Model.DataSeries.Xyz;
using SciChart.Charting3D.Modifiers;
using SciChart.Charting3D.Visuals;
using SciChart.Charting3D.Visuals.Axes;
using SciChart.Charting3D.Visuals.Camera;
using SciChart.Charting3D.Visuals.PointMarkers;
using SciChart.Charting3D.Visuals.RenderableSeries.Scatter;
using SciChart.Data.Model;
using Xamarin.Examples.Demo.Data;
using Xamarin.Examples.Demo;
using System.Drawing;
using Xamarin.Examples.Demo.Droid.Components;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
namespace Xamarin.Examples.Demo.Droid.Fragments.Examples3D
{
[Example3DDefinition("Theme Manager 3D Chart", description: "Styling Chart3D via the ThemeManager", icon: ExampleIcon.Themes)]
class ThemeManager3DChartFragment : ExampleBaseFragment
{
private const int BlackSteel = 0;
private const int BrightSpark = 1;
private const int Chrome = 2;
private const int Electric = 3;
private const int ExpressionDark = 4;
private const int ExpressionLight = 5;
private const int Oscilloscope = 6;
private const int SciChartV4Dark = 7;
public SciChartSurface3D Surface => View.FindViewById<SciChartSurface3D>(Resource.Id.chart3d);
public Spinner ThemeSelector => View.FindViewById<Spinner>(Resource.Id.themeSelector);
public override int ExampleLayoutId => Resource.Layout.Example_ThemeManager3D_Fragment;
protected override void InitExample()
{
InitializeUIHandlers();
var dataManager = DataManager.Instance;
var dataSeries3D = new XyzDataSeries3D<double, double, double>();
var metadataProvider = new PointMetadataProvider3D();
for (int i = 0; i < 1250; i++)
{
var x = dataManager.GetGaussianRandomNumber(5, 1.5);
var y = dataManager.GetGaussianRandomNumber(5, 1.5);
var z = dataManager.GetGaussianRandomNumber(5, 1.5);
dataSeries3D.Append(x, y, z);
var color = dataManager.GetRandomColor();
var scale = dataManager.GetRandomScale();
metadataProvider.Metadata.Add(new PointMetadata3D(color, scale));
}
var pointMarker3D = new SpherePointMarker3D()
{
FillColor = Color.Lime,
Size = 2f
};
var renderableSeries3D = new ScatterRenderableSeries3D()
{
PointMarker = pointMarker3D,
DataSeries = dataSeries3D,
MetadataProvider = metadataProvider
};
using (Surface.SuspendUpdates())
{
Surface.XAxis = new NumericAxis3D() { GrowBy = new DoubleRange(0.1, 0.1) };
Surface.YAxis = new NumericAxis3D() { GrowBy = new DoubleRange(0.1, 0.1) };
Surface.ZAxis = new NumericAxis3D() { GrowBy = new DoubleRange(0.1, 0.1) };
Surface.Camera = new Camera3D();
Surface.RenderableSeries.Add(renderableSeries3D);
Surface.ChartModifiers = new ChartModifier3DCollection
{
new PinchZoomModifier3D(),
new OrbitModifier3D(),
new ZoomExtentsModifier3D()
};
}
}
private void InitializeUIHandlers()
{
ThemeSelector.Adapter = new SpinnerStringAdapter(Activity, Resource.Array.style_list);
ThemeSelector.SetSelection(7);
ThemeSelector.ItemSelected += (sender, args) => { SetTheme(args.Position); };
}
private void SetTheme(int position)
{
int themeId;
switch (position)
{
case BlackSteel:
themeId = Resource.Style.SciChart_BlackSteel;
break;
case BrightSpark:
themeId = Resource.Style.SciChart_Bright_Spark;
break;
case Chrome:
themeId = Resource.Style.SciChart_ChromeStyle;
break;
case Electric:
themeId = Resource.Style.SciChart_ElectricStyle;
break;
case ExpressionDark:
themeId = Resource.Style.SciChart_ExpressionDarkStyle;
break;
case ExpressionLight:
themeId = Resource.Style.SciChart_ExpressionLightStyle;
break;
case Oscilloscope:
themeId = Resource.Style.SciChart_OscilloscopeStyle;
break;
case SciChartV4Dark:
themeId = Resource.Style.SciChart_SciChartv4DarkStyle;
break;
default:
themeId = ThemeManager.DefaultTheme;
break;
}
Surface.Theme = themeId;
}
}
}