Sunil Urs

With Visifire you can create nice looking Silverlight chart within minutes. Let me explain you in simple steps.

First of all you require Silverlight 2.0 installed on your system. You can download it from here.

Download and extract the contents of Visifire Charts package into a directory in your SERVER. You can download it from here. Visifire is Open Source and free.

Visifire requires the data in the form of XML. XML for creating chart is simple and intuitive. Minimum basic XML required looks like below

<vc:Chart xmlns:vc=”clr-namespace:Visifire.Charts;assembly=Visifire.Charts”>

</vc:Chart>

The above tag corresponds to a chart element. But there is not data to plot. For now you need not worry about “vc:”. Just remember that you need to add “vc:” to each element.

Now let me add some data into the chart. First I’ll create a Column Chart showing Sales details for a fictitious company, for the first four months….

Then I’ll show you how easy it is to switch to other chart types just by changing One Word!

<vc:DataSeries RenderAs=”Column”>
    <vc:DataPoint AxisLabel=”Jan” YValue=”160021″/>
    <vc:DataPoint AxisLabel=”Feb” YValue=”207223″/>
    <vc:DataPoint AxisLabel=”Mar” YValue=”225542″/>
    <vc:DataPoint AxisLabel=”Apr” YValue=”248827″/>
    <vc:DataPoint AxisLabel=”May” YValue=”273432″/>
</vc:DataSeries>

Above is the Revenue details for my company. Each value that you are required to enter is a DataPoint and a set of similar DataPoint represents a DataSeries.

Now I require a Title for Chart. So I will create a Title tag.

<vc:Title Text=”Company Revenue Details”/>

And finally a Title for the AxisY.

<vc:AxisY Title=”Revenue” Prefix=”$”>

So now I have all the data ready to create my chart. So the next thing is to put all the data in one place. So here is the final XML code.

<vc:Chart xmlns:vc=”clr-namespace:Visifire.Charts;assembly=Visifire.Charts”>
    <vc:Title Text=”Company Revenue Details”/>
    <vc:AxisY Title=”Revenue” Prefix=”$”>
    </vc:AxisY>
    <vc:DataSeries RenderAs=”Column”>
        <vc:DataPoint AxisLabel=”Jan” YValue=”160021″/>
        <vc:DataPoint AxisLabel=”Feb” YValue=”207223″/>
        <vc:DataPoint AxisLabel=”Mar” YValue=”225542″/>
        <vc:DataPoint AxisLabel=”Apr” YValue=”248827″/>
        <vc:DataPoint AxisLabel=”May” YValue=”273432″/>
    </vc:DataSeries>
</vc:Chart>

I’ll save the above XML into a file and call it as “data.xml”. Now you just have to reference this XML file from within the HTML page to get a chart. So you need to add these lines of code into your HTML page. make sure you have extracted Visifire.js and Visifire.xap in the same directory as the HTML page.

<script type=“text/javascript” src=“Visifire.js”></script>
<div id=“VisifireChart”>
    <script language=“javascript” type=“text/javascript”>
        var vChart = new Visifire(“Visifire.xap”,500,300); // Visifire path, width, height
        vChart.setDataUri(“data.xml”);//xml file path
        vChart.render(“VisifireChart”);// DOM element in which chart is to be rendered.
    </script>
</div>

And you are done. This is how the chart looks.

Visifire Charts Live Demo

Now you can change the RenderAs attribute in the DataSeries to Doughnut, Bar, Pie, Area and see the chart type change.

Also change the looks of the Chart by adding an attribute “Theme=Theme3″ to the Chart element.

In the next session I’ll be writing about some more cool features of Visifire.

Open Source Silverlight Charts, Visifire 1.0 Beta has been released. It has been released under GPL. With Visifire, you can create and embed charts in your web pages within minutes. You need not have any Silverlight knowledge to use these charts.  The input is XML containing data and the API is JavaScript.  So if you just know a bit of HTML and JavaScript, it is enough.

We started working on this project when Silverlight 1.1 Alpha got released. So most of the code in this project uses Silverlight 1.1 features. But soon we are going to refactor the code to make the best use of Silverlight 2.0 features.

Currently Visifire features 14 types of charts including Column, Bar, Pie, Area, Stacked, Doughnut, etc. Soon we’ll be coming up with more varieties. You can see all available charts in the Chart Gallery.

