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]