Line, Line Chart, charts, components, Silverlight, WPF, WP7

This example shows how to create a line series chart.

The values below have been bound to properties on the chart and automatically update on interaction.

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.

Trackballs have also been enabled, and the values represented by the trackballs are updated below the chart as they move.

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

^ Back To Top

<UserControl x:Class="Visiblox.Charts.Examples.LineChart.LineChartExample"
    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:local="clr-namespace:Visiblox.Charts.Examples.LineChart">

    <UserControl.Resources>
        <Style x:Key="NoBorder" TargetType="Border">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Black" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>

        <!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
        <charts:Chart Name="chart" Width="600" Height="350" Title="Exchange Rates 2006-2010" HorizontalAlignment="Center" Background="Transparent" 
                       PlotAreaBorderStyle="{StaticResource NoBorder}" LegendVisibility="Collapsed" >

            <!-- Add zooming and a trackball -->
            <charts:Chart.Behaviour>
                <charts:BehaviourManager x:Name="behaviourManager" AllowMultipleEnabled="True">
                    <charts:TrackballBehaviour x:Name="track" />
                    <charts:ZoomBehaviour />
                </charts:BehaviourManager>
            </charts:Chart.Behaviour>

            <!-- Define x and y axes. -->
            <charts:Chart.XAxis>
                <charts:DateTimeAxis ShowMinorTicks="False" ShowMajorGridlines="False">
                    <charts:DateTimeAxis.Range>
                        <charts:DateTimeRange Minimum="01/01/2006" Maximum="04/03/2010"/>
                    </charts:DateTimeAxis.Range>
                </charts:DateTimeAxis>
            </charts:Chart.XAxis>
            <charts:Chart.YAxis>
                <charts:LinearAxis LabelFormatString="0'%" ShowMinorTicks="False" ShowMajorGridlines="False" Title="Change">
                    <charts:LinearAxis.Range>
                        <charts:DoubleRange Minimum="-30" Maximum="40"/>
                    </charts:LinearAxis.Range>
                </charts:LinearAxis>
            </charts:Chart.YAxis>
        </charts:Chart>

        <!-- Define display below chart -->
        <StackPanel Grid.Row="1" HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,0,50,0">
            <!-- Date display -->
            <TextBlock Text="{Binding ElementName=chart, Path=Behaviour.Behaviours[0].CurrentPoints[0].X, StringFormat='dd/MM/yyyy'}" Margin="0,0,10,0"/>

            <!-- Series data display -->
            <Rectangle Margin="20,0,0,5" Height="10" Width="10" Fill="{Binding ElementName=chart, Path=Series[0].LineStroke}" VerticalAlignment="Center" />
            <TextBlock Margin="4,0,0,0" Text="{Binding ElementName=chart, Path=Series[0].DataSeries.Title}"/>
            <TextBlock Margin="4,0,0,0"  Text="(" />
            <TextBlock Text="{Binding ElementName=chart, Path=Behaviour.Behaviours[0].CurrentPoints[0].Y, StringFormat=0.00}" Width="38" />
            <TextBlock Text="%)" />

            <Rectangle Margin="20,0,0,5" Height="10" Width="10" Fill="{Binding ElementName=chart, Path=Series[1].LineStroke}" VerticalAlignment="Center" />
            <TextBlock Margin="4,0,0,0" Text="{Binding ElementName=chart, Path=Series[1].DataSeries.Title}"  />
            <TextBlock Margin="4,0,0,0"  Text="(" />
            <TextBlock Text="{Binding ElementName=chart, Path=Behaviour.Behaviours[0].CurrentPoints[1].Y, StringFormat=0.00}" Width="38" />
            <TextBlock Text="%)" />

            <Rectangle Margin="20,0,0,5" Height="10" Width="10" Fill="{Binding ElementName=chart, Path=Series[2].LineStroke}" VerticalAlignment="Center" />
            <TextBlock Margin="4,0,0,0" Text="{Binding ElementName=chart, Path=Series[2].DataSeries.Title}" />
            <TextBlock Margin="4,0,0,0"  Text="(" />
            <TextBlock Text="{Binding ElementName=chart, Path=Behaviour.Behaviours[0].CurrentPoints[2].Y, StringFormat=0.00}" Width="38" />
            <TextBlock Text="%)" />
        </StackPanel>
    </Grid>
</UserControl>

^ Back To Top

Code

^ Back To Top

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

namespace Visiblox.Charts.Examples.LineChart
{
    public partial class LineChartExample : UserControl
    {
        /// <summary>
        /// Specify which files we want to read from 
        /// </summary>
        String[] fileNames = new String[] { "GBPtoUSD.cvs", "GBPtoEUR.cvs", "EURtoUSD.cvs" };

        /// <summary>
        /// Specify the name of each dataSeries
        /// </summary>
        String[] legendNames = new String[] { "£ vs $", "£ vs €", "€ vs $" };

        public LineChartExample()
        {
            InitializeComponent();

            //Read each file, create DataSeries then add to the chart
            for (int i = 0; i < fileNames.Length; i++)
            {
                CreateLineSeries(fileNames[i], legendNames[i]);
            }
        }

        private void CreateLineSeries(string filename, string legendName)
        {
            //Create the LineSeries, then add to the chart
            LineSeries lineSeries = new LineSeries();
            lineSeries.DataSeries = GenerateDataSeries(filename, legendName);
            lineSeries.LineStrokeThickness = 1.5;
            chart.Series.Add(lineSeries);
        }

        private IDataSeries GenerateDataSeries(string filename, string legendName)
        {
            //Create a data series with the appropriate name
            var series = new DataSeries<DateTime, float>(legendName);

            using (StreamReader streamReader = new StreamReader(ExampleHelpers.GetApplicationResourceStream("LineChart/Data/" + filename).Stream))
            {
                float rebaseValue = 0;

                while (streamReader.Peek() >= 0)
                {
                    string line = streamReader.ReadLine();
                    string[] parts = line.Split(',');

                    //the files are formatted like so: "DD/MM/YYYY,VALUE"
                    String[] dateParts = parts[0].Split('/');
                    DateTime time = new DateTime(int.Parse(dateParts[2]), int.Parse(dateParts[0]), int.Parse(dateParts[1]));
                    float rate = float.Parse(parts[1]);

                    //If it's the first data point, work out the rebase value
                    if (rebaseValue == 0)
                    {
                        rebaseValue = 100 / rate;
                    }

                    //rebase value to 0
                    rate = (rate * rebaseValue) - 100;

                    series.Add(new DataPoint<DateTime, float>(time, rate));
                }

            }

            return series;
        }
    }
}

^ Back To Top

Real Charting Power...

View Features and Try for Free

Next Example (Area)

Line 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