Bunifu Bubble Chart
Visualize data patterns, perform quick assessments of data trends with Bubble charts
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.
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:
C#
VB
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
Let us examine Bunifu Bubble charting properties.
This property gets or sets the canvas which will render the bubble chart. The canvas's scale is automatically set by the bubble 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.
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.
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.
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.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.
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.
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.
This property gets or sets an integer value that changes the width of the boundary of a bubble when hovered.
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.
The PointStyle property gets or sets the shape as a data marker on the chart. The default value is the circle shape.
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
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.
Last modified 2yr ago