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.

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.

​

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

 void renderBubbleChart()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart bunifuBubbleChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart();
            /*
             * For this example we will use random values
             */
            var r = new Random();
​
            /*
             * Add your data from your source - accepts 3D points
             * Below is an example from a random values
             */
​
            List<Bunifu.Charts.WinForms.Point3D> point3Ds = new List<Bunifu.Charts.WinForms.Point3D>();
​
            for (int i = 0; i < 5; i++)
            {
                Bunifu.Charts.WinForms.Point3D point3D = new Bunifu.Charts.WinForms.Point3D();
                point3D.X = r.Next(0, 20);
                point3D.Y = r.Next(0, 20);
                point3D.Radius = r.Next(0, 20);
                point3Ds.Add(point3D);
            }
            Bunifu.Charts.WinForms.Point3D[] data = point3Ds.ToArray();
           
           
            /*
             * Set your data             
             */
            bunifuBubbleChart.Data = data;
​
            /*
             * Specify the target canvas
             */
            bunifuBubbleChart.TargetCanvas = bunifuChartCanvas1;
​
           
            /*
             * Beautify the chart by sepcifying the color
             */
           
            bunifuBubbleChart.BackgroundColor = Color.FromArgb(r.Next(256), r.Next(256), r.Next(256));
        }

Private Sub renderBubbleChart()
    Dim bunifuBubbleChart As Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart()
    ' 
    '  For this example we will use random values
    ' 
    Dim r = New Random()
​
    ' 
    '  Add your data from your source - accepts 3D points
    '  Below is an example from a random values
    ' 
​
    Dim point3Ds As List(Of Bunifu.Charts.WinForms.Point3D) = New List(Of Bunifu.Charts.WinForms.Point3D)()
​
    For i As Integer = 0 To 5 - 1
        Dim point3D As Bunifu.Charts.WinForms.Point3D = New Bunifu.Charts.WinForms.Point3D()
        point3D.X = r.[Next](0, 20)
        point3D.Y = r.[Next](0, 20)
        point3D.Radius = r.[Next](0, 20)
        point3Ds.Add(point3D)
    Next
​
    Dim data As Bunifu.Charts.WinForms.Point3D() = point3Ds.ToArray()
​
​
    ' 
    '  Set your data             
    ' 
    bunifuBubbleChart.Data = data
​
    ' 
    '  Specify the target canvas
    ' 
    bunifuBubbleChart.TargetCanvas = bunifuChartCanvas1
​
​
    ' 
    '  Beautify the chart by sepcifying the color
    ' 
​
    bunifuBubbleChart.BackgroundColor = Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256))
End Sub
​

​

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.

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.

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.

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.