Bunifu Bubble Chart

Overview
Bunifu bubble chart is a type of chart that displays three dimensions of data. It is an extension of the X-Y Bunifu scatter charts. Unlike Bunifu Scatter the Bubble chart has a radius value which is a third variable, that will determine the size of the bubble. This type of chart is a helpful tool for analyzing data sets with multiple inputs, furthermore, visualizing patterns, and find trends using data analysis.
​
Getting started
Getting started with Design View
This section explains the steps required to start creating a simple bubble chart and demonstrates the primary usage of the chart control.
Suppose we have the sample shipments data below and we need to plot its values in the bubble chart plot.
Here's how we can do it:
Step 1: Drag the canvas control to the form from the toolbox.
Step 2: Search for BunifuBubbleChart in the toolbox and drag it to the form. 
Step 3: Access the target property of the bubble chart, set it to target the canvas in the form.
Each region in the shipments table above will be represented by a bubble. 
Step 4: Copy and paste the bunifuBubbleChart components in the component tray until there are six of them(the six regions will be presented by the bubbles).
Step 5: Go to the Name property and give a meaningful name to the bubble chart components.
Also, go to the Label property and assign the continent name of the bubble components. For instance, the AustralianBunifuBubble will have a label of Australia 
Step 6: Access the Color or the BackgroundColor property  and set a color value for each bubble component.
For instance we can set the following color values for the following bubble components:
1.
EuropeBunifuBubble - 101, 212, 133
2.
NorthAmericaBubble - 0, 165, 207
3.
AsiaBunifuBubble - 159, 255, 203
4.
AustrilianBunifuBubble - 37, 161, 142
5.
SouthAmericaBunifuBubble - 122, 229, 130
6.
AfricaBunifuBubble - 0, 78, 100
​
Step 7: Go to the Data property of each bubble component and set the data as per the shipments table. The sales (USD) values shall be plotted on X-axis, the profitability rate values shall be on the Y-axis and the number of units sold shall be plotted on the radius of the bubble.
Ensure that each bubble component has one data member as illustrated below:
​
Step 6: Access the canvas properties and set the correct padding and add X and Y-axis label values:
Step 8: Run the application:
We can code and render a bubble chart without using the design view. Here's how to do it:
Code
C#
VB
1
 void renderBubbleChart()
2
        {
3
            Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart bunifuBubbleChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart();
4
            /*
5
             * For this example we will use random values
6
             */
7
            var r = new Random();
8
​
9
            /*
10
             * Add your data from your source - accepts 3D points
11
             * Below is an example from a random values
12
             */
13
​
14
            List<Bunifu.Charts.WinForms.Point3D> point3Ds = new List<Bunifu.Charts.WinForms.Point3D>();
15
​
16
            for (int i = 0; i < 5; i++)
17
            {
18
                Bunifu.Charts.WinForms.Point3D point3D = new Bunifu.Charts.WinForms.Point3D();
19
                point3D.X = r.Next(0, 20);
20
                point3D.Y = r.Next(0, 20);
21
                point3D.Radius = r.Next(0, 20);
22
                point3Ds.Add(point3D);
23
            }
24
            Bunifu.Charts.WinForms.Point3D[] data = point3Ds.ToArray();
25
           
26
           
27
            /*
28
             * Set your data             
29
             */
30
            bunifuBubbleChart.Data = data;
31
​
32
            /*
33
             * Specify the target canvas
34
             */
35
            bunifuBubbleChart.TargetCanvas = bunifuChartCanvas1;
36
​
37
           
38
            /*
39
             * Beautify the chart by sepcifying the color
40
             */
41
           
42
            bunifuBubbleChart.BackgroundColor = Color.FromArgb(r.Next(256), r.Next(256), r.Next(256));
43
        }
Copied!
1
Private Sub renderBubbleChart()
2
    Dim bunifuBubbleChart As Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart()
3
    ' 
4
    '  For this example we will use random values
5
    ' 
6
    Dim r = New Random()
7
​
8
    ' 
9
    '  Add your data from your source - accepts 3D points
