How to Add Visually Stunning Financial Charts in Silverlight Applications – Part 1

• Download source - 643.54 KB

Introduction

One of the primary applications of any RIA platform is in creating visually rich and interactive Dashboards with Charts and Gauges. Here is a walkthrough on how you can create and embed Visually Stunning Financial Charts within your Silverlight Application. Though Silverlight doesn't have a native Chart Control, there are several Charting components available including Microsoft's own Silverlight Toolkit, Visifire Charts, etc.

This is Part 1 of a series of articles in which I am going to show you how to add a basic to advanced financial chart in your Silverlight Applications. In this series, I am using Visifire Chart (2.2.3 beta 3) control which is open source and supports around 18 Chart Types including Financial Charts. Silverlight Toolkit doesn't have Financial Charts yet.

Background

Stock Charts and CandleStick Charts are most commonly used for showing the range of price movement over a given time interval. Both of them require 4 parameters on the dependent Axis (Y Axis). Namely, Open, Close, High and Low. Independent Axis (X Axis) usually represents Date and/or Time. Here is a sample data.

Below I'll show you how simple it is to transform similar data to create CandleStick Chart.

Project Setup

To start with, I have created a basic Silverlight Application project in Visual Studio called "Silverlight Financial Charts" and added a reference to Visifire Controls Library SLVisifire.Charts.dll. I am using Visifire 2.2.3 beta 3. You can download the latest from here.

Now open page.xaml file, and add namespace for Visifire Charts and also change the Width of UserControl to 500.

<UserControl x:Class="SilverlightFinancialCharts.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
    Width="500" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">       
    </Grid>
</UserControl>

Any basic Visifire Chart has the following XML structure:

<vc:Chart>
    <vc:Chart.Series>
        <vc:DataSeries>
            <vc:DataSeries.DataPoints>     
            </vc:DataSeries.DataPoints>    
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

Adding DataPoints

For comparison, a DataSeries represents one Table of Data similar to that shown before and a DataPoint represents one row. Here we use AxisXLabel for adding Date Values and YValues property for adding Open, Close, High, Low values in order. Below is how it looks once I add the data.

<vc:Chart Theme="Theme3">
    <vc:Chart.Series>
        <vc:DataSeries RenderAs="CandleStick">
            <vc:DataSeries.DataPoints>
                <vc:DataPoint AxisXLabel="Jan 1" YValues="25,20,32,16"/>
                <vc:DataPoint AxisXLabel="Jan 2" YValues="26,40,42,18"/>
                <vc:DataPoint AxisXLabel="Jan 3" YValues="50,40,54,38"/>
                <vc:DataPoint AxisXLabel="Jan 4" YValues="30,38,40,20"/>
                <vc:DataPoint AxisXLabel="Jan 5" YValues="20,10,30,5"/>
                <vc:DataPoint AxisXLabel="Jan 6" YValues="20,33,40,30"/>
                <vc:DataPoint AxisXLabel="Jan 7" YValues="26,16,30,10"/>
                <vc:DataPoint AxisXLabel="Jan 8" YValues="20,40,50,10"/>
                <vc:DataPoint AxisXLabel="Jan 10" YValues="28,18,40,12"/>
                <vc:DataPoint AxisXLabel="Jan 11" YValues="36,30,44,28"/>
                <vc:DataPoint AxisXLabel="Jan 12" YValues="20,34,40,18"/>
                <vc:DataPoint AxisXLabel="Jan 13" YValues="25,30,36,22"/>
                <vc:DataPoint AxisXLabel="Jan 14" YValues="30,18,33,10"/>
                <vc:DataPoint AxisXLabel="Jan 15" YValues="48,38,51,30"/>
                <vc:DataPoint AxisXLabel="Jan 16" YValues="50,60,62,48"/>
                <vc:DataPoint AxisXLabel="Jan 17" YValues="40,50,52,36"/>
                <vc:DataPoint AxisXLabel="Jan 18" YValues="20,40,44,16"/>
                <vc:DataPoint AxisXLabel="Jan 19" YValues="25,35,38,20"/>
                <vc:DataPoint AxisXLabel="Jan 20" YValues="28,18,34,12"/>
            </vc:DataSeries.DataPoints>
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

Now we have the basic XML required to create a CandleStick Chart. Below is how it looks once we run the application. CandleSticks in green indicate increase in price and the ones in red indicate decrease in price. You can change the color through PriceUpColor and PriceDownColor properties of Dataseries.

Now that we have a basic CandleStick Chart, we shall add a Title to the Chart and “$” prefix to Values on Y Axis. Add the XML below just under the Chart:

<vc:Chart.Titles>
    <vc:Title Text="Silverlight Financial Chart"/>
</vc:Chart.Titles>
<vc:Chart.AxesY>
    <vc:Axis Prefix="$"/>
</vc:Chart.AxesY>

Here is the final chart:

Now if you want to change the Chart Type to Stock Chart, you just need to change the RenderAs Property to "Stock". Below is how it looks when I change RenderAs to "Stock":

In the upcoming articles, I'll show you how you can create more advanced Financial Charts.

History

• 23^rd June, 2009: Initial post