HLOC Chart | Visiblox Gallery
Visiblox Charts supports OHLC (Open High Low Close) charts.
Tooltips have been enabled to show more detailed information when hovering over a point.
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.
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
<UserControl x:Class="Visiblox.Charts.Examples.HLOCChart.HLOCChartExample"
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.HLOCChart"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
<local:YValuesConverter x:Key="YValuesConverter" />
<local:DateFormatConverter x:Key="DateFormatConverter" />
<!-- define Tooltip template to use on bars -->
<ControlTemplate x:Key="CustomTooltipTemplate">
<Border BorderBrush="Black" BorderThickness="1" Margin="15,0,0,0" Background="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="Date: "/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding X, Converter={StaticResource DateFormatConverter}}" />
<TextBlock Grid.Row="1" Text="High: " />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Converter={StaticResource YValuesConverter}, ConverterParameter=High}" />
<TextBlock Grid.Row="2" Text="Low: " />
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Converter={StaticResource YValuesConverter}, ConverterParameter=Low}" />
<TextBlock Grid.Row="3" Text="Open: " />
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Converter={StaticResource YValuesConverter}, ConverterParameter=Open}" />
<TextBlock Grid.Row="4" Text="Close: " />
<TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding Converter={StaticResource YValuesConverter}, ConverterParameter=Close}" />
</Grid>
</Border>
</ControlTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<!-- Define the chart, add zoom and a series with type HLOC -->
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Width="600" Height="350" Name="chart" Grid.Row="1" Title="MSFT Share Price (29th Oct - 10th Dec 2009)" HorizontalAlignment="Center"
LegendVisibility="Collapsed" PlotAreaBorderStyle="{StaticResource NoBorder}" >
<charts:Chart.Series>
<charts:HlocSeries ToolTipEnabled="True" ToolTipTemplate="{StaticResource CustomTooltipTemplate}" />
</charts:Chart.Series>
<!-- Add zooming to the charts -->
<charts:Chart.Behaviour>
<charts:ZoomBehaviour/>
</charts:Chart.Behaviour>
<charts:Chart.YAxis>
<charts:LinearAxis LabelFormatString="N2" ShowMinorTicks="False" ShowMajorGridlines="True" MajorTickInterval="0.5" />
</charts:Chart.YAxis>
<charts:Chart.XAxis>
<charts:DateTimeAxis LabelFormatString="dd MMM" ShowMinorTicks="False" ShowMajorGridlines="False">
<charts:DateTimeAxis.Range>
<charts:DateTimeRange Minimum="10-28-2009" Maximum="12-12-2009" />
</charts:DateTimeAxis.Range>
</charts:DateTimeAxis>
</charts:Chart.XAxis>
</charts:Chart>
</Grid>
</UserControl>
^ Back To Top
Code
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Windows.Controls;
using System.Windows.Data;
namespace Visiblox.Charts.Examples.HLOCChart
{
/// <summary>
/// An example of a HLOC data series
/// </summary>
public partial class HLOCChartExample : UserControl
{
/// <summary>
/// Number of data points to show
/// </summary>
private int numberOfDataPoints = 30;
public HLOCChartExample()
{
InitializeComponent();
chart.Series.First().DataSeries = GenerateDataSeries();
//subscribe to X Axis property changed events to handle the zoom level
chart.XAxis.PropertyChanged += HandleZoom;
}
/// <summary>
/// Creates a set of MSFT example data
/// Static as this function is used in multiple examples
/// </summary>
public IDataSeries GenerateDataSeries()
{
// Create a DataSeries to later fill up and set as data source for the HLOC series
var series = new DataSeries<DateTime, double>();
// Read through the csv file and fill up dataSeries with the data
using (StreamReader reader = new StreamReader(ExampleHelpers.GetApplicationResourceStream("HLOCChart/Data/MSFT.csv").Stream))
{
//First line is header information, so skip before reading data
reader.ReadLine();
while (reader.Peek() >= 0 && series.Count < numberOfDataPoints)
{
string line = reader.ReadLine();
string[] values = line.Split(',');
DateTime date = DateTime.Parse(values[0]);
double open = double.Parse(values[1]);
double high = double.Parse(values[2]);
double low = double.Parse(values[3]);
double close = double.Parse(values[4]);
Dictionary<object, double> data = new Dictionary<object, double>();
data.Add(HlocSeries.Open, open);
data.Add(HlocSeries.High, high);
data.Add(HlocSeries.Low, low);
data.Add(HlocSeries.Close, close);
series.Add(new MultiValuedDataPoint<DateTime, double>(date, data));
}
}
return series;
}
/// <summary>
/// Set different axis ticker interval types depending on zoom level
/// </summary>
void HandleZoom(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName == "Zoom")
{
var xAxis = chart.XAxis as DateTimeAxis;
//if chart zoomed in far enough, display days, else display weeks
xAxis.MajorTickIntervalType = xAxis.Zoom.Scale < 0.25 ? DateTimeAxisIntervalSpan.Days : DateTimeAxisIntervalSpan.Weeks;
}
}
}
#region Converters
/// <summary>
/// Convert decimal value to 2 decimal places for value shown by tooltip
/// </summary>
public class YValuesConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
IDataPoint dataPoint = value as IDataPoint;
if (dataPoint != null)
return ((double)dataPoint[parameter]).ToString("N2");
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
/// <summary>
/// Convert a DateTime to shorter date format
/// </summary>
public class DateFormatConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
//convert a DateTime to DD/MM/YY format
if (value != null && value is DateTime)
{
DateTime dateTime = (DateTime)value;
return dateTime.ToString("dd MMMM");
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
#endregion Converters
}
^ 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
