using wpf/e to create interactive web charts ...

  • Article

First CTP of Windows Presentation Foundation Everywhere (WPF/E) was released last december, Joe Stegman blogged about the goals for WPF/E: ".. leverage your existing skills and web assets to create better web experiences."

Immediately the community created some really cool demos around media & content .. ( amongst my favorites are the channeld 9 video player and this video player )... 
Of course, with my enterprise/lob bias, I went a different route.. trying to solve an old, recurring pain: creating rich, interactive graphics for data viz ...  A few people have asked about this lately, so here are some my insights from a merely a day or so playing with this before the holidays..

Results:
For overall results, I do feel WPLF/E helps to create a better experience, the charts are animated, I can interact with these with out having to round trip to server, etc.... I was very happy..
[Disclaimer:I did not spend a lot of time creating full, or good looking charts, but here are some of the ones I created. I have others, like bar, leaving that for a later exercise with aspx integration].

 

If you have WPF/E installed you can see them live: pie chart  and line chart..

If you parse the results w/ a technical focus, here are my impressions:

What does WPF/E bring to this scenario that we did not have before (with HTML)?

  • WPF/E is cross-platform/crross browser    ( so improvement over VML and similar ) that I have tried)
  • WPF/E is very light weight ( 1 MB download, improvement over say Java, activex, etc)
  • WPF/E brings vector graphics, good mouse support, a few higher level primitives ( Rectangle, Line, etc.)...   Because of the flexibility of Paths, you can pretty easily draw any thing in 2D..
  • WPFE also brings a great animation engine to enhance the charts w/ feedback and interactivity..  [this is usually a hard thing to code on your own]
  • An unexpected surprise, was how much I liked the integration/interaction with Javascript..  being scriptable gives me a lot of flexibility to create stuff on the fly or serverside from ASP .NET or PHP ...  With WPF/E you have an open white-box for you to use.    

[ I am not a charting expert at all, but wrote a few in my life and I always though the rendering + the animations where the hardest part; and WPF/E stacked quite well there]

On skills reuse (or the WPF in WPF/E) :

  • I can leverage all my XAML skills for the charting..   I can also reuse XAML assets ( say gradients, vector-based drawings, animations, etc.) .. This is nice, but it does not get you to single code-base between WPF and WPF/E ..   Mike harsh, has discussed they are looking into adding more WPF features into WPF/E, amongst it CLR integration; this could increase my code reuse significantly ( guessing to 80% or higher?)...  that sounds much better, but won't get you to 100% unless you are careful and code for 'common denominator'. Today WPF/E is missing some WPF features (e.g. Styles, Resources) that you would definitely want to use if you were writing WPF, you can get around these in WPF/E by creating slightly more verbose apps,  but there is obviously a little work needed to get around it...
  • The charting scenario as I scope it is great for ASPX or PHP websites that deal with data today.  You can reuse all your back-end code and easily create server-side controls that can generate enough XAML + script to get the front-end working..    I did not go there yet, but Shawn Burke has a sample already and this is something aspx devs do all the time, so proven practice..

On performance/stability of the platform:
I must admit I did not poke into perf in depth, but so far I was impressed when I saw the shawn's video demo .. wow, these many videos playing simultaneously ... :) 
On my line chart, I had 600 points .. I did two 'cursors' an ellipse the follows the mouse on the Left hand side, and a bar on the RHS ...the mouse is quite responsive..
I am one of those persons that things for pure visualization [not analysis] you can only look at a finite number of data points, so I am pretty confident WPF/E will meet perf the web chart perf requirements; if it does not, you might want to do server-side charts, as you likely have too much data].

I was also quite pleased with the platform's stability - the error handling could be better and after this post ( this time I will try to do it soon) I can put a list of the issues I ran into (both bugs and/or featurs not yet complete that can throw you for a loop )...  but over all, for being the first CTP, I thought the platform did quite well...

Again on WPF/E..
I was chatting w/ Carter Maslan recently on WPF/E end-user benefits and I summarized it as "WPF/E, like AJAX, lowers the developer entry point to create better experiences and to reuse existing assets (e.g. video content) " .. I think with my brief charting experiment I was sold on that ...  I hope to see a few intranet/enterprise websites leveraging these new technology to improve their end-users visualization, decision making and producitivity ...   Try putting these in sidebar too ... these charts work fine there in sidebar..

PS -- apologies to all my control vendor friends who write hugely complex and professional looking charts for calling the samples above charts; it is the potential that I want to communicate, not my couple of hours of bad javascript hucking;