Bunifu bubble chart is an extension of the Bunifu scatter Chart where each data marker is represented by a circle whose dimension forms a third variable. It displays three dimensions of data at the same time. The first two dimensions(X & Y axis) determines the location of the bubble. The third dimension is represented by the size of the individual bubbles. Though it’s called a bubble chart, the data marker can be rendered as either a circle, image or square using the BubbleType property. Bubble charts are also suitable for displaying dozens to hundreds of values, which is convenient for visualizing size values that differ by several orders of magnitude. Bubble charts are frequently used in market and product comparison studies.
This section explains you the steps required to start creating a simple bubble chart and demonstrate the basic usage of the chart control.
Step 1: Drag the canvas control to the form from the toolbox
Step 2: From the toolbox drag and drop the Bunifu bubble component to the form
Step 3: Add data to the Bubble chart component as demonstrated in quick tips
Step 4: On the target property of the Radar component select bunifuCanvas1 as the target component
Step 5: Run the application
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 - 1Dim 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)NextDim 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
Working with data
TargetCanvas
Gets and sets the canvas that will render the bubble chart components
Data
Gets and sets an array of numbers as the datasets for the bubble chart charts
Label
Gets and sets the text to draw on the chart’s legend
Gets and sets a color value property to the bubble’s border.
Gets and sets a color value property to the bubble’s background
Gets and sets an integer value that can modify the width of the bubble’s border.
Gets and sets a shape value to display as a data marker on the chart
Gets and sets the integer value that can change the radius (i.e. distance from the bubble’s center)
Gets and sets the integer value that can change the angle of the point. Note: this works on all point styles except the circle point
HoverBackgroundColor
Gets and sets a color value property to the bubble’s background on a mouse hover event
HoverBorderWidth
Gets and sets an integer value property to the bubble’s border width on a mouse hover event
HoverRadius
Gets and sets the integer value that can change the radius (i.e distance from the center) of the point on a mouse hover event