SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
WPF Ternary Chart with Error Bars
// WPF Chart Examples
SciChart WPF ships with hundreds of WPF Chart Examples which you can browse, play with, view the source-code and even export each WPF Chart Example to a stand-alone Visual Studio solution. All of this is possible with the new and improved SciChart WPF Examples Suite, which ships as part of the SciChart WPF SDK.
The TernaryErrorBarRenderableSeries requires an XyzDataSeries as data source, wich contains X-point, Y-point and Z-point. This includes HighError and LowError for each series entry. In this example the same XyzDataSeries is re-used to render a WPF Scatter chart, as these only take the X,Y and Z values.
Tips!
Do you need to change the length of the Error Bar Cup? Try setting ErrorBarCupLength. This alters how much space the bar takes up.
Documentation Links
// Source Code
The C#/WPF source code for the WPF Ternary Chart with Error Bars example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
- Clone the SciChart.WPF.Examples from Github.
- Or, view source in the SciChart WPF Examples suite.
- Also the SciChart WPF Trial contains the full source for the examples (link below).
The SciChart Examples source code is available on Github and viewable in-app for some platforms
// ErrorBarSeriesTernaryChartExampleView.xaml
<UserControl x:Class="SciChart.Examples.Examples.CreateTernaryChart.ErrorBarSeriesTernaryChartExampleView"
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:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
xmlns:local="clr-namespace:SciChart.Examples.Examples.CreateTernaryChart"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
d:DesignHeight="400"
d:DesignWidth="600"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/SciChart.Examples.ExternalDependencies;component/Resources/Styles/MergedResources.xaml" />
<ResourceDictionary Source="/SciChart.Examples.ExternalDependencies;component/Resources/Styles/ToolbarButtonsCommon.xaml" />
</ResourceDictionary.MergedDictionaries>
<local:CompositeTernarySeriesInfoToErrorValuesConverter x:Key="CompositeTernarySeriesInfoToErrorValuesConverter"/>
<local:TernaryErrorValuesVisibilityConverter x:Key="TernaryErrorValuesVisibilityConverter"/>
<ext:EnumValueToStringConverter x:Key="SelectedEnumValueConverter" />
<Style x:Key="HintDataItemsTooltipTernaryStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Margin" Value="1" />
</Style>
<DataTemplate x:Key="TooltipTernaryModifierLabelTemplate" DataType="s:CompositeSeriesInfo">
<StackPanel Orientation="Vertical">
<TextBlock Style="{StaticResource HintDataItemsTooltipTernaryStyle}"
Text="{Binding SeriesName, StringFormat='{}{0}'}"
TextDecorations="Underline" />
<TextBlock Style="{StaticResource HintDataItemsTooltipTernaryStyle}" Text="{Binding FormattedXValue, StringFormat='{}Calcite: {0}'}" />
<TextBlock Style="{StaticResource HintDataItemsTooltipTernaryStyle}" Text="{Binding FormattedYValue, StringFormat='{}Dolomite: {0}'}" />
<TextBlock Style="{StaticResource HintDataItemsTooltipTernaryStyle}" Text="{Binding FormattedZValue, StringFormat='{}Residue: {0}'}" />
<Border Margin="2 1" BorderThickness="0 1 0 0" BorderBrush="Black"/>
<TextBlock Style="{StaticResource HintDataItemsTooltipTernaryStyle}"
Visibility="{Binding Path=SeriesInfoCollection, Converter={StaticResource TernaryErrorValuesVisibilityConverter}}"
Text="{Binding Path=SeriesInfoCollection, Converter={StaticResource CompositeTernarySeriesInfoToErrorValuesConverter}, ConverterParameter=HighError}" />
<TextBlock Style="{StaticResource HintDataItemsTooltipTernaryStyle}"
Visibility="{Binding Path=SeriesInfoCollection, Converter={StaticResource TernaryErrorValuesVisibilityConverter}}"
Text="{Binding Path=SeriesInfoCollection, Converter={StaticResource CompositeTernarySeriesInfoToErrorValuesConverter}, ConverterParameter=LowError}" />
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- This toolbar adds cursor, tooltip, legend and theme change functionality -->
<Border Panel.ZIndex="9999"
Background="#FF232426"
BorderBrush="#323539"
BorderThickness="0,0,2,0">
<WrapPanel HorizontalAlignment="Left" Orientation="Vertical">
<ToggleButton x:Name="cursorModButton"
HorizontalAlignment="Left"
Content="Cursor"
IsChecked="{Binding Source={x:Reference Name=cursorTernaryModifier}, Path=IsEnabled, Mode=TwoWay}"
Style="{StaticResource CursorTernaryButtonStyle}"
ToolTipService.ToolTip="Cursor Ternary Modifier" />
<ToggleButton x:Name="tooltipModButton"
HorizontalAlignment="Left"
Content="Tooltip"
ContentTemplate="{StaticResource TooltipIconContentTemplate}"
IsChecked="{Binding Source={x:Reference Name=tooltipTernaryModifier}, Path=IsEnabled, Mode=TwoWay}"
Style="{StaticResource DefaultToggleButtonStyle}"
ToolTipService.ToolTip="tooltip Ternary Modifier" />
<ext:FlyoutMenuButton HorizontalAlignment="Left"
Content="Leg"
Style="{StaticResource FlyoutMenuButtonStyle}"
ToolTipService.ToolTip="Legend">
<ext:FlyoutMenuButton.PopupContent>
<StackPanel MinWidth="150" Orientation="Vertical">
<TextBlock Text="Legend source" />
<ComboBox ItemsSource="{Binding Source={ext:EnumValues {x:Type s:SourceMode}}}"
SelectedItem="{Binding Path=GetLegendDataFor,
Source={x:Reference ternaryLegendModifier},
Mode=TwoWay,
Converter={StaticResource SelectedEnumValueConverter}}" />
<ext:FlyoutSeparator />
<TextBlock Text="Legend placement" />
<ComboBox ItemsSource="{Binding Source={ext:EnumValues {x:Type s:LegendPlacement}}}"
SelectedItem="{Binding Path=LegendPlacement,
Source={x:Reference ternaryLegendModifier},
Mode=TwoWay,
Converter={StaticResource SelectedEnumValueConverter}}" />
<ext:FlyoutSeparator />
<TextBlock Text="Legend orientation" />
<ComboBox ItemsSource="{Binding Source={ext:EnumValues {x:Type Orientation}}}"
SelectedItem="{Binding Path=Orientation,
Source={x:Reference ternaryLegendModifier},
Mode=TwoWay,
Converter={StaticResource SelectedEnumValueConverter}}" />
<ext:FlyoutSeparator />
<CheckBox Margin="3"
VerticalAlignment="Center"
Content="Show legend"
IsChecked="{Binding Path=ShowLegend,
Source={x:Reference ternaryLegendModifier},
Mode=TwoWay}" />
<CheckBox Margin="3"
VerticalAlignment="Center"
Content="Show checkboxes"
IsChecked="{Binding Path=ShowVisibilityCheckboxes,
Source={x:Reference ternaryLegendModifier},
Mode=TwoWay}" />
<CheckBox Margin="3"
VerticalAlignment="Center"
Content="Show series markers"
IsChecked="{Binding Path=ShowSeriesMarkers,
Source={x:Reference ternaryLegendModifier},
Mode=TwoWay}" />
</StackPanel>
</ext:FlyoutMenuButton.PopupContent>
</ext:FlyoutMenuButton>
<ext:FlyoutMenuButton HorizontalAlignment="Left"
HorizontalContentAlignment="Center"
Content="THM"
FontSize="10"
Padding="0"
Style="{StaticResource FlyoutMenuButtonStyle}"
ToolTipService.ToolTip="Theme changing">
<ext:FlyoutMenuButton.PopupContent>
<StackPanel MinWidth="150" Orientation="Vertical">
<TextBlock FontSize="12" Text="Update Theme" />
<ext:FlyoutSeparator />
<ComboBox FontSize="12"
ItemsSource="{Binding Source={x:Static s:ThemeManager.AllThemes}}"
SelectedItem="{Binding Source={x:Reference sciTernaryChart},
Path=(s:ThemeManager.Theme),
Mode=TwoWay}" />
</StackPanel>
</ext:FlyoutMenuButton.PopupContent>
</ext:FlyoutMenuButton>
</WrapPanel>
</Border>
<s:SciChartTernarySurface x:Name="sciTernaryChart"
Grid.Column="1"
s:ThemeManager.Theme="SciChartv4Dark">
<s:SciChartTernarySurface.RenderableSeries>
<s:TernaryErrorBarRenderableSeries x:Name="errorBarsSeries1"
s:TernaryTooltipModifier.TooltipTemplate="{StaticResource TooltipTernaryModifierLabelTemplate}"
ErrorBarCupLength="5"
ErrorDirection="ZAxis"
ErrorType="Relative"
HighError="0.15"
LowError="0.2"
Stroke="Red"
StrokeThickness="2" />
<s:TernaryErrorBarRenderableSeries x:Name="errorBarsSeries2"
s:TernaryTooltipModifier.TooltipTemplate="{StaticResource TooltipTernaryModifierLabelTemplate}"
ErrorBarCupLength="5"
ErrorDirection="YAxis"
ErrorType="Absolute"
HighError="5"
LowError="10"
Stroke="Green"
StrokeThickness="2" />
<s:TernaryErrorBarRenderableSeries x:Name="errorBarsSeries3"
s:TernaryTooltipModifier.TooltipTemplate="{StaticResource TooltipTernaryModifierLabelTemplate}"
ErrorBarCupLength="5"
ErrorDirection="XAxis"
ErrorType="Absolute"
HighError="5"
LowError="10"
Stroke="Lime"
StrokeThickness="2" />
<s:TernaryScatterRenderableSeries x:Name="scatterSeries1"
s:TernaryTooltipModifier.TooltipTemplate="{StaticResource TooltipTernaryModifierLabelTemplate}">
<s:TernaryScatterRenderableSeries.PointMarker>
<s:EllipsePointMarker Width="7"
Height="7"
Fill="Yellow" />
</s:TernaryScatterRenderableSeries.PointMarker>
</s:TernaryScatterRenderableSeries>
<s:TernaryScatterRenderableSeries x:Name="scatterSeries2"
s:TernaryTooltipModifier.TooltipTemplate="{StaticResource TooltipTernaryModifierLabelTemplate}">
<s:TernaryScatterRenderableSeries.PointMarker>
<s:TrianglePointMarker Width="10"
Height="10"
Fill="NavajoWhite" />
</s:TernaryScatterRenderableSeries.PointMarker>
</s:TernaryScatterRenderableSeries>
<s:TernaryScatterRenderableSeries x:Name="scatterSeries3"
s:TernaryTooltipModifier.TooltipTemplate="{StaticResource TooltipTernaryModifierLabelTemplate}">
<s:TernaryScatterRenderableSeries.PointMarker>
<s:SquarePointMarker Width="7"
Height="7"
Fill="DeepSkyBlue" />
</s:TernaryScatterRenderableSeries.PointMarker>
</s:TernaryScatterRenderableSeries>
</s:SciChartTernarySurface.RenderableSeries>
<s:SciChartTernarySurface.XAxisStyle>
<Style TargetType="s:TernaryNumericAxis">
<Setter Property="AxisTitle" Value="CALCITE (%)" />
<Setter Property="TitleFontSize" Value="20" />
<Setter Property="BorderBrush" Value="Lime" />
<Setter Property="BorderThickness" Value="0,0,1,0" />
<Setter Property="TitleStyle">
<Setter.Value>
<Style TargetType="s:TernaryAxisTitle">
<Setter Property="Foreground" Value="Lime" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="TickLabelStyle">
<Setter.Value>
<Style TargetType="s:TernaryAxisLabelTick">
<Setter Property="Foreground" Value="Lime" />
<Setter Property="TickLineStyle">
<Setter.Value>
<Style TargetType="Line">
<Setter Property="Stroke" Value="Lime" />
</Style>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</s:SciChartTernarySurface.XAxisStyle>
<s:SciChartTernarySurface.YAxisStyle>
<Style TargetType="s:TernaryNumericAxis">
<Setter Property="AxisTitle" Value="DOLOMITE (%)" />
<Setter Property="TitleFontSize" Value="20" />
<Setter Property="BorderBrush" Value="Green" />
<Setter Property="BorderThickness" Value="1,0,0,0" />
<Setter Property="TitleStyle">
<Setter.Value>
<Style TargetType="s:TernaryAxisTitle">
<Setter Property="Foreground" Value="Green" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="TickLabelStyle">
<Setter.Value>
<Style TargetType="s:TernaryAxisLabelTick">
<Setter Property="Foreground" Value="Green" />
<Setter Property="TickLineStyle">
<Setter.Value>
<Style TargetType="Line">
<Setter Property="Stroke" Value="Green" />
</Style>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</s:SciChartTernarySurface.YAxisStyle>
<s:SciChartTernarySurface.ZAxisStyle>
<Style TargetType="s:TernaryNumericAxis">
<Setter Property="AxisTitle" Value="RESIDUE (%)" />
<Setter Property="TitleFontSize" Value="20" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="0,0,1,0" />
<Setter Property="TitleStyle">
<Setter.Value>
<Style TargetType="s:TernaryAxisTitle">
<Setter Property="Foreground" Value="Red" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="TickLabelStyle">
<Setter.Value>
<Style TargetType="s:TernaryAxisLabelTick">
<Setter Property="Foreground" Value="Red" />
<Setter Property="TickLineStyle">
<Setter.Value>
<Style TargetType="Line">
<Setter Property="Stroke" Value="Red" />
</Style>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</s:SciChartTernarySurface.ZAxisStyle>
<s:SciChartTernarySurface.ChartModifier>
<s:TernaryModifierGroup>
<s:TernaryCursorModifier x:Name="cursorTernaryModifier" />
<s:TernaryTooltipModifier x:Name="tooltipTernaryModifier" />
<s:TernaryLegendModifier x:Name="ternaryLegendModifier"
Margin="10"
Orientation="Vertical"
ShowLegend="True" />
</s:TernaryModifierGroup>
</s:SciChartTernarySurface.ChartModifier>
</s:SciChartTernarySurface>
</Grid>
</UserControl>
// ErrorBarSeriesTernaryChartExampleView.xaml.cs
using System;
using System.Windows.Controls;
using SciChart.Charting.Model.DataSeries;
using SciChart.Examples.ExternalDependencies.Data;
namespace SciChart.Examples.Examples.CreateTernaryChart
{
/// <summary>
/// Interaction logic for ErrorBarSeriesTernaryChartExampleView.xaml
/// </summary>
public partial class ErrorBarSeriesTernaryChartExampleView : UserControl
{
// A drop in replacement for System.Random which is 3x faster: https://www.codeproject.com/Articles/9187/A-fast-equivalent-for-System-Random
private RandomWalkGenerator _random;
public ErrorBarSeriesTernaryChartExampleView()
{
InitializeComponent();
_random =new RandomWalkGenerator(seed: 0);
cursorModButton.IsChecked = false;
tooltipModButton.IsChecked = false;
// scatters series
var scatterDataSeries1 = new XyzDataSeries<double> {AcceptsUnsortedData = true, SeriesName = "Residue" };
var scatterDataSeries2 = new XyzDataSeries<double> {AcceptsUnsortedData = true, SeriesName = "Dolomite" };
var scatterDataSeries3 = new XyzDataSeries<double> {AcceptsUnsortedData = true, SeriesName = "Calcite" };
// Residue series
for (int i = 0; i < 25; i++)
{
var x = _random.Next(0, 40);
var z = _random.Next(40, 60);
var y = 100 - (x + z);
scatterDataSeries1.Append(x, y, z);
}
// Dolomite series
for (int i = 0; i < 25; i++)
{
var x = _random.Next(0, 40);
var z = _random.Next(10, 30);
var y = 100 - (x + z);
scatterDataSeries2.Append(x, y, z);
}
// Calcite series
for (int i = 0; i < 25; i++)
{
var z = _random.Next(70, 90);
var x = _random.Next(0, 100-z);
var y = 100 - (x + z);
scatterDataSeries3.Append(x, y, z);
}
scatterSeries1.DataSeries = scatterDataSeries1;
scatterSeries2.DataSeries = scatterDataSeries2;
scatterSeries3.DataSeries = scatterDataSeries3;
// errorbars series
var errorBarDataSeries1 = (XyzDataSeries<double, double, double>) scatterDataSeries1.Clone();
var errorBarDataSeries2 = (XyzDataSeries<double, double, double>) scatterDataSeries2.Clone();
var errorBarDataSeries3 = (XyzDataSeries<double, double, double>) scatterDataSeries3.Clone();
errorBarDataSeries1.SeriesName = "ResidueError";
errorBarDataSeries2.SeriesName = "DolomiteError";
errorBarDataSeries3.SeriesName = "CalciteError";
// EllipseError series
errorBarsSeries1.DataSeries = errorBarDataSeries1;
// TriangleError series
errorBarsSeries2.DataSeries = errorBarDataSeries2;
// SquareError series
errorBarsSeries3.DataSeries = errorBarDataSeries3;
}
}
}