Templated Chart | Visiblox Gallery
This example shows how each data point of the series can have a different template applied.
Clicking a data point (weather image), will display the weather forecast in the details box.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.TemplatedChart.TemplatedChartExample"
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.TemplatedChart"
mc:Ignorable="d">
<UserControl.Resources>
<local:TemperatureConverter x:Key="TemperatureConverter" />
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
<!-- Add a background image -->
<Style x:Key="PlotAreaStyle" TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Assets/Images/weather-logo.jpg" Stretch="None" Opacity="0.2" AlignmentX="Right" AlignmentY="Top" />
</Setter.Value>
</Setter>
</Style>
<!-- Determines how to render a data point point -->
<ControlTemplate x:Key="PointTemplate">
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<Image Source="{Binding Path=ImageUri}" Width="35" Height="35">
<Image.Clip>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="0,0,35,35" />
</Image.Clip>
</Image>
<Border.Effect>
<DropShadowEffect Color="#FFAFAFAF"/>
</Border.Effect>
</Border>
</ControlTemplate>
<!-- Determines how to render a selected data point point -->
<ControlTemplate x:Key="SelectedPointTemplate">
<Border BorderBrush="Red" BorderThickness="2" CornerRadius="5">
<Image Source="{Binding Path=ImageUri}" Width="35" Height="35" RenderTransformOrigin="0.5,0.5">
<Image.Clip>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="0,0,35,35" />
</Image.Clip>
</Image>
<Border.Effect>
<DropShadowEffect ShadowDepth="1" Color="#FFAFAFAF"/>
</Border.Effect>
</Border>
</ControlTemplate>
</UserControl.Resources>
<StackPanel x:Name="LayoutRoot" Orientation="Vertical" Background="White">
<!-- Set up the chart -->
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Width="600" Height="350" x:Name="Chart" Title="7 Day Weather Forecast" PlotAreaStyle="{StaticResource PlotAreaStyle}"
PlotAreaBorderStyle="{StaticResource NoBorder}" LegendVisibility="Collapsed" >
<charts:Chart.XAxis>
<charts:DateTimeAxis ShowMinorTicks="False" ShowMajorGridlines="False" MajorTickIntervalType="Days" />
</charts:Chart.XAxis>
<charts:Chart.YAxis>
<charts:LinearAxis Title="Temperature (C)" ShowMinorTicks="False"
ShowMajorGridlines="False" LabelFormatString="N0"
MajorTickInterval="5">
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="-7" Maximum="27"/>
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.YAxis>
<charts:Chart.Series>
<charts:TemplatedSeries SelectionMode="SinglePoint" HighlightingEnabled="True" MouseEnter="TemplatedSeries_MouseEnter" MouseLeave="TemplatedSeries_MouseLeave"
PointTemplate="{StaticResource PointTemplate}" SelectedPointTemplate="{StaticResource SelectedPointTemplate}"/>
</charts:Chart.Series>
</charts:Chart>
<!-- Set up an area to display the selected item's weather info -->
<Border BorderBrush="LightGray" Width="400" Height="100" BorderThickness="1" CornerRadius="5" Background="White" Padding="3,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBlock Text="Forecast for" FontWeight="Bold" Padding="0,0,5,0" />
<TextBlock Text="{Binding ElementName=Chart,Path=Series[0].SelectedItem.Date, StringFormat='{}{0:dddd dd MMMM yyyy}'}" FontWeight="Bold" />
</StackPanel>
<Image Grid.Row="1" Grid.Column="0" Margin="5" VerticalAlignment="Top" Source="{Binding ElementName=Chart,Path=Series[0].SelectedItem.ImageUri}"/>
<StackPanel Grid.Row="1" Grid.Column="1" Margin="5" Orientation="Vertical">
<TextBlock Text="{Binding ElementName=Chart,Path=Series[0].SelectedItem.Description}" FontStyle="Italic" />
<StackPanel Orientation="Horizontal" >
<TextBlock Text="Temperature: " />
<TextBlock Text="{Binding ElementName=Chart,Path=Series[0].SelectedItem.Temperature}" />
<TextBlock Text=" °C / "/>
<TextBlock Text="{Binding ElementName=Chart,Path=Series[0].SelectedItem.Temperature, Converter={StaticResource TemperatureConverter}}" />
<TextBlock Text=" °F"/>
</StackPanel>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="Wind: " />
<TextBlock Text="{Binding ElementName=Chart,Path=Series[0].SelectedItem.WindDirection}" />
<TextBlock Text=" at " />
<TextBlock Text="{Binding ElementName=Chart,Path=Series[0].SelectedItem.WindSpeed}" />
<TextBlock Text=" mph" />
</StackPanel>
</StackPanel>
</Grid>
</Border>
</StackPanel>
</UserControl>
^ Back To Top
Code
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
namespace Visiblox.Charts.Examples.TemplatedChart
{
/// <summary>
/// Displays a templated Visiblox Chart for displaying the weather
/// </summary>
public partial class TemplatedChartExample : UserControl
{
Random random = new Random(20110810);
/// <summary>
/// The number of days to show
/// </summary>
private int numberOfDays = 7;
public TemplatedChartExample()
{
InitializeComponent();
Chart.Series.First().DataSeries = GenerateDataSeries();
}
/// <summary>
/// Create some random weather data
/// </summary>
/// <returns>A data series bound to our model objects representing weather</returns>
private IDataSeries GenerateDataSeries()
{
// create the collection of weather points
List<Weather> dataSeries = new List<Weather>();
for (int i = 0; i < numberOfDays; i++)
{
dataSeries.Add(new Weather((WeatherType)random.Next(0, 5), i, random));
}
// create the series for the chart
BindableDataSeries dataSource = new BindableDataSeries()
{
ItemsSource = dataSeries,
XValueBinding = new Binding() { Path = new PropertyPath("Date") },
YValueBinding = new Binding() { Path = new PropertyPath("Temperature") }
};
return dataSource;
}
private void TemplatedSeries_MouseEnter(object sender, MouseEventArgs e)
{
Cursor = Cursors.Hand;
}
private void TemplatedSeries_MouseLeave(object sender, MouseEventArgs e)
{
Cursor = Cursors.Arrow;
}
}
/// <summary>
/// Converts from Celsius to Fahrenheit
/// </summary>
public sealed class TemperatureConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
int tempCelsius = (int)value;
return ((9 / 5.0) * tempCelsius) + 32;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
/// <summary>
/// A model class representing a day's weather
/// </summary>
public class Weather
{
public DateTime Date { get; set; }
public string Description { get; set; }
public Uri ImageUri { get; set; }
public int Temperature { get; set; }
public WindDirection WindDirection { get; set; }
public int WindSpeed { get; set; }
public Weather(WeatherType weatherType, int days, Random randomNumberGenerator)
{
Date = DateTime.Today.AddDays(days);
WindDirection = (WindDirection)randomNumberGenerator.Next(0, 8);
switch (weatherType)
{
case WeatherType.Cloudy:
Description = "Chance of Rain. Partly Cloudy. 30% chance of precipitation.";
Temperature = randomNumberGenerator.Next(2, 20);
ImageUri = new Uri("Assets/Images/cloudy.png", UriKind.Relative);
WindSpeed = randomNumberGenerator.Next(10, 20);
break;
case WeatherType.Thundery:
Description = "Severe weather and thunderstorm!";
Temperature = randomNumberGenerator.Next(-2, 8);
ImageUri = new Uri("Assets/Images/thundery.png", UriKind.Relative);
WindSpeed = randomNumberGenerator.Next(30, 50);
break;
case WeatherType.Rainy:
Description = "Poor visiblity. 70% chance of precipitation.";
Temperature = randomNumberGenerator.Next(0, 15);
ImageUri = new Uri("Assets/Images/rainy.png", UriKind.Relative);
WindSpeed = randomNumberGenerator.Next(15, 30);
break;
case WeatherType.Snowy:
Description = "Overcast. There may be snow!";
Temperature = randomNumberGenerator.Next(-3, 5);
ImageUri = new Uri("Assets/Images/snowy.png", UriKind.Relative);
WindSpeed = randomNumberGenerator.Next(15, 40);
break;
default:
Description = "Glorious sunshine!";
Temperature = randomNumberGenerator.Next(10, 23);
ImageUri = new Uri("Assets/Images/sunny.png", UriKind.Relative);
WindSpeed = randomNumberGenerator.Next(5, 15);
break;
}
}
}
/// <summary>
/// An enum of types of weather we are going to show
/// </summary>
public enum WeatherType
{
Cloudy,
Rainy,
Snowy,
Sunny,
Thundery
}
/// <summary>
/// An enum of wind directions
/// </summary>
public enum WindDirection
{
N,
NE,
E,
SE,
S,
SW,
W,
NW
}
}
^ 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
