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 the CursorModifier, a ChartModifierBase derived type which adds a cross-hairs (cursor) to a Xamarin chart, as well as displaying an aggregated tooltip for all series.
Alternative modifiers for displaying tooltips on a SciChart Xamarin Chart include the RolloverModifier and the TooltipModifier.
See Documentation on how to add tooltips here:
The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Chart using CursorModifier Tooltips 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;
using SciChart.Examples.Demo.Data;
using SciChart.Examples.Demo.Fragments.Base;
using SciChart.iOS.Charting;
using Xamarin.Examples.Demo.iOS.Resources.Layout;
using Xamarin.Examples.Demo.iOS.Views.Base;
namespace Xamarin.Examples.Demo.iOS.Views.Examples
{
[ExampleDefinition("Using CursorModifier Tooltips", description: "Demonstrates Cursors on the Chart", icon: ExampleIcon.Annotations)]
public class UsingCursorModifierTooltipsViewController : ExampleBaseViewController
{
private const int PointsCount = 500;
public override Type ExampleViewType => typeof(SingleChartViewLayout);
public SCIChartSurface Surface => ((SingleChartViewLayout)View).SciChartSurface;
protected override void InitExample()
{
var xAxis = new SCINumericAxis { VisibleRange = new SCIDoubleRange(3, 6) };
var yAxis = new SCINumericAxis { AutoRange = SCIAutoRange.Always, GrowBy = new SCIDoubleRange(0.05d, 0.05d) };
var ds1 = new XyDataSeries<double, double> { SeriesName = "Green Series" };
var ds2 = new XyDataSeries<double, double> { SeriesName = "Red Series" };
var ds3 = new XyDataSeries<double, double> { SeriesName = "Gray Series" };
var ds4 = new XyDataSeries<double, double> { SeriesName = "Gold Series" };
var data1 = DataManager.Instance.GetNoisySinewave(300, 1, PointsCount, 0.25);
var data2 = DataManager.Instance.GetSinewave(100, 2, PointsCount);
var data3 = DataManager.Instance.GetSinewave(200, 1.5, PointsCount);
var data4 = DataManager.Instance.GetSinewave(50, 0.1, PointsCount);
ds1.Append(data1.XData, data1.YData);
ds2.Append(data2.XData, data2.YData);
ds3.Append(data3.XData, data3.YData);
ds4.Append(data4.XData, data4.YData);
using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(xAxis);
Surface.YAxes.Add(yAxis);
Surface.RenderableSeries = new SCIRenderableSeriesCollection
{
new SCIFastLineRenderableSeries { DataSeries = ds1, StrokeStyle = new SCISolidPenStyle(0xFF177B17, 2f) },
new SCIFastLineRenderableSeries { DataSeries = ds2, StrokeStyle = new SCISolidPenStyle(0xFFDD0909, 2f) },
new SCIFastLineRenderableSeries { DataSeries = ds3, StrokeStyle = new SCISolidPenStyle(0xFF808080, 2f) },
new SCIFastLineRenderableSeries { DataSeries = ds4, StrokeStyle = new SCISolidPenStyle(0xFFFFD700, 2f), IsVisible = false },
};
Surface.ChartModifiers.Add(new SCICursorModifier
{
Style = { ShowAxisLabels = true, ShowTooltip = true, HitTestMode = SCIHitTestMode.Interpolate }
});
}
}
}
}
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 SciChart.Examples.Demo.Data;
using SciChart.Examples.Demo.Fragments.Base;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
[ExampleDefinition("Using CursorModifier Tooltips", description: "Demonstrates Cursors on the Chart", icon: ExampleIcon.Annotations)]
public class UsingCursorModifierTooltipsFragment : ExampleBaseFragment
{
private const int PointsCount = 500;
public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;
public SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);
protected override void InitExample()
{
var xAxis = new NumericAxis(Activity) {VisibleRange = new DoubleRange(3, 6)};
var yAxis = new NumericAxis(Activity) {AutoRange = AutoRange.Always, GrowBy = new DoubleRange(0.05d, 0.05d)};
var ds1 = new XyDataSeries<double, double> {SeriesName = "Green Series"};
var ds2 = new XyDataSeries<double, double> {SeriesName = "Red Series"};
var ds3 = new XyDataSeries<double, double> {SeriesName = "Gray Series"};
var ds4 = new XyDataSeries<double, double> {SeriesName = "Gold Series"};
var data1 = DataManager.Instance.GetNoisySinewave(300, 1, PointsCount, 0.25);
var data2 = DataManager.Instance.GetSinewave(100, 2, PointsCount);
var data3 = DataManager.Instance.GetSinewave(200, 1.5, PointsCount);
var data4 = DataManager.Instance.GetSinewave(50, 0.1, PointsCount);
ds1.Append(data1.XData, data1.YData);
ds2.Append(data2.XData, data2.YData);
ds3.Append(data3.XData, data3.YData);
ds4.Append(data4.XData, data4.YData);
var rs1 = new FastLineRenderableSeries { DataSeries = ds1, StrokeStyle = new SolidPenStyle(0xFF177B17, 2.ToDip(Activity)) };
var rs2 = new FastLineRenderableSeries { DataSeries = ds2, StrokeStyle = new SolidPenStyle(0xFFDD0909, 2.ToDip(Activity)) };
var rs3 = new FastLineRenderableSeries { DataSeries = ds3, StrokeStyle = new SolidPenStyle(0xFF808080, 2.ToDip(Activity)) };
var rs4 = new FastLineRenderableSeries { DataSeries = ds4, StrokeStyle = new SolidPenStyle(0xFFFFD700, 2.ToDip(Activity)), IsVisible = false };
using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(xAxis);
Surface.YAxes.Add(yAxis);
Surface.RenderableSeries = new RenderableSeriesCollection { rs1, rs2, rs3, rs4 };
Surface.ChartModifiers.Add(new CursorModifier
{
ShowAxisLabels = true,
ShowTooltip = true,
UseInterpolation = true,
});
new SweepAnimatorBuilder(rs1) { Interpolator = new DecelerateInterpolator(), Duration = 2000, StartDelay = 350 }.Start();
new SweepAnimatorBuilder(rs2) { Interpolator = new DecelerateInterpolator(), Duration = 2000, StartDelay = 350 }.Start();
new SweepAnimatorBuilder(rs3) { Interpolator = new DecelerateInterpolator(), Duration = 2000, StartDelay = 350 }.Start();
new SweepAnimatorBuilder(rs4) { Interpolator = new DecelerateInterpolator(), Duration = 2000, StartDelay = 350 }.Start();
}
}
}
}