Bunifu Line Chart

Overview
Bunifu Line Chart is a chart component that renders a dataset as a single line path on the canvas. It can also be set to render area charts suitable for displaying quantitative data, often for comparing two sets of data. 
Here is an example of a sales dashboard using Bunifu Line Chart.
Getting started
Getting started with Design View
This section explains to you the steps required to start creating a simple line chart in the design view.
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 3: From the toolbox drag and drop BunifuLineChart to the form.
Step 4: Click the ellipsis button on the Data property of BunifuLine, and add the following values to the collection window editor displayed as shown below:
Step 5: Go to the property named TargetCanvas  select bunifuChartCanvas1 as the target component.
Step 6: Advance to BunifuLineChart properties and set a name on the Label property. An example would be No. of Solid State Drives repaired. 
Step 7: Run the application.
Advance to BunifuLineChart properties and set a name on the Label property. An example would be No. of Solid State Drives repaired. 
Alternatively, we can code and render a line chart without using the design view. Here's how to do it:
Code View
C#
VB
1
 void renderLineChart()
2
        {
3
            Bunifu.Charts.WinForms.ChartTypes.BunifuLineChart bunifuLineChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuLineChart();
4
            /*
5
             * For this example we will use random numbers
6
             */
7
            var r = new Random();
8
​
9
            /*
10
             * Add your data from your source - accepts double list
11
             * Below is an example from a random number
12
             */
13
            List<double> data = new List<double>();
14
            data.Add(-30);
15
            for (int i = 0; i < 5; i++)
16
            {
17
                data.Add(r.NextDouble());
18
            }
19
            /*
20
             * Set your data             
21
             */
22
            bunifuLineChart.Data = data;
23
​
24
            /*
25
             * Specify the target canvas
26
             */
27
            bunifuLineChart.TargetCanvas = bunifuChartCanvas1;
28
​
29
            /*
30
             * Add labels to your canvas
31
             * Label count should correspond to data count for charts like Bar charts
32
             */
33
            bunifuChartCanvas1.Labels = new string[] { "Label1", "Label2", "Label3", "Label4", "Label5" };
34
​
35
            /*
36
             * Beautify the chart by sepcifying the colors
37
             */            
38
​
39
            bunifuLineChart.BackgroundColor = Color.Purple;
40
        }
41
​
Copied!
1
Private Sub renderLineChart()
2
    Dim bunifuLineChart As Bunifu.Charts.WinForms.ChartTypes.BunifuLineChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuLineChart()
3
    ' 
4
    '  For this example we will use random numbers
5
    ' 
6
    Dim r = New Random()
7
​
8
    ' 
9
    '  Add your data from your source - accepts double list
10
    '  Below is an example from a random number
11
    ' 
12
    Dim data As List(Of Double) = New List(Of Double)()
13
    data.Add(-30)
14
​
15
    For i As Integer = 0 To 5 - 1
16
        data.Add(r.NextDouble())
17
    Next
18
​
19
    ' 
20
    '  Set your data             
21
    ' 
22
    bunifuLineChart.Data = data
23
​
24
    ' 
25
    '  Specify the target canvas
26
    ' 
27
    bunifuLineChart.TargetCanvas = bunifuChartCanvas1
28
​
29
    ' 
30
    '  Add labels to your canvas
31
    '  Label count should correspond to data count for charts like Bar charts
32
    ' 
33
    bunifuChartCanvas1.Labels = New String() {"Label1", "Label2", "Label3", "Label4", "Label5"}
34
​
35
    ' 
36
    '  Beautify the chart by sepcifying the colors
37
    ' 
38
​
39
    bunifuLineChart.BackgroundColor = Color.Purple
40
End Sub
41
​
Copied!
​
Let us examine Bunifu Line charting properties.
Line properties
1. CubicInterpolationMode 
This property gets and sets the algorithm that draws the curves of a spline line chart. The default algorithm uses a custom weighted cubic interpolation, which renders smooth curves, and the monotone algorithm preserves monotonicity (i.e. it reserves a strict order of the dataset being interpolated/plotted) suitable for presenting y=f(x) datasets. 
the code below illustrates how to set the cubic interpolation at run-time.
C#
VB.NET
1
     private void bunifuRadioButton1_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
2
        {
3
            if (e.Checked)
4
            {
5
                //sets the default cubic interploation mode
6
                bunifuLineChart1.CubicInterpolationMode = BunifuLineChart.CubicInterpolationModes.Default;
7
            }
8
            else
9
            {
10
                //sets a monotone cubic interpolation mode
11
                bunifuLineChart1.CubicInterpolationMode = BunifuLineChart.CubicInterpolationModes.Monotone;
12
            }
13
        }
