Error Bar Chart | Visiblox Gallery
This example demonstrates how to add error bars to the chart. Error bars give a general idea of how accurate a measurement is.
Zooming has been enabled - click and drag with the mouse on the plot area or use the mouse wheel to zoom, double click to unzoom.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.ErrorBarChart.ErrorBarChartExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="LegendNoBorder" TargetType="charts:Legend">
<Setter Property="BorderThickness" Value="0" />
</Style>
<!-- Template the legend so the items are listed horizontally -->
<ControlTemplate x:Key="HorizontalLegend" TargetType="charts:Legend">
<StackPanel>
<ScrollViewer BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
VerticalScrollBarVisibility="Auto" Background="{TemplateBinding Background}" Padding="1">
<StackPanel Orientation="Vertical">
<TextBlock Text="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" Name="LegendTitle" />
<StackPanel Orientation="Horizontal" x:Name="LegendPanel" />
</StackPanel>
</ScrollViewer>
</StackPanel>
</ControlTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<!-- Define the chart -->
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart x:Name="chart" Width="600" Height="350" LegendVisibility="Visible"
LegendPosition="OutsideBottomCenter" LegendStyle="{StaticResource LegendNoBorder}"
LegendTemplate="{StaticResource HorizontalLegend}"
PlotAreaBorderStyle="{StaticResource NoBorder}" Title="Accuracy of a Random Number Generator">
<!-- Enable zoom behaviour -->
<charts:Chart.Behaviour>
<charts:ZoomBehaviour />
</charts:Chart.Behaviour>
<!-- Define the X and the Y axes -->
<charts:Chart.XAxis>
<charts:LinearAxis Title="Number of Values Generated" ShowMajorGridlines="False" ShowMinorTicks="False" />
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis Title="Mean of Generated Values" ShowMajorGridlines="False" ShowMinorTicks="False" />
</charts:Chart.YAxis>
<!-- Define the data series -->
<charts:Chart.Series>
<charts:ErrorBarSeries IsDisplayedOnLegend="False" LineStroke="Red"/>
<charts:LineSeries ShowPoints="True" ShowLine="False" PointSize="4" PointFill="Red" PointStroke="Red" />
<charts:ErrorBarSeries IsDisplayedOnLegend="False" LineStroke="Maroon"/>
<charts:LineSeries ShowPoints="True" ShowLine="False" PointSize="4" PointFill="Maroon" PointStroke="Maroon" />
<charts:ErrorBarSeries IsDisplayedOnLegend="False" LineStroke="DarkOrange"/>
<charts:LineSeries ShowPoints="True" ShowLine="False" PointSize="4" PointFill="DarkOrange" PointStroke="DarkOrange" />
</charts:Chart.Series>
</charts:Chart>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Controls;
namespace Visiblox.Charts.Examples.ErrorBarChart
{
/// <summary>
/// An example chart using Error Bar Series
/// </summary>
public partial class ErrorBarChartExample : UserControl
{
private Random _random;
public ErrorBarChartExample()
{
InitializeComponent();
_random = new Random(20111130);
IDataSeries twoHundredDataSeries;
IDataSeries twoHundredErrorSeries;
IDataSeries oneHundredDataSeries;
IDataSeries oneHundredErrorSeries;
IDataSeries fiftyDataSeries;
IDataSeries fiftyErrorSeries;
GenerateDataSeries(200, out twoHundredDataSeries, out twoHundredErrorSeries);
GenerateDataSeries(100, out oneHundredDataSeries, out oneHundredErrorSeries);
GenerateDataSeries(50, out fiftyDataSeries, out fiftyErrorSeries);
chart.Series[0].DataSeries = twoHundredErrorSeries;
chart.Series[1].DataSeries = twoHundredDataSeries;
chart.Series[2].DataSeries = oneHundredErrorSeries;
chart.Series[3].DataSeries = oneHundredDataSeries;
chart.Series[4].DataSeries = fiftyErrorSeries;
chart.Series[5].DataSeries = fiftyDataSeries;
}
/// <summary>
/// Generates a date series and an error bar series displaying the mean of a set
/// of randomly generated values between 0 and <paramref name="maxValue"/> and the
/// standard error of the mean.
/// </summary>
/// <param name="maxValue">The upper limit of the range of random values to generate</param>
/// <param name="valueSeries">The data series containing the values</param>
/// <param name="errorSeries">The data series containing the error bars</param>
private void GenerateDataSeries(int maxValue, out IDataSeries valueSeries, out IDataSeries errorSeries)
{
// A list to contain the randomly generated values
List<double> values = new List<double>();
// Two temporary series used while creating the data series and the error bar series
DataSeries<double, double> tempValueSeries = new DataSeries<double, double>();
DataSeries<double, double> tempErrorSeries = new DataSeries<double, double>();
for (int i = 1; i <= 100; i++)
{
// Add the next random value to the set
values.Add(_random.Next(maxValue));
double mean = values.Average();
tempValueSeries.Add(i, mean);
// Calculate the standard error of the mean
double error = CalculateStandardDeviation(values) / (Math.Sqrt(i));
// Create a dictionary to store the min and max values for the error
Dictionary<object, double> errorData = new Dictionary<object, double>()
{
{ErrorBarSeries.Minimum, mean - error},
{ErrorBarSeries.Maximum, mean + error}
};
tempErrorSeries.Add(new MultiValuedDataPoint<double, double>(i, errorData));
}
valueSeries = tempValueSeries;
errorSeries = tempErrorSeries;
valueSeries.Title = String.Format("Range: 0 - {0} ", maxValue);
}
/// <summary>
/// Calculates the standard deviation of the values contained in <paramref name="values"/>
/// </summary>
/// <param name="values">The collection of values for which to calculate the standard deviation</param>
/// <returns>The standard deviation of the values contained in <paramref name="values"/></returns>
private double CalculateStandardDeviation(IEnumerable<double> values)
{
double standardDeviation = 0;
if (values.Count() > 0)
{
// Calculates the standard deviation using the formula
// stdev(x) = sqrt(E[X^2] - (E[X])^2)
double averageOfTheSquaredValues = values.Average(x => x * x);
standardDeviation = Math.Sqrt(averageOfTheSquaredValues - Math.Pow(values.Average(), 2));
}
return standardDeviation;
}
}
}
^ Back To Top
Real Charting Power...
View Features and Try for Free
Chart Types
See example charts and download sample source code
Line And Area Charts
Bar And Column Charts
Financial Charts
Other Charts
Developer Features
Check out chart features and technical documentation
High Performance
Customised Look And Feel
Application Development
Other Features
