Discontinuous Line Chart | Visiblox Gallery
This demonstrates how to produce a discontinuous line chart.
Clicking on the radio buttons, you can change the discontinuity mode.
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.Premium.DiscontinuousLine.DiscontinuousLineExample"
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">
<UserControl.Resources>
<!-- Alternate style -->
<Style x:Key="GrayLine" TargetType="charts:LineSeries">
<Setter Property="LineStroke" Value="Gray" />
<Setter Property="LineStyle">
<Setter.Value>
<Style TargetType="Path">
<Setter Property="StrokeDashArray" Value="2,2" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="AreaFill" Value="Gray" />
<Setter Property="PointFill" Value="Gray" />
<Setter Property="PointStroke" Value="Gray" />
<Setter Property="LabelStyle">
<Setter.Value>
<Style TargetType="charts:DataLabel">
<Setter Property="BorderStyle">
<Setter.Value>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="2" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Opacity" Value="0.6" />
<Setter Property="Background" Value="Black" />
<Setter Property="CornerRadius" Value="2" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="TextStyle">
<Setter.Value>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="Opacity" Value="1.0" />
<Setter Property="TextAlignment" Value="Left" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AreaStyle" TargetType="Path">
<Setter Property="Opacity" Value="0.4" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<!-- Set up the chart-->
<StackPanel Orientation="Vertical">
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Width="600" Height="320" x:Name="Chart" Grid.Column="0" LegendVisibility="Collapsed"
Title="Outstanding Defects" HorizontalAlignment="Center" >
<charts:Chart.Behaviour>
<charts:ZoomBehaviour/>
</charts:Chart.Behaviour>
<charts:Chart.XAxis>
<charts:DateTimeAxis LabelFormatString="dd/MM" MajorTickInterval="2" MajorTickIntervalType="Days" ShowMinorTicks="False" ShowMajorGridlines="False" >
</charts:DateTimeAxis>
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis Title="Total Outstanding Defects" ShowMinorTicks="False" ShowMajorGridlines="False" LabelFormatString="N0" >
</charts:LinearAxis>
</charts:Chart.YAxis>
<!-- Define the line series to be shown -->
<charts:Chart.Series>
<!-- Set the styling behaviour to be used when null data points are encountered -->
<charts:DiscontinuousLineSeries ShowArea="True" AreaStyle="{StaticResource AreaStyle}" LineStrokeThickness="1.5"
NullHandlingMode="Gap" NullHandlingStyle="{StaticResource GrayLine}" />
</charts:Chart.Series>
</charts:Chart>
<StackPanel x:Name="Buttons" Orientation="Horizontal" Background="White" HorizontalAlignment="Center">
<RadioButton IsChecked="True" Checked="NullHandlingMode_Gap_Check" Width="100" Margin="10" GroupName="Buttons">Gap Mode</RadioButton>
<RadioButton Click="NullHandlingMode_Skipped_Check" Width="100" Margin="10" GroupName="Buttons">Skip Mode</RadioButton>
<RadioButton Click="NullHandlingMode_Styled_Check" Width="100" Margin="10" GroupName="Buttons">Styled Mode</RadioButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Background="White" HorizontalAlignment="Center">
<CheckBox IsChecked="False" Click="CheckBox_Clicked" Tag="ShowPoints" Margin="0,0,20,0">Toggle Points</CheckBox>
<CheckBox IsChecked="False" Click="CheckBox_Clicked" Tag="ShowDataLabels" Margin="0,0,20,0">Toggle Data Labels</CheckBox>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.Linq;
using System.Windows.Controls;
using System.Windows;
namespace Visiblox.Charts.Examples.Premium.DiscontinuousLine
{
/// <summary>
/// An example for displaying an alternate style based on the discontinuous
/// line series by adding null points into a dataseries
/// </summary>
public partial class DiscontinuousLineExample : UserControl
{
Random randomGenerator = new Random(20110804);
private int startHolidayDay = 15;
private int endHolidayDay = 20;
private int totalNumberOfDays = 30;
private double probabilityOfDefectIncrease = 0.2;
public DiscontinuousLineExample()
{
InitializeComponent();
Chart.Series.First().DataSeries = GenerateDataSeries();
}
/// <summary>
/// Generate a random set of data modelling the number of
/// active defects in a solution and how this changes when
/// a developer goes on annual leave
/// </summary>
private IDataSeries GenerateDataSeries()
{
var dataSeries = new DataSeries<DateTime, int>();
DateTime baseDate = new DateTime(2011, 08, 01);
int numberOfDefects = 50;
for (int x = 0; x < totalNumberOfDays; x++)
{
int defectsChanged = randomGenerator.Next(10);
bool defectIncreased = randomGenerator.NextDouble() < probabilityOfDefectIncrease;
bool onHoliday = x >= startHolidayDay && x <= endHolidayDay;
if (defectIncreased || onHoliday || numberOfDefects - defectsChanged <= 0)
numberOfDefects += defectsChanged;
else
numberOfDefects -= defectsChanged;
// Adding a null point informs the discontinuous line series that the
// alternate style should be used
if (onHoliday)
dataSeries.Add(null);
dataSeries.Add(new DataPoint<DateTime, int>(baseDate.AddDays(x), numberOfDefects));
}
return dataSeries;
}
private void NullHandlingMode_Gap_Check(object sender, RoutedEventArgs e)
{
ChangeNullHandlingMode(sender as RadioButton, NullHandlingMode.Gap);
}
private void NullHandlingMode_Skipped_Check(object sender, RoutedEventArgs e)
{
ChangeNullHandlingMode(sender as RadioButton, NullHandlingMode.Skip);
}
private void NullHandlingMode_Styled_Check(object sender, RoutedEventArgs e)
{
ChangeNullHandlingMode(sender as RadioButton, NullHandlingMode.Styled);
}
private void ChangeNullHandlingMode(RadioButton sender, NullHandlingMode style)
{
if (Chart != null)
{
var series = Chart.Series.First() as DiscontinuousLineSeries;
if (sender.IsChecked == true && series != null)
series.NullHandlingMode = style;
}
}
private void CheckBox_Clicked(object sender, RoutedEventArgs e)
{
if (Chart != null)
{
var button = sender as CheckBox;
if (button.Tag != null)
{
switch (button.Tag.ToString())
{
case "ShowPoints":
EnablePoints(button.IsChecked == true);
break;
case "ShowDataLabels":
EnableDataLabels(button.IsChecked == true);
break;
default:
break;
}
}
}
}
private void EnablePoints(bool value)
{
(Chart.Series.First() as LineSeries).ShowPoints = value;
}
private void EnableDataLabels(bool value)
{
(Chart.Series.First() as LineSeries).ShowDataLabels = value;
}
}
}
^ 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