Copied!
1
	 Private Sub bunifuRadioButton1_CheckedChanged2(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
2
			If e.Checked Then
3
				'sets the default cubic interploation mode
4
				bunifuLineChart1.CubicInterpolationMode = BunifuLineChart.CubicInterpolationModes.Default
5
			Else
6
				'sets a monotone cubic interpolation mode
7
				bunifuLineChart1.CubicInterpolationMode = BunifuLineChart.CubicInterpolationModes.Monotone
8
			End If
9
	 End Sub
10
​
Copied!
2. LineTension
Gets and sets a double numeric value that changes a curve tension of a spline line chart. A zero value renders straight line charts. 
Note that the property doesn’t work when
1.a monotone algorithm is used in the cubic interpolation mode property.
2.rendering a stepped line chart.
3. Order
This property gets and sets the z-order index of a dataset in the case of multiple datasets. A dataset having a less order number will be displayed in front of other line datasets. 
For example,  let's have a pair of charts targeted to the same canvas. The line chart to have an order value of 0 and another chart set to an order value 1. The chart which has an order value of 0 will be displayed on top of the other chart components that have a value of 1 and above. 
 An additional point to note is that a higher negative ordered line plot will render the line chart above other chart components( such as lines, area, scatter plot, bar, etc.), that have a lower negative order value.
As can see, the code below assigns different higher negative order values to render the line plots above the other line plots. 
C#
VB.NET
1
  private void setBorderWidth(BunifuLineChart bunifuLineChart, int width)
2
        {
3
            bunifuLineChart.BorderWidth = width;
4
        }
5
        private void bunifuRadioButton1_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
6
        {
7
         
8
            if (e.Checked){
9
                bunifuLineChart1.Order = 0;
10
                bunifuLineChart2.Order = 1;
11
                bunifuLineChart3.Order = 2;
12
                setBorderWidth(bunifuLineChart1, 6);
13
                setBorderWidth(bunifuLineChart2, 3);
14
                setBorderWidth(bunifuLineChart3, 3);
15
            }
16
        }
17
 
18
        private void bunifuRadioButton2_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
19
        {
20
          
21
            if (e.Checked)
22
            {
23
                bunifuLineChart2.Order = -1;
24
                bunifuLineChart1.Order = 0;
25
                bunifuLineChart3.Order = 2;
26
                setBorderWidth(bunifuLineChart2, 6);
27
                setBorderWidth(bunifuLineChart1, 3);
28
                setBorderWidth(bunifuLineChart3, 3);
29
            }
30
        }
31
​
32
        private void bunifuRadioButton3_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
33
        {
34
            if (e.Checked)
35
            {
36
                bunifuLineChart3.Order = -2;
37
                bunifuLineChart1.Order = 0;
38
                bunifuLineChart2.Order = 2;
39
                setBorderWidth(bunifuLineChart3, 6);
40
                setBorderWidth(bunifuLineChart2, 3);
41
                setBorderWidth(bunifuLineChart1, 3);
42
            }
43
        }
Copied!
1
Private Sub setBorderWidth(ByVal bunifuLineChart As BunifuLineChart, ByVal width As Integer)
2
			bunifuLineChart.BorderWidth = width
3
End Sub
4
		Private Sub bunifuRadioButton1_CheckedChanged2(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
5
​
6
			If e.Checked Then
7
				bunifuLineChart1.Order = 0
8
				bunifuLineChart2.Order = 1
9
				bunifuLineChart3.Order = 2
10
				setBorderWidth(bunifuLineChart1, 6)
11
				setBorderWidth(bunifuLineChart2, 3)
12
				setBorderWidth(bunifuLineChart3, 3)
13
			End If
14
		End Sub
15
​
16
		Private Sub bunifuRadioButton2_CheckedChanged2(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
17
​
18
			If e.Checked Then
19
				bunifuLineChart2.Order = -1
20
				bunifuLineChart1.Order = 0
21
				bunifuLineChart3.Order = 2
22
				setBorderWidth(bunifuLineChart2, 6)
23
				setBorderWidth(bunifuLineChart1, 3)
24
				setBorderWidth(bunifuLineChart3, 3)
25
			End If
26
		End Sub
27
​
28
		Private Sub bunifuRadioButton3_CheckedChanged2(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
29
			If e.Checked Then
30
				bunifuLineChart3.Order = -2
31
				bunifuLineChart1.Order = 0
32
				bunifuLineChart2.Order = 2
33
				setBorderWidth(bunifuLineChart3, 6)
34
				setBorderWidth(bunifuLineChart2, 3)
35
				setBorderWidth(bunifuLineChart1, 3)
36
			End If
37
		End Sub
38
​
Copied!
4.ShowLine
This property gets and sets a boolean value (true or false) to hide or show the line on the canvas. A false value will hide the line plot but display the data points. 
5. SteppedLine
This property gets and sets the type of line to render on the canvas. Values of a stepped line include;
False: does not render a step plot. It is the common default value, for rendering a spline chart
Before: renders a plot value before the next step of a data category. The same graphical plot is also applied with the true value. Below is its illustration
​
Middle: renders a plot value in the middle step of a data category 
After: which renders a plot value after the next step of data category.
​
Border (Line plot) properties
1. BorderCapStyle
This property gets or sets the end cap style of a line plot. The property can be set to one of the following the values can be configured as follows:
Butt - renders a squared border style for the line plot's beginning and end. This is the line plot's default value. 
Square - functions similarly as a Butt prop value where it renders a squared border cap at the end and at the start of the line plot. 
Round - renders a rounded cap at the start and at the end of the line plot.
The following code demonstrates how to change the border cap at run-time.
C#
VB.NET
1
   using Bunifu.Charts.WinForms.ChartTypes;
2
   private void bunifuRadioButton1_CheckedChanged(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
3
        {
4
            if (e.Checked)
5
            {
6
                bunifuLineChart1.BorderCapStyle = BunifuLineChart.LineCaps.Butt;
7
                bunifuChartCanvas1.Update();
8
            }
9
         
10
        }
11
​
12
        private void bunifuRadioButton2_CheckedChanged(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
13
        {
14
            if (e.Checked)
15
            {
16
                bunifuLineChart1.BorderCapStyle = BunifuLineChart.LineCaps.Round;
17
                bunifuChartCanvas1.Update();
18
            }
19
        }
Copied!
1
Imports Bunifu.Charts.WinForms.ChartTypes
2
   Private Sub bunifuRadioButton1_CheckedChanged(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
3
			If e.Checked Then
4
				bunifuLineChart1.BorderCapStyle = BunifuLineChart.LineCaps.Butt
5
				bunifuChartCanvas1.Update()
6
			End If
7
​
8
   End Sub
9
​
10
		Private Sub bunifuRadioButton2_CheckedChanged(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
11
			If e.Checked Then
12
				bunifuLineChart1.BorderCapStyle = BunifuLineChart.LineCaps.Round
13
				bunifuChartCanvas1.Update()
14
			End If
15
		End Sub
16
​
Copied!
2. BorderWidth
This property gets and sets an integer value that changes the line plot's width. The greater the value, the denser the line plot.
​
Data Point properties
1. PointBackgroundColor
This property sets or gets a data point background color on the line plot. 
2. PointBorderColor
This property gets and sets a color value to the point border on a line plot.
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 line plot. 
6. PointRotation
This property gets or sets the integer value that changes the angle of points on a line plot.
The code below shows how to set the PointStyle and PointRotation properties at run-time.
C#
VB.NET
1
using Bunifu.Charts.WinForms.ChartTypes;
2
using System;
3
//using a dropdown SelectedIndex property to change the style of a point
4
 private void bunifuDropdown1_SelectedIndexChanged(object sender, EventArgs e)
5
        {
6
            if (bunifuDropdown1.SelectedIndex == 0)
7
            {
8
                bunifuLineChart1.PointStyle = BunifuLineChart.PointStyles.Circle;
9
            }
10
            else if (bunifuDropdown1.SelectedIndex == 1)
11
            {
12
                bunifuLineChart1.PointStyle = BunifuLineChart.PointStyles.CrossRot;
13
            }
14
            else if (bunifuDropdown1.SelectedIndex == 2)
15
            {
16
                bunifuLineChart1.PointStyle = BunifuLineChart.PointStyles.RectRounded;
17
            }
18
            else
19
            {
20
                bunifuLineChart1.PointStyle = BunifuLineChart.PointStyles.Triangle;
21
            }
22
        }
23
/*On an slider scroll event the PointRotation property of the
24
  line chart shall be set with the slider's value;*/
25
      private void bunifuHSlider1_Scroll(object sender, Utilities.BunifuSlider.BunifuHScrollBar.ScrollEventArgs e)
26
        {
27
            bunifuLineChart1.PointRotation = bunifuHSlider2.Value;
28
            bunifuChartCanvas1.Update();
29
        }
Copied!
1
Imports Bunifu.Charts.WinForms.ChartTypes
2
Imports System
3
'using a dropdown SelectedIndex property to change the style of a point
4
 Private Sub bunifuDropdown1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
5
			If bunifuDropdown1.SelectedIndex = 0 Then
6
				bunifuLineChart1.PointStyle = BunifuLineChart.PointStyles.Circle
7
			ElseIf bunifuDropdown1.SelectedIndex = 1 Then
8
				bunifuLineChart1.PointStyle = BunifuLineChart.PointStyles.CrossRot
9
			ElseIf bunifuDropdown1.SelectedIndex = 2 Then
10
				bunifuLineChart1.PointStyle = BunifuLineChart.PointStyles.RectRounded
11
			Else
12
				bunifuLineChart1.PointStyle = BunifuLineChart.PointStyles.Triangle
13
			End If
14
 End Sub
15
'On an slider scroll event the PointRotation property of the
16
'  line chart shall be set with the slider's value;
17
	  Private Sub bunifuHSlider1_Scroll(ByVal sender As Object, ByVal e As Utilities.BunifuSlider.BunifuHScrollBar.ScrollEventArgs)
18
			bunifuLineChart1.PointRotation = bunifuHSlider2.Value
19
			bunifuChartCanvas1.Update()
20
	  End Sub
21
​
Copied!
7. PointHoverBackgroundColor
This property sets a color value property to the point's background when a mouse pointer hovers over a data point from the line plot.
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 from the line plot. It can as well be used to enlarge the hovered point on a line plot. 
Creating Area Charts
Bunifu line can also be used to create spline-area charts or stepped-line area charts by utilizing the following properties:
1.BackgroundColor property
This property gets and sets the color value for the background fill. It can accept an RGB color specification or an ARGB color specification. In addition, the property is also used to set the colors of the line data points.
2. Fill property
This property gets and sets the type of fill mode for its background color. A false value will disable the fill mode. The following are the possible values to use in the property:
Start: Fills the background color on the bounded line plot area.
Origin: Fills the background color on the space within the bounding line. It has the same effect as setting the Fill property to the start value.
End: Fills the background color on the outer area of the bounding line plot.
Blank: This is the default value of rendering a line chart.  It renders a line plot without a background color around the boundary line. 
Here's a sample application using the FillType prop values at run-time as explained from above
Setting the FillType property at runtime is demonstrated in the following code:
C#
VB.NET
1
  using Bunifu.Charts.WinForms.ChartTypes;
2
  using System;
3
  //the radio buttons are used to change the different values used in the FillType property.
4
  private void bunifuRadioButton1_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
5
        {
6
            if (e.Checked)
7
            {
8
                bunifuLineChart1.Fill = BunifuLineChart.FillOptions.Blank;
9
            }
10
        }
11
​
12
        private void bunifuRadioButton2_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
13
        {
14
            if (e.Checked)
15
            {
16
                bunifuLineChart1.Fill = BunifuLineChart.FillOptions.Start; 
17
            }
18
        }
19
​
20
        private void bunifuRadioButton3_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
21
        {
22
            if (e.Checked)
23
            {
24
                bunifuLineChart1.Fill = BunifuLineChart.FillOptions.End; 
25
            }
26
        }
Copied!
1
  Imports Bunifu.Charts.WinForms.ChartTypes
2
  Imports System
3
  'the radio buttons are used to change the different values used in the FillType property.
4
  Private Sub bunifuRadioButton1_CheckedChanged2(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
5
			If e.Checked Then
6
				bunifuLineChart1.Fill = BunifuLineChart.FillOptions.Blank
7
			End If
8
  End Sub
9
​
10
		Private Sub bunifuRadioButton2_CheckedChanged2(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
11
			If e.Checked Then
12
				bunifuLineChart1.Fill = BunifuLineChart.FillOptions.Start
13
			End If
14
		End Sub
15
​
16
		Private Sub bunifuRadioButton3_CheckedChanged2(ByVal sender As Object, ByVal e As Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs)
17
			If e.Checked Then
18
				bunifuLineChart1.Fill = BunifuLineChart.FillOptions.End
19
			End If
20
		End Sub
21
​
Copied!
 There are 3 types of area charts that Bunifu Line can render: single area charts (as shown in the above picture) , overlapping area charts, and stacked area charts.
A single area chart contains one dataset category whereas overlapping and stacked area charts have at most 2 dataset categories.
Avoid using area charts when there are more than 3-4 categories. In that case use line charts.
To create an overlapping chart have a pair of bunifu lines each having different datasets. Each to have a FillType value of start and set its background colors. 
Make the colors transparent to avoid obscuring information in the background. To set a transparent color use the Alpha, Red, Green and Blue (ARGB) color format.
In the example below, the background colors for the first line chart is 190,186,85,211; and for the second line chart, is 100,249,233, 0.
To render a stacked area chart, set the canvas's XAxesStacked property to true. The outcome is depicted below.
Take Away
Bunifu Line Chart is an excellent charting tool in condensing both small and large datasets into manageable visualizations - and it's more enjoyable than poring over tables. If you've ever designed a dashboard or worked on another project that requires data visualization, you understand how difficult it can be to design such dashboards. Bunifu Line chart is able to assist you in creating visually appealing dashboards.
​
Bunifu Horizontal bar Chart
Bunifu Pie chart
Last modified 1yr ago