Staircase Chart | Visiblox Gallery
This demonstrates data being shown on a staircase chart, with area being shown by using the ShowArea property on the series.
Tooltips have been enabled, and can be seen by hovering over a point on the chart.
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.StaircaseChart.StaircaseChartExample"
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"
mc:Ignorable="d"
xmlns:local="clr-namespace:Visiblox.Charts.Examples.StaircaseChart"
xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
<Style x:Key="AreaStyle" TargetType="Path">
<Setter Property="Opacity" Value="0.4" />
</Style>
<!-- define Tooltip template -->
<ControlTemplate x:Key="CustomTooltipTemplate">
<Border BorderBrush="Black" BorderThickness="1" Margin="15,0,0,0" CornerRadius="5" Padding="5,5,5,5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5, 1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.05"/>
<GradientStop Color="LightBlue" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="Letter: "/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding X}" />
<TextBlock Grid.Row="1" Text="Frequency: " />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Y}" />
</Grid>
</Border>
</ControlTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Width="600" Height="350" x:Name="MainChart" Title="Frequency of Letters in English Text" HorizontalAlignment="Center"
PlotAreaBorderStyle="{StaticResource NoBorder}" LegendVisibility="Collapsed" >
<!-- Add zoom behaviour to the chart -->
<charts:Chart.Behaviour>
<charts:ZoomBehaviour />
</charts:Chart.Behaviour>
<!-- Define axes -->
<charts:Chart.XAxis>
<charts:CategoryAxis ShowMajorTicks="False" ShowMinorTicks="False" ShowMajorGridlines="False" />
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis Title="Frequency (%)" ShowMinorTicks="False" ShowMajorGridlines="True" LabelFormatString="N2" Width="62" >
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="0" Maximum="14" />
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.YAxis>
<!-- Define the staircase series on the chart -->
<charts:Chart.Series>
<charts:StaircaseSeries ShowLine="True" ShowArea="True" ShowPoints="True" ToolTipEnabled="True"
ToolTipTemplate="{StaticResource CustomTooltipTemplate}" AreaStyle="{StaticResource AreaStyle}" />
</charts:Chart.Series>
</charts:Chart>
</Grid>
</UserControl>
^ Back To Top
Code
using System.Linq;
using System.Windows.Controls;
namespace Visiblox.Charts.Examples.StaircaseChart
{
/// <summary>
/// A simple chart example displaying staircase data
/// </summary>
public partial class StaircaseChartExample : UserControl
{
public StaircaseChartExample()
{
InitializeComponent();
MainChart.Series.First().DataSeries = GenerateDataSeries();
}
/// <summary>
/// Generate some data
/// </summary>>
public IDataSeries GenerateDataSeries()
{
var series = new DataSeries<string, double>();
series.Title = "English letter frequencies";
series.Add(new DataPoint<string, double>("A", 08.167));
series.Add(new DataPoint<string, double>("B", 01.492));
series.Add(new DataPoint<string, double>("C", 02.782));
series.Add(new DataPoint<string, double>("D", 04.253));
series.Add(new DataPoint<string, double>("E", 12.702));
series.Add(new DataPoint<string, double>("F", 02.228));
series.Add(new DataPoint<string, double>("G", 02.015));
series.Add(new DataPoint<string, double>("H", 06.094));
series.Add(new DataPoint<string, double>("I", 06.966));
series.Add(new DataPoint<string, double>("J", 00.153));
series.Add(new DataPoint<string, double>("K", 00.772));
series.Add(new DataPoint<string, double>("L", 04.025));
series.Add(new DataPoint<string, double>("M", 02.406));
series.Add(new DataPoint<string, double>("N", 06.749));
series.Add(new DataPoint<string, double>("O", 07.507));
series.Add(new DataPoint<string, double>("P", 01.929));
series.Add(new DataPoint<string, double>("Q", 00.095));
series.Add(new DataPoint<string, double>("R", 05.987));
series.Add(new DataPoint<string, double>("S", 06.327));
series.Add(new DataPoint<string, double>("T", 09.056));
series.Add(new DataPoint<string, double>("U", 02.758));
series.Add(new DataPoint<string, double>("V", 00.978));
series.Add(new DataPoint<string, double>("W", 02.360));
series.Add(new DataPoint<string, double>("X", 00.150));
series.Add(new DataPoint<string, double>("Y", 01.974));
series.Add(new DataPoint<string, double>("Z", 00.074));
return series;
}
}
}
^ 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
