Bubble Series
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides a conceptual overview of the Bubble series in the IGChartView™ control and provides a code example showing you how to add it to the chart views.

In this topic


Introduction

Bubble series summary

The Bubble series belongs to a group of Scatter series that uses the Cartesian (x, y) coordinate system instead of the polar series’ polar (angle, radius) coordinates system. As the name implies, a Scatter series displays the data as a collection of data points dispersed across the Cartesian plane. Each data point is an ordered pair whose numeric values define its location on the Cartesian plane. The Bubble series is visually impactful drawing attention to uneven intervals or clusters of data. They can highlight the deviation of collected data from predicted results. The scatter series are often used to plot scientific and statistical data. In addition to these characteristics of the scatter series, the sizes of its markers (bubbles) are data-driven.

Data requirements

While the IGChartView control allows for easy binding to your own data model, it is important that you supply the appropriate amount and type of data required by that series. If the data does not meet the minimum requirements based on the type of series that you are using, the IGChartView will appear blank.

Required – the bound data model must contain three numeric fields representing the x-y coordinates and the radius of each bubble on the chat.


Adding a Bubble Series to the IGChartView Code Example

Description

The following code uses the IGBubbleSeriesDataSourceHelper to supply randomly generated data to a Bubble series that first gets added to the IGChartView instance, and then the current UIView adds the IGChartViewas a subview.

Prerequisites

This code example requires the inclusion of the IGChartView framework, detail about how to add this framework can be found in the Adding the Chart Framework File topic.

Code

In Objective-C:

    NSMutableArray *x = [[NSMutableArray alloc] init];
    for (int i = 0; i < 50; i++) {
        [x addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100)]];
    }
    
    NSMutableArray *y = [[NSMutableArray alloc] init];
    for (int i = 0; i < 50; i++) {
        [y addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100)]];
    }
    
    NSMutableArray *radius = [[NSMutableArray alloc] init];
    for (int i = 0; i < 50; i++) {
        [radius addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 20 + 10)]];
    }
    
    IGBubbleSeriesDataSourceHelper *source = [[IGBubbleSeriesDataSourceHelper alloc] init];
    source.xValues = x;
    source.yValues = y;
    source.radiusValues = radius;
    
    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGNumericXAxis *xAxis = [[IGNumericXAxis alloc] initWithKey:@"xAxis"];
    IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
    
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];
    
    IGBubbleSeries *bubbleSeries = [[IGBubbleSeries alloc] initWithKey:@"bubbleSeries"];
    bubbleSeries.xAxis = xAxis;
    bubbleSeries.yAxis = yAxis;
    bubbleSeries.dataSource = source;
    
    [infraChart addSeries:bubbleSeries];
    [self.view addSubview:infraChart];

In C#:


List<NSObject> x = new List<NSObject>();
Random r = new Random();
for(int i = 0; i <50; i++)
x.Add(new NSNumber(r.Next()% 100));

List<NSObject> y= new List<NSObject>();
for(int i = 0; i <50; i++)
y.Add(new NSNumber(r.Next()% 100));

List<NSObject> radius = new List<NSObject>();
for(int i = 0; i <50; i++)
radius.Add(new NSNumber(r.Next()% 20 + 10));



IGBubbleSeriesDataSourceHelper source = new IGBubbleSeriesDataSourceHelper ();
source.XValues = x.ToArray();

source.YValues = y.ToArray();
source.RadiusValues = radius.ToArray();



IGChartView chart = new IGChartView(this.View.Frame);
chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;

this.View.AddSubview(chart);


IGNumericXAxis xAxis = new IGNumericXAxis ("xAxis");
IGNumericYAxis yAxis = new IGNumericYAxis("yAxis");
chart.AddAxis(xAxis);
chart.AddAxis(yAxis);



IGWaterfallSeries series= new IGWaterfallSeries ("series");
series.XAxis = xAxis;
series.YAxis = yAxis;
series.DataSource = source;

chart.AddSeries(columnSeries);

Related Content

Topics

The following content provides additional information related to this topic.

Topic

Purpose

This topic provides a conceptual overview of the Scatter series in the IGChartView control and provides a code example showing you how to add it to the chart views.