How to Use .NET Histogram Charts to Visualize Data in Your Desktop Apps

Histogram and ranged histogram charts (available with ComponentOne FlexChart for WinForms, WPF, UWP, Xamarin, and Blazor) empower you with more flexibility to visualize the distribution and dispersion of statistical data.

This blog will demonstrate how to configure FlexChart to visualize cumulative and ranged histogram data in our .NET Windows Forms application.

• What are Histogram Charts?
• Creating a Histogram Chart using FlexChart
• Configuring a Cumulative Histogram
• Configuring a Ranged Histogram
• Adding a Gaussian or Normal Curve

Try ComponentOne FlexChart now!

What are Histogram Charts?

One of the most common statistical charts, histograms visualize the underlying frequency distribution of a given set of continuous data. You can quickly summarize a large range of values by grouping/splitting the entire data set into defined intervals or classes – commonly known as bins. Each bin contains the number of occurrences of the data in the dataset that are contained within that bin. The bins in a histogram are plotted as a vertical (or horizontal) bar on the chart, with the height of the bar (width when horizontal) representing the frequency of data values falling in that bin. There are no spaces.

It’s important to note that while a bar chart's bar height represents the actual value of items, in a histogram, it represents the frequency of items that fall in each bin. This is most clearly represented by the X-axis containing the grouped bins.

Creating a Histogram using FlexChart

ComponentOne FlexChart is a flexible component that can be used to visualize dozens of different types of charts. Most charting libraries support bar charts, but they require you to do the data formatting (summing each bin) separately. FlexChart makes it easy to create a histogram because you can just set the data source, and it will automatically calculate and generate appropriate bins. It will aggregate the data for you.

The steps to create a histogram chart are as follows:

1. Add FlexChart to your application; it will be named flexChart1
2. Set the ChartType property to Histogram
3. Set the DataSource property to your data source. (See more details on how to data bind)
4. Set the BindingX property to the field that gets displayed on the X axis
5. Create a HistogramSeries and add it to the FlexChart.Series collection.
6. On the histogram series object, set the Binding property to the same field name as BindingX - this field will be binned and summed.
7. On the histogram series object, you can also give it a name for the legend and configure the bin width.

Code Example:

flexChart1.ChartType = ChartType.Histogram;
flexChart1.DataSource = GetMyData(); // replace with your data set
flexChart1.BindingX = "X";

// define histogram series object
 var histogramSeries = new C1.Win.Chart.Histogram()
{
    Binding = "X",
    Name = "Frequency",
    BinWidth = 0.2,
};

// add series to FlexChart
flexChart1.Series.Add(histogramSeries);

Configuring a Cumulative Histogram

You can use FlexChart to render a regular or cumulative histogram, in which each bar sums the previous bars. To create a cumulative histogram, you need to set the CumulativeMode property to true. Like many specialized properties, these can be found under the FlexChart Options API.

flexChart1.Options.HistogramCumulativeMode = true;

Configuring a Ranged Histogram

While the categories in a histogram chart have traditionally been associated with quantitative data only, in some scenarios, a user would want to plot text-based categories in the histogram. For example, ages could be visualized based on categories such as 'Youth', 'Young Adults', 'Adults', 'Middle Aged' and 'Older’. With time, there’s been a steady rise in demand for data visualization tools to provide support for such non-numerical x-axis categorization in histograms.

Along similar lines, we introduced a new chart type – ranged histogram – to FlexChart to give flexibility to developers who need to give support for Excel-like chart types in their applications.

The key difference is that you may need to format the data more with a ranged histogram before loading FlexChart. Also, you have to set a different ChartType and series type. The new RangedHistogram series type has new properties that enable unique features for the ranged histogram, including an overflow bin, underflow bin, and bin mode.

• Overflow Bin - FlexChart will automatically create a bin for values that go higher than you set value
• Underflow Bin - FlexChart will automatically create a bin for values that are lower than a set value
• Bin Mode - Determines which binning strategy is used from the options below:
• Automatic - The default behavior and FlexChart will calculate bins for you
• Bin Width - Each bin is based on a numerical value range you specify
• Number of Bins - The data is split into the number of bins you specify.

Code Example:

flexChart1.ChartType = ChartType.RangedHistogram;

var rangedHistoSeries = new C1.Win.Chart.RangedHistogram()
{
    Binding = "Age",
    BinWidth = 10,
    BinMode = HistogramBinning.BinWidth,
    OverflowBin = 100,
    UnderflowBin = 0,
};
this.flexChart1.Series.Add(rangedHistoSeries);

This code creates a ranged histogram similar to the one pictured on the left. Creating a ranged histogram such as the one on the right requires your data set to include the named groups such as “Children” and “Adults”. With your data set formatted and grouped by these values, you will set the BindingX property to a custom field in your data set containing the axis labels.

You can check out the documentation to learn more about the ranged histogram charts.

Adding a Gaussian or Normal Curve

Histogram data typically visualizes a group's statistics, and we often compare this to a normal bell curve. A Gaussian curve is a bell-shaped curve, also known as a normal curve, which represents the probability distribution of a continuous random variable. FlexChart supports a built-in normal Gaussian curve that you can display to aid visualization. Just set the NormalCurve.Visible on the histogram series object.

// Create a normal curve or gaussian curve
histogramSeries.NormalCurve.Visible = true;

Try ComponentOne FlexChart now!