Bunifu Radar Chart
Present multivariate data, easily analyze and compare data at a glance among multiple attributes.
Overview
Bunifu Radar Chart is a data visualization component that can be used to compare observations with multiple quantitative variables. It is beneficial for determining which variables have similar values or if any variables are different from the others in the same dataset. Additionally, it is advantageous to observe whether variables have a high or low score inside a dataset, which makes them great for displaying performance.
Here is a showcase illustrating the use of Bunifu Radar chart:
Some other scenarios where this chart type could be used:
An Ideal chart to use when the categories have a natural cyclic order, for example, seasons of the year.
When you want to compare the aggregate values of a number of data series
Getting started
Starting with design
This section explains to you the steps required to start creating a simple radar chart and demonstrate the basic usage of the chart control.
Step 1: Drag the canvas control to the form from the toolbox
Step 2: In the property window of the canvas
on the labels property, add the following values in the string collection editor window as shown below:
Step 4: In the property section of the canvas, set ShowXAxis ShowYAxis, XAxesGridLines
and YAxesGridlines
properties to have a false value.
Step 4: Add BunifuRadarChart
to the form.
Step 5: Go to the label property of the radar chart and set it to, for example, Test scores for student index 001.
Step 6: Access target property of the radar chart component, select bunifuCanvas1
as the target component.
Step 7: Go to the data property of the radar chart component and add the following data:
Step 8: Run the application.
Alternatively, we can code and render a radar chart without using the design view. Here's how to do it:
Code (No design!)
Let us examine Bunifu Line charting properties.
Data Properties
1. Data
This property gets or sets a collection of values, which will be plotted on the radar chart. The order in which data values are added to the property corresponds to the order in which the canvas's label values are input.
Setting and assigning data to the polar chart can be done by either using the Data
property found on the property pane of the design mode or using code. The example below illustrates using both C# and VB.NET codes to populate the polar chart with data at run-time:
Here's the polar chart output of the code above:
2. Target Canvas
This property gets or sets the canvas which will render the polar chart.
Take note of the following properties to be modified on the targetted canvas:
a) Set the ShowXAxis and ShowYAxis to false
.
b) Additionally, set the properties XAxesGridLines and YAxesGridLines to false
.
One can target one canvas with multiple radar charts in the case where there is a need to display and analyze different datasets of one category.
Here is an illustration where we have multiple radar charts targetted to one canvas:
3. Label
This property gets or sets the text to be displayed on the chart's legend. The label indicates what the data represents.
4. Order
This property gets and sets the z-order index of a dataset in the case where there are multiple datasets targetted to one canvas. A dataset having a less order number will appear above other radar charts.
The following code below illustrates how the radar charts have been reordered different order numbers during the form load event:
Border (Line plot) properties
1. BorderColor
This property gets or sets an R.G.B color value for the radar line plot.
2. BorderWidth
This property gets and sets an integer value that changes the radar line plot's width. The greater the value, the denser the line plot.
Background properties
1. BackgroundColor
This property gets a color value that sets the inner area of the radar chart.
This property works when the Fill property is set to the valueStart
Additionally, it can be used to set the data point's color value, although the color value will be overwritten if the PointColor property is set to a color value.
2. Fill
This property sets or gets the fill style for the radar's background color. The following are the possible values to use in the property:
Start: Fills the background color on the bounded line plot area
False: This is the default value of rendering a line chart. It renders a line plot without a background color around the boundary line.
The code below illustrates how the fill has been applied in the radar plot:
This property is functional when a background color value is provided
Data Point properties
1. PointBackgroundColor
This property sets or gets a data point background color on the radar line plot.
2. PointBorderColor
This property gets and sets a color value to the point's border.
3. PointBorderWidth
This property gets and sets an integer number that changes the border width of the line's data points.
4. PointRadius
This property gets or sets the integer value that decreases or increases the radius of a point (i.e. distance from the point’s center to its border). It can as well be used to enlarge the points on a line plot.
5. PointStyle
This property gets or sets a shape (circle, star, line, etc...) to render as a data point on the radar plot.
The code below shows how the radar chart has been applied a point style of a rounded rectangle during the form load event:
Here's the output of the above code:
6. PointRotation
This property gets or sets the integer value that changes the angle of points on a radar plot.
7. PointHoverBackgroundColor
This property sets a color value property to the point's background when hovered.
8. PointHoverBorderWidth
This property sets an integer value property to the point's border width on a mouse hover. When a mouse pointer hovers over a data point in a line plot, this property sets an integer value property to the point's border width.
9. PointHoverRadius
This property sets the integer value that decreases or increases the radius of a point (i.e. distance from the point’s center to its border) when a mouse pointer hovers over a data point in a radar plot. It can as well be used to enlarge the hovered point on a line plot.
Take Away
Bunifu radar chart is particularly useful for presenting multivariate data that does not necessarily share the same scale. They are great for visualising commonality or outliers, or to compare metrics for multiple entities (such as performance metrics for several business units).
The goal of Bunifu radar chart is to visually represent one or more groups of values over multiple variables.
For example, let’s say you want to visually represent restaurants over some set of common variables — such as food quality, food variety, service quality, and others (spoiler alert: you’ll do that later). Radar charts should be a go-to visualization type for this scenario.
You now know what Bunifu radar chart is and when it makes sense to use it.
Last updated