10
    '  Below is an example from a random values
11
    ' 
12
​
13
    Dim point3Ds As List(Of Bunifu.Charts.WinForms.Point3D) = New List(Of Bunifu.Charts.WinForms.Point3D)()
14
​
15
    For i As Integer = 0 To 5 - 1
16
        Dim point3D As Bunifu.Charts.WinForms.Point3D = New Bunifu.Charts.WinForms.Point3D()
17
        point3D.X = r.[Next](0, 20)
18
        point3D.Y = r.[Next](0, 20)
19
        point3D.Radius = r.[Next](0, 20)
20
        point3Ds.Add(point3D)
21
    Next
22
​
23
    Dim data As Bunifu.Charts.WinForms.Point3D() = point3Ds.ToArray()
24
​
25
​
26
    ' 
27
    '  Set your data             
28
    ' 
29
    bunifuBubbleChart.Data = data
30
​
31
    ' 
32
    '  Specify the target canvas
33
    ' 
34
    bunifuBubbleChart.TargetCanvas = bunifuChartCanvas1
35
​
36
​
37
    ' 
38
    '  Beautify the chart by sepcifying the color
39
    ' 
40
​
41
    bunifuBubbleChart.BackgroundColor = Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256))
42
End Sub
43
​
Copied!
​
Let us examine Bunifu Bubble charting properties.
Bubble Data Properties
1. Target Canvas
This property gets or sets the canvas which will render the bubble chart. The canvas's scale is automatically set by the bubble data. 
2. Data
This property gets or sets the X, Y and, radius value that will render a data point in the canvas. 
One concern when setting the radius is that setting it too large will result in the bubble covering the entire canvas; therefore, avoid setting the radius to a size that will cover the other data points.
Setting data can be accomplished by both design and coding. Consider creating the data using the coding method using both the C# and the VB.NET programming languages.
3. Order
The order property gets and sets the z-order index of a dataset in the case of multiple datasets. A dataset with a lower order number will be prioritized above other bubble datasets.
 
For instance, consider a pair of charts targeted to the same canvas. Set the first bubble chart with an order value of 0 and another chart set to an order value of 1. The chart with an order value of 0 will be displayed above all other chart components with an order value of 1 or greater.
4. Label
This property gets and sets the text to display on the chart’s legend. To format the label, use the Legend properties available from the canvas properties.
Bubble Background and border Properties
Background properties
1. BackgroundColor
This property gets or sets the bubble's background color value. We can specify the colors using the Red Green Blue (RGB) color format as well as the Alpha, Red, Green, and Blue (ARGB) color value.
2. HoverBackgroundColor
This property sets a back color value to a bubble that is hovered by the mouse pointer. Similarly to the BackgroundColor property, we can specify an RGB or ARGB color value.
​
Border properties
1. BorderColor
This property gets or sets a color value property to the bubble's borders. We can specify the colors using the .NET Framework colors, or a custom RGB standard color format, or the ARGB color format.
2. BorderWidth
This property gets or sets an integer value that can modify the width of the bubble's border. A greater integer value results in a thick border.
3. HoverBorderWidth
This property gets or sets an integer value that changes the width of the boundary of a bubble when hovered.
4. HoverRadius
This property gets or sets an integer value that increases or decreases the currently set radius (i.e the distance between the border and the center) of the bubble when hovered.
​
Bubble Point Properties
1. PointStyle
The PointStyle property gets or sets the shape as a data marker on the chart. The default value is the circle shape.
2. Rotation
This property gets or sets the integer value that can change the angle of the point. 
The rotation property is applicable on all point forms except the circle shape
Take Away
Bubble Charts are typically used to compare and show the relationships between categorized circles, by the use of positioning and proportions. The overall picture of Bubble Charts can be used to analyze patterns/correlations and test hypotheses.
In a design-first, technology-driven world, using visualizations like bubble charts to communicate a people-centered story is paramount. Bubble charts have the potential to compress and condense large datasets for hundreds, sometimes thousands of data points in a single view. 