Previously I’ve written about how to create data charts using Silverlight. The data was coming from an static array, which is not that useful after all. Now lets see how to use data from an XML file. Bellow you can see an example of the XML file we’ll use. It is as simple as it can be, having pairs of labels and their associated value.
In your Silverlight project, if you try to open directly the XML file using something like XDocument.Load(”Data.xml”) Silverlight will try to find the file inside the XAP file. We could place the XML file inside the XAP file in order to make it work, but when we needed to update the file we would have to change the XAP file (replacing an XML file in a ZIP file)… Instead, we will use an external XML file. We must download the file using a WebClient (the download term applies: remember that Silverlight code runs in the client side, so while accessing you website resources you are accessing remote resources).
The download is asynchronous, so we need to create an event handler to be executed when the XML file download is completed. The XML file is downloaded as a string, so we need to parse it into a XDocument object, in order to manipulate it. The example bellow shows a little bit of LINQ to XML. LINQ (Language Integrated Query) allows you to query several data sources, including XML, Databases, Object collections, etc (even Amazon…). A nice tutorial about LINQ to XML can be found at Scott Guthrie’s blog.
We iterate through the data points present in the XML file and create a list of pairs containing the labels and respective values. After building the dataPoints list, the remaining code is similar to the code I’ve shown you in the Part 1 of these tutorials.
The next and final step will be to use a WCF web service to retrieve the data from an database in order to create a real dynamic chart powered by Silverlight.
Download Source Code
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.
I’ve tried out these components and I learned a lot from it. This is the first of some posts that I am writing about it. They will include topic about Silverlight 2.0, LINQ to XML/SQL, WCF.
Bellow you can see the final result that is intended. I want to display a chart with the number of employees of
AdventureWorks database per city in the United States of America.
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.
I’ve previously written that I was using Wordpress PDA Plugin in order to give mobile users a nice user experience. Today during lunch time I’ve upgraded the plugin which now has a iPhone/iPod version. (I must give a word of appreciation to the new “one click upgrade” feature in Wordpress)
It has animations in page transitions and all. Pretty cool. It still have some bugs (at least when testing it in Firefox with a fake User Agent), but it is usable. Maybe one of my readers will give me feedback from his iPhone experience navigating in this website. 
Finally available for us to use it! What can we do? No only explore but also create!
So how does Photosynth work? Photosynth analyzes your photos for similarities to your other photos in the set and then uses the information to estimate where the photos were was taken from. Photosynth then re-creates the place the photos were taken and uses that as a canvas to display your photos. Pretty neat huh? The work done in analyzing your photos is done via the above mentioned Photosynth plug-in.
Windows Vista Team Blog
While testing a project on which I’m working I accidentally went to TMN’s website (a Portuguese cellphone company) with Javascript disabled.
First of all I think that is great that they use a <noscript> tag to warn the user that the user experience quality will be decreased because Javascript is disabled. Because of this message I switched it on right away. Without this message I would probably get some strange behavior while using the website, complaint about it and then maybe I would remember that I had Javascript disabled (or just leave the website without realizing it).
Something that you can’t see in the image above is that the website look & feel doesn’t get too damaged by the absence of Javascript support which is nice too.
One thing that I didn’t like that much was the fact of this website language is Portuguese but the warning message is written in English… TMN’s clients don’t have to understand English, and I believe that many don’t. This issue seems like a “copy-paste” without message customization.
Today I was testing a website using a HTML W3C validation tool (XHTML 1.0 Transitional) and I found a problem in my links. Some URLs had the & symbol, since they linked to dynamic webpages which need parameters. The trivial solution is to replace the “&” occurrences on all links by the equivalent “&” expression. But while changing some dynamically generated URLs I found out an interesting fact about ASP.NET controls vs HTML controls that I was not aware of.
In the example bellow you can see 2 pairs of Links and Images. The first set are ASP.NET controls, the second one are HTML controls (markup) with runat attribute set to server in order to allow their manipulation by ASP.NET code.
When you look at the source code in the client side bellow you can spot a slight difference that can make your HTML validation fail. href and src attributes that originally contained the “&” and which are the result of ASP.NET controls rendering have “&” instead, but the HTML controls still have the invalid &-based URL’s.
Since I had both type of elements mixed in the website, and I was threating them in the same way I was getting different behaviors. Now I know why…
