Visifire Charting in Silverlight

Visifire is one of my favourite charting tools in Silverlight. I love playing with it in my free-time at home on my Windows 2003 server machine :)

This post displays a typical example of Visifire, where we would compare sales of 2 companies KimCompany and TimCompany on a Bar chart.  Of course, the data would be self-generated.

First, download the latest version of Visifire charts from www.visifire.com

Second, right click your project in Blend 3, add a reference to SLVisifire.Charts.dll [version: 2.2.5.0]

Third, drag and drop it on your XAML designer or type the following in XAML Pad-

[sourcecode language='xml']

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:Visifire_Charts="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

x:Class="Charting.MainPage"

Width="640" Height="480">

[/sourcecode]

[sourcecode language='xml']

[/sourcecode]

Now, this adds a chart control to your page. Now let us bind the data to this chart.

Basics first: A chart contains several DataSeries (read: different sets of similar data) - here sales data for 2 companies. Each DataSeries has several DataPoints, each of which has a X and Y value.

Here goes the code:

[sourcecode language='csharp']

private void PopulateChartData()

{

// Kim Sales

DataSeries KimCompanySales = new DataSeries();

DataPoint dataPoint;

// A seperate series for Kim Sales has been assigned, whose legend is KimCompany

KimCompanySales.LegendText = "KimCompany";

KimCompanySales.RenderAs = RenderAs.Bar;

// This is the logic to generate data for sales of Kim Company

for (int i=1; i <= 5; i++)

{

dataPoint = new DataPoint();

// You can save any custom unique data for each data point, here I am saving i

dataPoint.Tag = i;

// If any data point (read: Sales) of Kim Company is clicked, then raise an event.

dataPoint.MouseLeftButtonDown

+=new System.Windows.Input.MouseButtonEventHandler

(KimCompanydataPoint_MouseLeftButtonDown);

dataPoint.XValue = i;

dataPoint.YValue = i*5;

KimCompanySales.DataPoints.Add(dataPoint);

}

// TimCompany sales

DataSeries TimCompanySales = new DataSeries();

TimCompanySales.LegendText = "TimCompany";

TimCompanySales.RenderAs = RenderAs.Bar;

for (int i=1; i <= 5; i++)

{

dataPoint = new DataPoint();

dataPoint.Tag = i;

// By re-raising event here, we ensure that events for Tim and Kim Companies are different

dataPoint.MouseLeftButtonDown

+=new System.Windows.Input.MouseButtonEventHandler

(TimCompanydataPoint_MouseLeftButtonDown);

dataPoint.XValue = i;

dataPoint.YValue = i*4;

TimCompanySales.DataPoints.Add(dataPoint);

}

salesData.Series.Add(KimCompanySales);

salesData.Series.Add(TimCompanySales);

}

// When data for KimCompany is selected, this event is fired. You can implement custom code here

private void KimCompanydataPoint_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

DataPoint selectedDataPoint = (DataPoint)sender;

// I am using the Tag property to uniquely identify the data point/sales.

MessageBox.Show("Kim Company :" + selectedDataPoint.Tag.ToString());

}

// This event is only fired, when data point corresponding to TimCompany is clicked.

private void TimCompanydataPoint_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

DataPoint selectedDataPoint = (DataPoint)sender;

MessageBox.Show("Tim Company :" + selectedDataPoint.Tag.ToString());

}

[/sourcecode]