Bruno Silva

Recently someone told me about a data visualization component library powered by Microsoft Silverlight.

What is Visifire?

Visifire is a set of open source data visualization components - powered by Microsoft^® Silverlight^™. With Visifire you can create and embed visually stunning animated Silverlight Charts within minutes. Visifire is easy to use and independent of the server side technology. It can be used with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails or just simple HTML. Don’t take our word for it! Visit Visifire Gallery or design your own chart using Chart Designer.

But this first post will not yet use a database as a source of data. First I’ll take care of the user interface. Well, I will not do designer work, I’ll just setup a sample chart. First of all you have to download the Visifire Charts Package and unpack it wherever you like. Then, create a new Silverlight 2.0 project in Visual Studio 2008. You will need the Silverlight Tools Beta 2 for Visual Studio 2008. If you’re new to Silverlight 2.0 check out this nice Hello World tutorial from Scott Guthrie.

After creating your new project add the references to the dll files that you have previously downloaded from Visifire.

Now it’s coding time! The source code bellow can be put in the Page.xaml.cs file inside the class constructor.

It creates a chart, creates a DataSeries, and adds DataPoints to it. After the setup is done the chart is appended to the Silverlight canvas. A DataPoint has 2 important properties: the YValue (the number of employees) and the AxisLabel (name of the city).

What are DataSeries? They are groups of DataPoints. In a simple columns chart having one is enough, because each DataPoint will represente a column. But if you want, for instance, to compare the number of employees per city in the last 3 years you will have 3 DataSeries, one for each year. This way, for each city in the Axis you will have 3 columns. The example bellow is illustrative. It has 2 DataSeries, one for 2007 and another one for 2006.

Next time I’ll show how to populate the chart using an XML file as a data source. Meanwhile you can see the different kinds of charts you can generate in the Visifire Chart Gallery and mess around with the source code of this first part.