Box Plot Chart | Visiblox Gallery
This demonstrates how to add a box plot series on the chart. Box plots are very useful in statistical charts.
Clicking on a box plot will display the following statistical observations: minimim, maximum, lower quartile, median and upper quartile.
Note that this example uses data from an external data source not included in the code snippets - download the examples source code in full to view the data.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.BoxPlotChart.BoxPlotChartExample"
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"
xmlns:prims="clr-namespace:Visiblox.Charts.Primitives;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="TitleTextBlock" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="10,0,0,0" />
</Style>
<Style x:Key="ValueTextBlock" TargetType="TextBlock">
<Setter Property="Margin" Value="5,0,0,0" />
</Style>
<LinearGradientBrush x:Key="SeriesPointFill" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="SteelBlue" Offset="1" />
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="SteelBlue" Offset="0" />
</LinearGradientBrush>
<prims:DataPointYValuesConverter x:Key="DataPointYValuesConverter" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<!-- Define the chart -->
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Name="chart" Title="Train Delays" Width="600" Height="350" LegendVisibility="Collapsed"
PlotAreaBorderStyle="{StaticResource NoBorder}">
<!-- Define the axes -->
<charts:Chart.XAxis>
<charts:DateTimeAxis ShowMajorGridlines="False" />
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis Title="Delay (minutes)" ShowMajorGridlines="False" />
</charts:Chart.YAxis>
<!-- Define the series -->
<charts:Chart.Series>
<charts:BoxPlotSeries PointStroke="DarkBlue" PointFill="{StaticResource SeriesPointFill}" SelectionMode="SinglePoint" />
</charts:Chart.Series>
</charts:Chart>
<!-- Display information about the selected item -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
<TextBlock Style="{StaticResource TitleTextBlock}" Margin="0" Text="Minimum Delay:" />
<TextBlock Style="{StaticResource ValueTextBlock}" Text="{Binding ElementName=chart, Path=Series[0].SelectedItem,
Converter={StaticResource DataPointYValuesConverter}, ConverterParameter=Minimum}" />
<TextBlock Text=" mins" />
<TextBlock Style="{StaticResource TitleTextBlock}" Text="Maximum Delay:" />
<TextBlock Style="{StaticResource ValueTextBlock}" Text="{Binding ElementName=chart, Path=Series[0].SelectedItem,
Converter={StaticResource DataPointYValuesConverter}, ConverterParameter=Maximum}" />
<TextBlock Text=" mins" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Style="{StaticResource TitleTextBlock}" Margin="0" Text="Lower Quartile:" />
<TextBlock Style="{StaticResource ValueTextBlock}" Text="{Binding ElementName=chart, Path=Series[0].SelectedItem,
Converter={StaticResource DataPointYValuesConverter}, ConverterParameter=LowerQuartile}" />
<TextBlock Text=" mins" />
<TextBlock Style="{StaticResource TitleTextBlock}" Text="Median:" />
<TextBlock Style="{StaticResource ValueTextBlock}" Text="{Binding ElementName=chart, Path=Series[0].SelectedItem,
Converter={StaticResource DataPointYValuesConverter}, ConverterParameter=Median}" />
<TextBlock Text=" mins" />
<TextBlock Style="{StaticResource TitleTextBlock}" Text="Upper Quartile:" />
<TextBlock Style="{StaticResource ValueTextBlock}" Text="{Binding ElementName=chart, Path=Series[0].SelectedItem,
Converter={StaticResource DataPointYValuesConverter}, ConverterParameter=UpperQuartile}" />
<TextBlock Text=" mins" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
namespace Visiblox.Charts.Examples.BoxPlotChart
{
/// <summary>
/// An example chart using a box plot series.
/// </summary>
public partial class BoxPlotChartExample : UserControl
{
public BoxPlotChartExample()
{
InitializeComponent();
chart.Series[0].DataSeries = GenereateDataSeries();
}
/// <summary>
/// Generates the data series for the example.
/// </summary>
/// <returns>The data series containing information about train delays</returns>
private IDataSeries GenereateDataSeries()
{
var dataSeries = new DataSeries<DateTime, double>();
DateTime date = new DateTime(2011,07,01);
using (StreamReader reader = new StreamReader(ExampleHelpers.GetApplicationResourceStream("BoxPlotChart/Data/train_data.csv").Stream))
{
// first line is header information so skip over it
reader.ReadLine();
while(reader.Peek() >= 0)
{
string line = reader.ReadLine();
string[] values = line.Split(',');
// Create the data for the current date
Dictionary<object, double> dayData = new Dictionary<object, double>()
{
{ BoxPlotSeries.Minimum, Double.Parse(values[0]) },
{ BoxPlotSeries.LowerQuartile, Double.Parse(values[1]) },
{ BoxPlotSeries.Median, Double.Parse(values[2]) },
{ BoxPlotSeries.UpperQuartile, Double.Parse(values[3]) },
{ BoxPlotSeries.Maximum, Double.Parse(values[4]) }
};
dataSeries.Add(new MultiValuedDataPoint<DateTime, double>(date.Date, dayData));
date = date.AddDays(1);
}
}
return dataSeries;
}
}
}
^ 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