Looks are good and it comes with 3 built in themes and a variety of ColorSets.  You can get a quick understanding of some of the best features through the Chart Designer. Though Chart Designer does not feature all the possibilities of Visifire, it can help you in creating the charts very quickly. Once you design the chart, you can get the required XML data for your chart. Chart designer also gives you the embedding script. So not much HTML knowledge is required.

Here is a video showcasing the charts available in the gallery.

Soon I’ll be writing more on this explaining many of the features , tips and tricks with Visifire.

Here are a few changes that you need to do to port Silverlight 1.1 project to Silverlight 2.0.

After 3 days of hustle with my previous code and thousands of errors in that, finally I was able to port my Silverlight 1.1 project to Silverlight 2.0. But still it doesn’t use all the cool features provided by Silverlight 2.0 like Grids and all. But I hope to refractor my code soon for better performance by using Silverlight’s native controls rather than my own. While porting the code, few of the things I had to change again and again as I had used them heavily. So here I’ve mentioned a few of them and hope it’ll be useful for you guys.

This is by no way an exhaustive list, but it may help you to quickly change some of the commonly used code and get it running on Silverlight 2.0 and Visual Studio 2008.

1. As I mentioned in my previous article, you need to edit your previous project file.
2. Change HtmlTimer To System.Windows.Threading.DispatcherTimer
3. HtmlPage.Navigate(link) To HtmlPage.Window.Navigate(new Uri(link))
4. You can directly use Static function HtmlPage.Document.GetElementsByTagName to get DOM elements.
5. You can directly use HtmlPage.Document.CreateElement("Div") to create DOM elements
6. XamlReader requires xmlns unlike Silverlight 1.1. XamlReader.Load(“<Canvas/>”); To XamlReader.Load("<Canvas xmlns="http://schemas.microsoft.com/client/2007"/>");
7. FontWeights enumeration has been changed to a static class FontWeight.
8. Change System.Windows.Media.Color.FromRgb(118, 118, 118) To System.Windows.Media.Color.FromARgb(255,118, 118, 118)
9. this.MouseLeave += delegate(object sender, EventArgs e) To this.MouseLeave += delegate(object sender, MouseEventArgs e)
10. this.MouseLeftButtonUp += delegate(object sender, MouseEventArgs e) To this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
11. In MouseEventHandlers, e.ctrl To ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control)
12. ActualWidth of Silverlight Control

    System.Windows.Interop.BrowserHost.ActualWidth; To

    System.Windows.Interop.SilverlightHost silverlightHost = new System.Windows.Interop.SilverlightHost();

    width = silverlightHost.Content.ActualWidth

13. In Silverlight 2.0, Managed Downloader has been removed.So you’ll have to use WebClient.

For a complete list, visit http://msdn2.microsoft.com/en-us/library/cc189007(vs.95).aspx

I was eagerly awaiting for Silverlight 2.0 Beta and it did arrive. But there are a lot of breaking changes in this version as I expected. MSDN contains a list of breaking changes at http://msdn2.microsoft.com/en-us/library/cc189007(vs.95).aspx

While trying to open the project in VS 2008, you will get an error:

The imported project
“C:\Program Files\MSBuild\Microsoft\VisualStudio\v9.0\Silverlight\
Microsoft.Silverlight.CSharp.targets (or VisualBasic.targets)” was not found.

and you won’t be able to open the project. Click OK and let it load the solution.

In the Solution Explorer you should see the project listed but unavailable. Right click on it and choose the Edit option. The project’s MSBuild file will open. Now replace

<Import Project=“$(MSBuildExtensionsPath)\Microsoft\
VisualStudio\v9.0\Silverlight\Microsoft.Silverlight.Csharp.targets” />

With

<Import Project=“$(MSBuildExtensionsPath)\Microsoft\
Silverlight\v2.0\Microsoft.Silverlight.CSharp.targets” />

Now you can reload the project after saving.Now you need to update the reference dlls with the new ones. So delete all the Silverlight 1.1 dlls referenced in the project and add the following new ones

1. mscorelib.dll
2. system.dll
3. System.Core.dll
4. System.Windows.dll
5. System.Windows.Browser.dll
6. System.Xml.dll
7. System.Windows.Controls.dll
8. system.windows.controls.extended.dll

Now you may have to fix other code related error. I’ll write about the soon…