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-

</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><UserControl</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">xmlns:Visifire_Charts="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">x:Class="Charting.MainPage"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Width="640" Height="480"></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><Grid x:Name="LayoutRoot" Background="White"></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><Visifire_Charts:Chart x:Name="salesData" Margin="101,87,142,147"/></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></Grid></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></UserControl></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 200px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">

<UserControl

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

<Grid x:Name="LayoutRoot" Background="White">

<Visifire_Charts:Chart x:Name="salesData" Margin="101,87,142,147"/>

</Grid>

</UserControl>

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:

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());

}

Related Posts:

• Silverlight Best Practices (Part 4 of 4)
• Silverlight Best Practices (Part 2 of 4)
• Silverlight Best Practices (Part 3 of 4)
• Silverlight Best Practices (Part 1 of 4)
• Creating Page Transitions in Windows Phone