Bunifu Polar Chart

Overview

Bunifu Polar Chart is a chart component that displays two-dimensional (2D) circular layout chart data in polar coordinates, comprising of several equal-angled segments. What varies is the segment's radius which varies depending on the value it has been set. It is helpful in presenting scales that facilitate comparison between several quantitative aspects of a situation. The example below illustrates how Bunifu Polar Chart has been beautifully crafted to display the app's data.

Getting started

Getting Started with Design View

This section explains the steps required to start creating a simple polar chart and demonstrates the primary usage of the chart control.

Step 1: Drag the canvas control to the form from the toolbox.

Step 2: Access the canvas label property and add the following values in the collection editor.

Step 3: In the property section, set ShowXAxis, ShowYAxis, XAxesGridLines and YAxesGridlines properties to have a false value.

Step 4: Add BunifuPolarChart component to the form by dragging it from the controls' toolbox panel.

Step 5: To begin, go to the label property of the polar chart and set it to, for example, Share of State tax collection.

Step 6: On the target property of the Polar component, select bunifuCanvas1 as the target component.

Step 6: Access BunifuPolarChart's Data property and populate the collection editor with the following values:

Step 8: Set a list of colors in the BackgroundColor/colors property to specify the back color for each sector in the pie chart. For instance, the following is a list of colors assigned to the sectors in the color collection editor.

Step 9: Run the application.

We can code and render a polar chart without using the design view. Here's how to do it:

Code

void renderPolarChart()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuPolarAreaChart bunifuPolarChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuPolarAreaChart();
            /*
             * 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             
             */
            bunifuPolarChart.Data = data;

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

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

            /*
             * 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
             * Color count should correspond to data count
             */
            List<Color> bgColors = new List<Color>();
            for (int i = 0; i < data.Count; i++)
            {
                bgColors.Add(Color.FromArgb(r.Next(256), r.Next(256), r.Next(256)));
            }

            bunifuPolarChart.BackgroundColor = bgColors;
        }

Private Sub renderPolarChart()
    Dim bunifuPolarChart As Bunifu.Charts.WinForms.ChartTypes.BunifuPolarAreaChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuPolarAreaChart()
    ' 
    '  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             
    ' 
    bunifuPolarChart.Data = data

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

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

    ' 
    '  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
    '  Color count should correspond to data count
    ' 
    Dim bgColors As List(Of Color) = New List(Of Color)()

    For i As Integer = 0 To data.Count - 1
        bgColors.Add(Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256)))
    Next

    bunifuPolarChart.BackgroundColor = bgColors
End Sub

Data Properties

1. Data

This property gets or sets a collection of values, which will be presented on the polar 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:

 private void Form1_Load(object sender, EventArgs e)
    {
      Dictionary<string, double> polarData = new Dictionary<string, double>();
      polarData.Add("Africa", 62);
      polarData.Add("East Mediterranean",56);
      polarData.Add("South Asia", 67);
      polarData.Add("Europe", 45);
      polarData.Add("America", 32);
      bunifuChartCanvas1.Labels = polarData.Keys.ToArray();
      bunifuPolarAreaChart1.Data = polarData.Values.ToList();
      bunifuChartCanvas1.Update();      
     }

 Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	  Dim polarData As New Dictionary(Of String, Double)()
	  polarData.Add("Africa", 62)
	  polarData.Add("East Mediterranean",56)
	  polarData.Add("South Asia", 67)
	  polarData.Add("Europe", 45)
	  polarData.Add("America", 32)
	  bunifuChartCanvas1.Labels = polarData.Keys.ToArray()
	  bunifuPolarAreaChart1.Data = polarData.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.

Background and border Properties

1. BackgroundColor

This property gets or sets a fill color to the polar segments. We can specify the colors using the Red Green Blue (RGB) color format as well as the Alpha, Red, Green, and Blue (ARGB) color values in the color collection editor.

The background color of each sector is set by adding color sets for each segment in the color selection editor as shown below:

Each color set will correspond with the order of the data provided in the Data property.

Let's provide each segment with its background color as shown below via code:

  private void Form1_Load(object sender, EventArgs e)
        {
            List<Color> polarColors = new List<Color>()
            {
                Color.FromArgb(167, 225, 0),
                Color.FromArgb(204, 239, 0),
                Color.FromArgb(210, 250, 10),
                Color.FromArgb(220, 250, 100),
                Color.FromArgb(242, 240, 93)
            };
            bunifuPolarAreaChart1.BackgroundColor = polarColors;
            bunifuChartCanvas1.Update();
        }

	 Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
			Dim polarColors As New List(Of Color)() From {Color.FromArgb(167, 225, 0),
			 Color.FromArgb(204, 239, 0), Color.FromArgb(210, 250, 10), 
			 Color.FromArgb(220, 250, 100), Color.FromArgb(242, 240, 93)}
			bunifuPolarAreaChart1.BackgroundColor = polarColors
			bunifuChartCanvas1.Update()
	 End Sub

Here's the output of the back colors from the code above:

2. BorderColor

This property gets or sets a color set to a segment border. The sample form illustrates a polar chart with the border color set to:100, 0, 123

Alternatively, we can set each polar segment to have its border color by adding additional color sets to its color collection editor.

3. BorderWidth

This property gets and sets an integer value that changes the width of the polar segment boundary. The greater the value, the denser the segment borders.

4. HoverBackgroundColor

This property sets a fill color value to a polar segment in which the mouse pointer is suspended.

5. HoverBorderColor

This property changes the border's color around the polar segment that the mouse pointer is hovering over.

6. HoverBorderWidth

This property specifies an integer value that alters the boundary width of a targetted polar segment over which the mouse pointer is hovering.

Take Away

Bunifu Polar Chart is in essence a great chart tool that can be used as live statistical diagrams in your data-centric applications. We can name it a " radially plotted bar chart " since the chart is a cross between a bar chart (using length as a pre-attentive feature) and a pie chart (radial in nature, segments that are wider at the top, thinner in the center, ie. polar coordinates). This helps us understand the form of the chart as a means for representing data.