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 BunifuRadarChartto 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!)

C#

 void renderRadarChart()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart bunifuRadarChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart();
            /*
             * For this example we will use random numbers
             */
            var r = new Random();

            /*
             * Add your data from your source - accepts double list
             * Below is an example from a random number
             */
            List<double> data = new List<double>();

            for (int i = 0; i < 5; i++)
            {
                data.Add(r.NextDouble());
            }
            /*
             * Set your data             
             */
            bunifuRadarChart.Data = data;

            /*
             * Hide grid lines
             */
            bunifuChartCanvas1.XAxesGridLines = false;
            bunifuChartCanvas1.YAxesGridLines = false;

            /*
             * Specify the target canvas
             */
            bunifuRadarChart.TargetCanvas = bunifuChartCanvas1;

            /*
             * Add labels to your canvas
             * Label count should correspond to data count for charts like Bar charts
             */
            bunifuChartCanvas1.Labels = new string[] { "Label1", "Label2", "Label3", "Label4", "Label5" };

            /*
             * Beautify the chart by sepcifying the colors
             */
          

            bunifuRadarChart.BackgroundColor = Color.FromArgb(r.Next(256), r.Next(256), r.Next(256));
            bunifuRadarChart.BorderColor = Color.FromArgb(r.Next(256), r.Next(256), r.Next(256));
        }

VB

Private Sub renderRadarChart()
    Dim bunifuRadarChart As Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart()
    ' 
    '  For this example we will use random numbers
    ' 
    Dim r = New Random()

    ' 
    '  Add your data from your source - accepts double list
    '  Below is an example from a random number
    ' 
    Dim data As List(Of Double) = New List(Of Double)()

    For i As Integer = 0 To 5 - 1
        data.Add(r.NextDouble())
    Next

    ' 
    '  Set your data             
    ' 
    bunifuRadarChart.Data = data

    ' 
    '  Hide grid lines
    ' 
    bunifuChartCanvas1.XAxesGridLines = False
    bunifuChartCanvas1.YAxesGridLines = False

    ' 
    '  Specify the target canvas
    ' 
    bunifuRadarChart.TargetCanvas = bunifuChartCanvas1

    ' 
    '  Add labels to your canvas
    '  Label count should correspond to data count for charts like Bar charts
    ' 
    bunifuChartCanvas1.Labels = New String() {"Label1", "Label2", "Label3", "Label4", "Label5"}

    ' 
    '  Beautify the chart by sepcifying the colors
    ' 


    bunifuRadarChart.BackgroundColor = Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256))
    bunifuRadarChart.BorderColor = Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256))
End Sub

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:

C#

private void Form_Load(object sender, EventArgs e)
{
    Dictionary<string, double> naturalDisasterAndItsReliefFund = new Dictionary<string, double>();
    naturalDisasterAndItsReliefFund.Add("Hurricane Katrina", 170);
    naturalDisasterAndItsReliefFund.Add("Hurricane Hurvey", 130.1);
    naturalDisasterAndItsReliefFund.Add("Hurricane Maria", 194.5);
    naturalDisasterAndItsReliefFund.Add("Hurricane Sandy", 74.1);
    naturalDisasterAndItsReliefFund.Add("Hurricane Imra", 52.5);
    naturalDisasterAndItsReliefFund.Add("Hurricane Andrew", 143.1);
    naturalDisasterAndItsReliefFund.Add("Drought", 134.2);
    naturalDisasterAndItsReliefFund.Add("Midwest flooding", 28.4);

    bunifuChartCanvas1.Labels = naturalDisasterAndItsReliefFund.Keys.ToArray();
    bunifuRadarChart1.Data = naturalDisasterAndItsReliefFund.Values.ToList();
    bunifuChartCanvas1.Update();

}

VB.NET

Private Sub Form_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim naturalDisasterAndItsReliefFund As New Dictionary(Of String, Double)()
	naturalDisasterAndItsReliefFund.Add("Hurricane Katrina", 170)
	naturalDisasterAndItsReliefFund.Add("Hurricane Hurvey", 130.1)
	naturalDisasterAndItsReliefFund.Add("Hurricane Maria", 194.5)
	naturalDisasterAndItsReliefFund.Add("Hurricane Sandy", 74.1)
	naturalDisasterAndItsReliefFund.Add("Hurricane Imra", 52.5)
	naturalDisasterAndItsReliefFund.Add("Hurricane Andrew", 143.1)
	naturalDisasterAndItsReliefFund.Add("Drought", 134.2)
	naturalDisasterAndItsReliefFund.Add("Midwest flooding", 28.4)

	bunifuChartCanvas1.Labels = naturalDisasterAndItsReliefFund.Keys.ToArray()
	bunifuRadarChart1.Data = naturalDisasterAndItsReliefFund.Values.ToList()
	bunifuChartCanvas1.Update()

End Sub

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:

C#

        private void Form4_Load(object sender, EventArgs e)
        {
            //this chart will appear as the first plot in the canvas; compare the legend's positioning
            bunifuRadarChart2.Order = -1;
            //this chart will appear as the second plot in the canvas below Bunifu radar chart 2
            bunifuRadarChart1.Order = 1;
        }

VB.NET

		Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
			'this chart will appear as the first plot in the canvas; compare the legend's positioning
			bunifuRadarChart2.Order = -1
			'this chart will appear as the second plot in the canvas below Bunifu radar chart 2
			bunifuRadarChart1.Order = 1
		End Sub

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:

C#

    private void Form4_Load(object sender, EventArgs e)
        {
            bunifuRadarChart1.Fill = "Start";
            bunifuRadarChart1.BackgroundColor = Color.DodgerBlue;
        }
    }

VB.NET

	Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
			bunifuRadarChart1.Fill = "Start"
			bunifuRadarChart1.BackgroundColor = Color.DodgerBlue
	End Sub
	}

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:

C#

  private void Form_Load(object sender, EventArgs e)
        {
            bunifuRadarChart1.PointStyle = Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart.PointStyles.RectRounded;
            bunifuRadarChart1.PointRadius = 8;
            bunifuRadarChart1.PointHoverRadius = 10;
        }

VB.NET

  Private Sub Form_Load(ByVal sender As Object, ByVal e As EventArgs)
			bunifuRadarChart1.PointStyle = Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart.PointStyles.RectRounded
			bunifuRadarChart1.PointRadius = 8
			bunifuRadarChart1.PointHoverRadius = 10
  End Sub

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.