Follow Me on Instagram Subscribe via RSS Feed

12th Day of Silverlight: PivotViewer

January 15, 2012

This has been the longest series that I have done and I’ve really had a lot of fun doing it.  If you have missed any of them, you can catch the whole series here: 12 Days of Silverlight.  It’s really nice to see the level of interest in Silverlight 5.  Make sure to drop me a note if you have anything specific you would like to see more about.  I’m always looking for more topics to write about.  So, for the grand finale…

On the twelfth day of Silverlight the team delivered to me… PivotViewer.

Anyone who knows me, knows I have a special interest in the PivotViewer.  Simply poking around this blog should show you that.  I’ve given talks across the country on the subject, I’ve blogged about it, and I’ve even tried to write a book on the subject (although I couldn’t find a publisher to pick it up).  Why the interest?  Because I think it is an amazing example of data visualization. 

image

History of PivotViewer

PivotViewer got it’s start in the Live Labs team.  It original appeared as a WPF application called Pivot.  Although no longer supported, you can still download the original application on Microsoft’s Research page.

The first version of PivotViewer was release in 2010 and worked with Silverlight 4.  While containing most of the features you have in the latest version, it’s data was largely static in nature.  It utilized a XML format, CXML, and mapped data items to members of a DeepZoom collection (which was also written by the Live Labs team).  While useful in certain use cases, it’s limited API and static image nature kept the control from being used in many scenarios.

Even with these limitations, the PivotViewer was well received and in time the team moved to the Silverlight team and PivotViewer became an official Silverlight control.  With a major revamp the new PivotViewer came packed with a lot of new goodies.  While still supporting CXML, you can now create client side collections and generate your visuals dynamically with XAML data templates.  The API has been expanded and you now have a lot more control over appearance and behavior.

While still not perfect, it has come a long way and can now be used in a lot of scenarios that it previously couldn’t.

Anatomy of PivotViewer

The first two things you need is data and visualizations (hey, maybe that’s where data visualizations came from <grin>).  The new PivotViewer gives you several ways to accomplish this.  Once you populate PivotViewer with both of these, your screen will load and you will see 3 distinct areas.

image

The main area is the collection container.  It is the heart of the control.  You are able to zoom in and out, pan and scroll with the mouse, etc.  The collection container has two different views: grid view and histogram view.  The grid view lays out your items in a nice grid based on the selected sorting property.  The histogram view will group the items (based on the sorting property) and show them in more of a bar chart.  This gives the user a powerful visualization of comparing counts based on a selected property.  A nice bonus is if you double click a histogram column, it will drill down into that column to give you a finer resolution of the data within.

Above the collection container you have the control bar.  It contains items such as a zoom bar, the sorting property selector, and the ability to switch between grid and histogram view.

To the left you will find the filter panel.  The nicest thing about the filter panel is that it is generated for you.  Each property you define in your data objects is displayed here.  It automatically generates data ranges, value selections, etc.  Adjusting the filter conditions will instantly adjust the items included in the collection container.  Not bad functionality for free.

image

If you select an item you will see an additional panel displayed on the right, the detail pane.  This contains the specifics about the selected item.  While having a built in view, the new PivotViewer also allows you to create a custom detail pane and I show you a walk through here : Creating a Custom DetailPaneStyle.

By far the best addition to PivotViewer in SL5 is the dynamic nature of it.  If you make any changes to the data items within the application, the changes are instantly reflected in the information and visualization of the object within the PivotViewer.  This creates a lot of use cases where PivotViewer would be a great fit.

Developing with PivotViewer

So I’m going to take the easy way out here and we are not going to run thru a PivotViewer example in this post.  The reason is I have another series on doing just that.  If you want to get your feet wet with the new PivotViewer take a look at my PivotViewer Basics series.

I do want to make a quick shout out here.  Chris Arnold has two great products out there that include PivotViewer: PhotoPivot and Percollate. If you want to see some of the exciting ways you can use PivotViewer in your applications, I highly recommend checking both of those out.

The End of a Series…

As I said at the beginning of this post, this has been a great series to write.  I think the Silverlight 5 release goes a long ways in the right direction.  There are a lot of additional features that this series did not touch on and I would encourage you to go explore them.  You can find out all about the new release on Silverlight.net.

I will wrap up this series by stealing a phrase from a good friend of mine (who will probably exclude this post from his site because of it <grin>).

.. stay in the ‘light ..

Series Navigation<< 11th Day of Silverlight : 3D

Leave a Reply