Projection Chart, Projection Chart, Silverlight, WPF, WP7, charts, components

This example shows how you can use the DiscontinuousLineSeries to create a projection chart.

At the point where the projection starts, a VerticalLineWithValue annotation has been added.

XAML

<UserControl x:Class="Visiblox.Charts.Examples.Premium.ProjectionChart.ProjectionChartExample"
    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="AlternateLine" TargetType="charts:LineSeries">
            <Setter Property="LineStyle">
                <Setter.Value>
                    <Style TargetType="Path">
                        <Setter Property="StrokeDashArray" Value="2,2" />
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="AnnotationTemplate"  TargetType="charts:AxisLabel">
            <Grid x:Name="LayoutRoot" Width="{TemplateBinding CalculatedWidth}" Height="{TemplateBinding CalculatedHeight}">
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform X="0" Y="-210" />
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Grid.Style>
                <Border x:Name="TextBorder" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <TextBlock x:Name="TextLabel" TextAlignment="{Binding RelativeSource={RelativeSource TemplatedParent},Path=HorizontalAlignment}"  
                               Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualText, StringFormat=Projection\ Start\ Date\: \{0\}}"  
                               Style="{TemplateBinding TextStyle}"/>
                </Border>
            </Grid>
        </ControlTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <!-- Set up 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" Grid.Column="0" 
                      LegendVisibility="Collapsed" Title="Projected Values With Alternative Styling" HorizontalAlignment="Center">

            <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="Value" 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 NullHandlingMode="Styled" NullHandlingStyle="{StaticResource AlternateLine}" />
                <charts:DiscontinuousLineSeries NullHandlingMode="Styled" NullHandlingStyle="{StaticResource AlternateLine}" />
                <charts:DiscontinuousLineSeries NullHandlingMode="Styled" NullHandlingStyle="{StaticResource AlternateLine}" />
            </charts:Chart.Series>
        </charts:Chart>
    </Grid>
</UserControl>

^ Back To Top

Code

^ Back To Top

using System;
using System.Windows.Controls;
using System.Windows;

namespace Visiblox.Charts.Examples.Premium.ProjectionChart
{
    /// <summary>
    /// An example of projected data by adding a random amount
    /// to the previous point on multiple line series with a default annotation
    /// displayed where the projection starts from
    /// </summary>
    public partial class ProjectionChartExample : UserControl
    {
        private Random random = new Random(20110804);

        private DataPoint<DateTime, int> projectionStart;

        public ProjectionChartExample()
        {
            InitializeComponent();

            int baseValue = 10;

            // Start each series from a new base point and randomly generate subsequent data
            foreach (IChartSeries series in Chart.Series)
            {
                baseValue += random.Next(10);
                series.DataSeries = GenerateData(baseValue);
            }

            // Add annotation
            Chart.Annotations.Add(new VerticalLineWithValueAnnotation(projectionStart) { IsInteractionEnabled=false, LabelTemplate = Resources["AnnotationTemplate"] as ControlTemplate });
        }

        private IDataSeries GenerateData(int baseValue)
        {
            var dataSeries = new DataSeries<DateTime, int>();

            DateTime baseDate = new DateTime(2011, 08, 01);

            // Add default data (randomly generated but not styled as projected)
            for (int x = 0; x < 10; x++)
            {
                dataSeries.Add(new DataPoint<DateTime, int>(baseDate.AddDays(x), baseValue));
                baseValue += random.Next(10);
            }

            // Add projected data (the null data point forces the alternate style to be used)
            for (int y = 10; y < 15 + 10; y++)
            {
                var dataPoint = new DataPoint<DateTime, int>(baseDate.AddDays(y), baseValue);
             
                if (projectionStart == null)
                    projectionStart = dataPoint;

                dataSeries.Add(dataPoint);
                dataSeries.Add(null);

                baseValue += random.Next(10);
            }

            return dataSeries;
        }

    }
}

^ Back To Top

Real Charting Power...

View Features and Try for Free

Previous Example (Log Chart)

Projection Chart | Visiblox Gallery

XAML

Code

Chart Types

Line And Area Charts

Bar And Column Charts

Financial Charts

Other Charts

Developer Features

High Performance

Customised Look And Feel

Application Development

Other Features