Click here to Skip to main content
Click here to Skip to main content

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

, 23 Jun 2009
Rate this:
Please Sign up or sign in to vote.
Creating Silverlight Financial Chart in XAML

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.

Date Open Close High Low
06/15/2009 130 135 138 125
06/16/2009 140 143 144 136
06/17/2009 141 132 135 129
06/18/2009 135 140 144 131

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.

Project Setup

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.

CandleStick Chart

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:

CandleStick 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":

Stock Chart

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

History

  • 23rd June, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

SunilUrs

United States United States
No Biography provided

Comments and Discussions

 
GeneralVisifire Vs Silverlight Toolkit PinmemberDewey29-Jun-09 20:26 
GeneralRe: Visifire Vs Silverlight Toolkit PinmemberSunilUrs1-Jul-09 19:24 
GeneralRe: Visifire Vs Silverlight Toolkit PinmemberDewey8-Jul-09 0:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 23 Jun 2009
Article Copyright 2009 by SunilUrs
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid