ComponentOne FlexChart for WinForms
Histogram
FlexChart > Understanding FlexChart > FlexChart Types > Histogram

Histogram chart plots the frequency distribution of data against the defined class intervals or bins. These bins are created by dividing the raw data values into a series of consecutive and non-overlapping intervals. Based on the number of values falling in a particular bin, frequencies are then plotted as rectangular columns against continuous x-axis.

The following images show a histogram and a cumulative histogram created using FlexChart.

Histogram chart Histogram chart
Histogram Cumulative Histogram

Once you provide relevant data, FlexChart automatically calculates the intervals in which your data is grouped. However, if required, you can also specify the width of these intervals by setting the BinWidth property. To create a histogram, you need to add the Histogram series and set the ChartType property to Histogram. You can also create a cumulative histogram by setting the CumulativeMode property to true.

C1.Win.Chart.Histogram histogramSeries;
public Form1()
{
    InitializeComponent();
    SetupChart();
}
void SetupChart()
{
    flexChart1.Dock = DockStyle.Fill;
    flexChart1.Visible = true;
    flexChart1.BackColor = Color.White;

    flexChart1.BeginUpdate();
    flexChart1.Series.Clear();
    flexChart1.ChartType = ChartType.Histogram;
    
    histogramSeries = new C1.Win.Chart.Histogram();
    histogramSeries.Name = "Frequency";
    flexChart1.Series.Add(histogramSeries);

FlexChart generates frequency distribution for the data and plots the same in histogram, upon providing relevant data as shown in the following code snippet.

    flexChart1.DataSource = original;
    flexChart1.Binding = "Y";
    flexChart1.BindingX = "X";
    flexChart1.EndUpdate();
    flexChart1.AxisX.Format = "0.00";            
}

FlexChart also provides you various options to create following variations of Histogram:

Frequency Polygon

A frequency polygon shows a frequency distribution representing the overall pattern in the data. It is a closed two-dimensional figure of straight line segments -created by joining the mid points of the top of the bars of a histogram.

Use the following steps to create a frequency polygon using histogram chart.

  1. Set the HistogramAppearance property to FrequencyPolygon. This property accepts value from the HistogramAppearance enumeration.
  2. Set the style for frequency polygon using the FrequencyPolygonStyle property.

Moreover, you can also create a cumulative frequency polygon by setting the CumulativeMode property to true.

The following images show a frequency polygon and a cumulative frequency polygon created using FlexChart.

Histogram chart Histogram chart
Frequency Polygon Cumulative Frequency Polygon

Use the following code snippet to create a frequency polygon.

Copy Code
histogramSeries.HistogramAppearance = HistogramAppearance.FrequencyPolygon;
histogramSeries.FrequencyPolygonStyle = new ChartStyle()
{Stroke = new SolidBrush(Color.Red), StrokeWidth = 2};
//To create a cumulative frequency polygon
histogramSeries.CumulativeMode = true;        

Gaussian Curve

Gaussian curve is a bell shaped curve, also known as normal curve, which represents the probability distribution of a continuous random variable. It represents a unimodal distribution as it only has one peak. Moreover, it shows a symmetric distribution as fifty percent of the data set lies on the left side of the mean and fifty percent of the data lies on the right side of the mean.

Use the following steps to create a Gaussian curve using histogram chart.

  1. Set the HistogramAppearance property to Histogram. This property accepts value from the HistogramAppearance enumeration.
  2. Set the NormalCurve.Visible property to true to create a Gaussian curve.
  3. Set the style for Gaussian curve using the NormalCurve.LineStyle property.

Following image illustrates a Gaussian curve created using FlexChart, which depicts probability distribution of scores obtained by students of a university in half yearly examinations.

Use the following code snippet to create a Gaussian curve.

Example Title
Copy Code
histogramSeries.HistogramAppearance = HistogramAppearance.Histogram;
histogramSeries.NormalCurve.Visible = true;
histogramSeries.NormalCurve.LineStyle = new ChartStyle() 
{Stroke = new SolidBrush(Color.Green), StrokeWidth = 2 };

Back to Top