Wednesday, May 21, 2008

Silverlight charts with Visifire

I recently started playing around with Silverlight in SharePoint. I took a look at the Silverlight BluePrints to start with... Oh man, what a hell to get a sample working! A lot of people were complaining about a blank webpart... and of course I had the same problem. Recompiling the Silverlight project in VS 2008 helped for me.

After trying a few examples from the BluePrints I took a look at 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.


I examined the Asp.net example and gave it a try to build a chart based on some list data.


A sample SharePoint list with some data (Year and Profit)



Based on the data from the SharePoint list I created a Silverlight Column Chart. Looking good isn't?







You can also choose other visually stunning animated charts.
eg. line charts, donuts, columns, ...






To bring this to a next level... I'm trying to embed this in a SharePoint webpart. I was thinking about the SilverLightPart "wrapper" webpart from the BluePrints to do this job. Normally, this webpart is able to wrap a .XAP file to embed your silverlight applications. But first, I'll have to create a new Silverlight application to create a .XAP file (The above example is just an aspx page) . I am working on this...

It all looks well, but still in its infancy! :)

5 comments:

Sunil Urs said...

Nice example! It would be great if you can make the source code available.

Somnath said...

Hummm....cool

WellAndDowed said...

This looks nice! Have you had any luck with the web part?

Anonymous said...

Looks totally like FusionCharts - http://www.fusioncharts.com

Disha said...

Hello Som

I will be thankful if you share your code. I am newbie in programming. I am using MOSS. I have list, in this list there are two fields state and severity (High/Low/Medium). I want to display bar diagram where AxisY will be the seviry and AxixX wil be the state.

I tried this article, but no luck http://www.wssdemo.com/Pages/graph.aspx.

I will be thankful if someone guide step by step.

Disha