Continuing the series of posts on new features for our controls, let’s turn to the DevExpress Chart Control for WPF (DXCharts). This is a powerful charting package that enables you to implement advanced charting solutions in your WPF application projects.
For this blog post, I decided to create a financial chart sample that most people can relate to (or understand). The following topics are covered in this post:
- Creating an intraday financial (candlestick) chart using data from an Access database
- Adding a title to the chart NEW
- Using the new Constant Lines feature in DXCharts to indicate the daily highs and lows as well as the previous close of the market instrument. NEW
For this project, I’m using the S&P 500 Index’s intraday data in 5 minute intervals (5-min ticks). I’ve attached the data as well as the sample project to this post. Keep in mind the data is simply there for demo purposes and should not be used to make investment decisions.
There, with the disclaimer out of the way, let’s dive into the project...
You’ll need to start by adding the database as a data source for your project. So if you want to replicate everything in this sample, you’d need to add the Access database using the Data Source Configuration Wizard that can be invoked via the “Data –> Add New Data Source” menu entry. The columns we need are “Time”, “Open”, “High”, “Low”, and “Close”.
Once that’s done, add a DXCharts control to the WPF window. You can add a title to the chart using the following code:
1: <dxc:ChartControl Name="chartControl1">
2: <dxc:ChartControl.Titles>
3: <dxc:Title Content="S&P 500 Index (SPX) - May 18, 2010" HorizontalAlignment="Center" />
4: </dxc:ChartControl.Titles>
5: </dxc:ChartControl>
You can have multiple titles that dock to the top, bottom, or sides of the chart control. In this case, I only need one title to be displayed at the top.
Now let’s add the candlestick series and customize it. The end-result of the XAML should look like this:
1: <dxc:ChartControl Name="chartControl1">
2: <dxc:ChartControl.Titles>
3: <dxc:Title Content="S&P 500 Index (SPX) - May 18, 2010" HorizontalAlignment="Center" />
4: </dxc:ChartControl.Titles>
5: <dxc:ChartControl.Diagram>
6: <dxc:XYDiagram2D>
7: <dxc:XYDiagram2D.AxisY>
8: <dxc:AxisY2D>
9: <dxc:AxisY2D.Range>
10: <dxc:AxisRange MaxValue="1150" MinValue="1110" />
11: </dxc:AxisY2D.Range>
12: </dxc:AxisY2D>
13: </dxc:XYDiagram2D.AxisY>
14: <dxc:XYDiagram2D.AxisX>
15: <dxc:AxisX2D DateTimeGridAlignment="Minute" DateTimeMeasureUnit="Minute">
16: <dxc:AxisX2D.DateTimeOptions>
17: <dxc:DateTimeOptions Format="ShortTime" />
18: </dxc:AxisX2D.DateTimeOptions>
19: </dxc:AxisX2D>
20: </dxc:XYDiagram2D.AxisX>
21: <dxc:XYDiagram2D.Series>
22: <dxc:CandleStickSeries2D Name="SPXSeries" ArgumentScaleType="DateTime"
23: ArgumentDataMember="Time" OpenValueDataMember="Open"
24: HighValueDataMember="High" LowValueDataMember="Low"
25: CloseValueDataMember="Close" CandleWidth="2">
26: <dxc:CandleStickSeries2D.Label>
27: <dxc:SeriesLabel Visible="False" />
28: </dxc:CandleStickSeries2D.Label>
29: </dxc:CandleStickSeries2D>
30: </dxc:XYDiagram2D.Series>
31: </dxc:XYDiagram2D>
32: </dxc:ChartControl.Diagram>
33: </dxc:ChartControl>
Finally, I need to bind the chart to data and draw the constant lines:
1: // Required assembly reference
2: using DevExpress.Xpf.Charts;
3:
4:
5: ConstantLineCollection ConstantLines { get { return ((XYDiagram2D)chartControl1.Diagram).AxisY.ConstantLines; } }
6:
7: public MainWindow() {
8: InitializeComponent();
9:
10: // Bind the chart series to data
11: SPXSeries.DataSource = new SPXDataSetTableAdapters.IntradayTableAdapter().GetData();
12:
13: // Draw the constant lines for the daily high, daily low and previous close values
14: ConstantLine highConstantLine = new ConstantLine(1148.66, "High");
15: highConstantLine.Brush = new SolidColorBrush(Colors.Green);
16: highConstantLine.Title.Foreground = new SolidColorBrush(Colors.Green);
17: ConstantLine lowConstantLine = new ConstantLine(1117.2, "Low");
18: lowConstantLine.Brush = new SolidColorBrush(Colors.Red);
19: lowConstantLine.Title.Foreground = new SolidColorBrush(Colors.Red);
20: ConstantLine closeConstantLine = new ConstantLine(1136.94, "Previous Close");
21: closeConstantLine.Brush = new SolidColorBrush(Colors.YellowGreen);
22: closeConstantLine.Title.Foreground = new SolidColorBrush(Colors.YellowGreen);
23: ConstantLines.AddRange(new ConstantLine[] { highConstantLine, lowConstantLine, closeConstantLine });
24: foreach (ConstantLine constantLine in ConstantLines) {
25: constantLine.ShowBehind = true;
26: constantLine.Title.Alignment = ConstantLineTitleAlignment.Far;
27: }
28: }
In a real-world application you will of course implement a routine to automatically select the highs and lows of the trading day, however as you can see from the code, I’ve manually entered the values to keep this example simple.
And when I run the project, the end-result will look like this:
UPDATE: We’ve also published a video tutorial that can be viewed here: http://tv.devexpress.com/DXChartsFinanceCharts.movie