This example demonstrates how to create a simple Bubble Chart with Xamarin.iOS and Xamarin.Android for your mobile apps.

A Xamarin Bubble chart can be used to visualize multi-dimensional data on a 2D Chart, for example, using the Bubble size (Z property) and color can denote data of increasing importance or weight at an X-Y location. Bubble charts are widely used in applications for investments, sales, marketing and many more.

In iOS the SCIBubbleRenderableSeries requires a SCIXyzDataSeries, which contains one Z-value per X-Y point and in Android it is FastBubbleRenderableSeries, that requires an instance of XyzDataSeries, which contains X and Y points with position of the bubble and Z value which represents its radius.

Documentation Links

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

// BubbleChartViewController.cs (Xamarin.iOS)

using System;
using System.Linq;
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("Bubble Chart", description: "Generates a Line and Bubble series chart in code", icon: ExampleIcon.BubbleChart)]
    public class BubbleChartViewController : ExampleBaseViewController
    {
        public override Type ExampleViewType => typeof(SingleChartViewLayout);

        public SCIChartSurface Surface => ((SingleChartViewLayout)View).SciChartSurface;

        protected override void InitExample()
        {
            var xAxis = new SCIDateTimeAxis { GrowBy = new SCIDoubleRange(0.0, 0.1) };
            var yAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0, 0.1) };

            var dataSeries = new XyzDataSeries<DateTime, double, double>();
            var tradeDataSource = DataManager.Instance.GetTradeticks().ToArray();

            dataSeries.Append(
                tradeDataSource.Select(x => x.TradeDate).ToArray(),
                tradeDataSource.Select(x => x.TradePrice).ToArray(),
                tradeDataSource.Select(x => x.TradeSize).ToArray());

            var lineSeries = new SCIFastLineRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeStyle = new SCISolidPenStyle(0xFFFF3333, 1f)
            };

            var lineAnimation = new SCIScaleRenderableSeriesAnimation(3, SCIAnimationCurve.EaseOutElastic);
            lineAnimation.StartAfterDelay(0.3f);
            lineSeries.AddAnimation(lineAnimation);

            var bubbleSeries = new SCIBubbleRenderableSeries
            {
                DataSeries = dataSeries,
                //Style = new SCIBubbleSeriesStyle { Detalization = 40,  },
                ZScaleFactor = 1,
                AutoZRange = false,
                BubbleBrushStyle = new SCISolidBrushStyle(0x50CCCCCC),
                StrokeStyle = new SCISolidPenStyle(0x90CCCCCC, 2f)
            };

            var bubbleAnimation = new SCIScaleRenderableSeriesAnimation(3, SCIAnimationCurve.EaseOutElastic);
            bubbleAnimation.StartAfterDelay(0.3f);
            bubbleSeries.AddAnimation(bubbleAnimation);

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(lineSeries);
                Surface.RenderableSeries.Add(bubbleSeries);

                Surface.ChartModifiers = new SCIChartModifierCollection
                {
                    new SCIZoomPanModifier(),
                    new SCIPinchZoomModifier(),
                    new SCIZoomExtentsModifier()
                };
            }
        }
    }
}

// BubbleChartFragment.cs (Xamarin.Android)

using System;
using System.Linq;
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("Bubble Chart", description:"Creates a Bubble Series and Line Chart", icon: ExampleIcon.BubbleChart)]
    public class BubbleChartFragment : 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 DateAxis(Activity) {GrowBy = new DoubleRange(0, 0.1)};
            var yAxis = new NumericAxis(Activity) {GrowBy = new DoubleRange(0, 0.1)};

            var dataSeries = new XyzDataSeries<DateTime, double, double>();
            var tradeDataSource = DataManager.Instance.GetTradeticks().ToArray();

            dataSeries.Append(
                tradeDataSource.Select(x => x.TradeDate),
                tradeDataSource.Select(x => x.TradePrice),
                tradeDataSource.Select(x => x.TradeSize));

            var lineSeries = new FastLineRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeStyle = new SolidPenStyle(0xFFFF3333, 1.ToDip(Activity))
            };

            var bubbleSeries = new FastBubbleRenderableSeries
            {
                DataSeries = dataSeries,
                BubbleBrushStyle = new SolidBrushStyle(0x77CCCCCC),
                StrokeStyle = new SolidPenStyle(0xFFCCCCCC, 2f.ToDip(Activity)),
                ZScaleFactor = 3,
                AutoZRange = false,
            };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(lineSeries);
                Surface.RenderableSeries.Add(bubbleSeries);
                Surface.ChartModifiers = new ChartModifierCollection
                {
                    new RubberBandXyZoomModifier(),
                    new ZoomExtentsModifier(),
                };

                new ScaleAnimatorBuilder(lineSeries, 10600d) { Interpolator = new OvershootInterpolator(), Duration = 1000, StartDelay = 600 }.Start();
                new ScaleAnimatorBuilder(bubbleSeries, 10600d) { Interpolator = new OvershootInterpolator(), Duration = 1000, StartDelay = 600 }.Start();
            }
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES