Charting with Visifire and Silverlight

Charts and related statistical diagrams make any report more informative and attractive. Charts also play keyrole in decision making system. They also helps to visualize the trends and make an effective decision.

Recently I was searching for some charting API for one of my J2EE based web project. After searching, I found “Visifier” technology which is based on Microsoft Silverlight. Before choosing any new technology , one questions that comes to mind is “Why should I choose this over any other?”. Here are few advantages that made me to choose this technology

  • Easy to integrate with any system regardless of server side technology. This is because it uses javascript and Silverlight plugin in the browser to render the chart or graph.
  • AS the drawing of chart will be done on client side , there is no need to create an image on the serverside and transfer it. It makes the response to be lighter.
  • It has an in-built event handling to handle the events geberated while clicking on the chart.
  • It can generate attractive 2D as well as 3D charts. To increase the rich user experience one can use the special effects that it provides to the developers.
  • The data can be supplied through an XML document , which is easy to work with any system on the backend.
  • When user changes the preferences in the look and feel with out modifying the data ,there is no need to make a new request to server. We can handle such things on the client side as it was generated using javascript.

Visifire in action

Now lets see how we can create a small sample chart using Visifier. This(?) sample chart shows number of times I had coffee in last 5 days. I can represent this in bar chart.

Step 1: Prepare the data

For this we need to prepare the XML format of data first ,which looks like as follows

XML data for drawing graph

XML data for drawing graph

In the first line we have defined the namespaces and theme we are going to use. Other lines are self explainatory.

Step 2 : Include necessary resources

Visifire charting uses Javascript to render the data into a graphic. We can control the parameters of graphic using different settings that can be done either by changing XML or javascript or both. To use Visifire we should include the following resource.


Another resource is visifier.xap file. This is being used by javascript.

Step 3 : Create a sample html file

First crate a div to show the chart.

HTML Div which contains graph

HTML Div which contains graph

Now we need to configure the graph to show on the page . For this we need to have following script on the page

javascript to generate the graph

javascript to generate the graph

Step 4 : Previewing the sample chart in browser

Open the sample html file you have created (or attached one) in a browser. If it is the first time you are accessing a silverlight application the browser will prompt to download this plugin (just like prompting for flash or java plugin when not existing on your browser). Once it gets installed you should see a graph like this.
Chart created using visifire

But the story doesn’t end here. Nothing in the world is perfect . So as visifire. It has got some serious problems to qualify as an enterprise solution for charting. Once such thing is , you can’t print these charts. Actually its problem with Silverlight technology on which visifire works. As silverlight is Microsoft technology we can expect a solution for this problem soon.

Please let me know if you have some other better solutions for charting which is effective and easier to configure. You can find a sample html page with some sample charts and settings on visifire official site.If you want to learn more about this technology you can visit visifire’s official site.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s