Addressing the elephant in the room: The HTML5 PivotViewer

I’ve been working with the Silverlight PivotViewer control for quite a while now, and if you read this blog you’ll also know that I’ve had some success in customising it. Now don’t get me wrong, it’s a fantastic control, I love they way it allows you to quickly visualise relationships between items, but for a while now the elephant in the room has been lack of support for the iPad and like devices.

Now I’m not going to go into a rant on Silverlight as a technology, it’s future and what I think of the iPad or anything else – to be honest it’s a boring discussion. What I’m interested in is providing the best user experience that clearly presents the data in a way that users can make the most of. By creating applications that are based on web standards then I don’t have to worry about it. In fact recently Microsoft’s Internet Explorer team and Zeptolab partnered up to produce an excellent example of how well HTML5 games perform extremely well by creating a version of Cut the Rope – check it out at http://www.cuttherope.ie/.

So before I got any further I encourage you to check out the latest version of a project that I’ve been working on: the HTML5 PivotViewer. I’m calling this a beta and while functionally it’s incomplete compared to the Silverlight version, it easily demonstrates that modern browsers have the power to process and render data at near native speeds.

So while the HTML5 PivotViewer control is functionally incomplete, there is no trickery involved, as it is in fact reading a CXML file (the XML schema that the PivotViewer control consumes) and is rendering images from a DeepZoom collection (at this point in time I’m only displaying images at level 6 which is why they are a bit blurry).

As with any serious JavaScript development these days I’ve leaned heavily on the fantastic jQuery library – in fact the control has been built as a jQuery plugin which means creating an instance of the control is remakable simple:

<div id="pivotviewer" style="height:600px;"></div>
<script type="text/javascript">
	var debug = false;
	$(document).ready(function () {
		$('#pivotviewer').PivotViewer({ CXML: "/Collections/PASS Summit 2011.cxml" });
	});
</script>

If you’re not familiar with jQuery (or JavaScript), the key parameter to take note of here is calling the PivotViewer() function and setting the CXML property to the  location of the Pivot collection – and that’s all there is to it!

This project started out as a proof of concept to see if it could actually be done, and I’ve been continually surprised that not only can it be done, but that it performs extremely well – even on relatively low powered devices (like my ancient LG GW620).

So what’s next? I’ve got a whole heap of functionality that I’m going to be adding, including the Data and Map views that I’ve previously added to the Silverlight version of the control.

Let me know what you think, I’m open to suggestions on what features you’ve been missing in PivotViewer.

42 Responses to “Addressing the elephant in the room: The HTML5 PivotViewer”


  1. 1 Rui Marinho February 2, 2012 at 11:44 am

    Hey Roger .. really nice work .. i m really happy to see pivot or something like it running on my ipad… :)

    Yeah Pivot Sl is awesome, but in the new version i was hopping to get a better performance ,but xaml collections perform very bad..
    how about large collections with this prototype in html5?!

    Features i will say that having a way to plugin difrent providers would be a good startfor examplea cjson provider :)

    Best Regards and if you want share some thoughts ping me.
    Rui Marinho

    • 2 Roger February 2, 2012 at 11:52 am

      Hi Rui, Thanks!
      I’ve tried the HTML5 version on a collection of about 5000 items and it still performs well (but haven’t tested it on an iPad).
      Having JSON as a data source and the ability to provide a template for the tiles is already on the list of features I’m currently working through, but at the moment I’m focusing on the core functionality.
      The views are already using a plug-in architecture with the goal of being able to pass in additional views via the constructor – again this is not yet fully implemented.

      Roger

  2. 3 Michael C. Neel February 3, 2012 at 12:41 am

    I have yet to dive into the PivotViewer in SL5 and had to abandoned some of my public pivots as I moved the sites to Azure and the DZC tools are not Azure friendly.

    Having an iPad version is the killer feature, by far this comes up the most when I show the control to users. Are you posting the code for this as an open source project somewhere?

    I would also say json support would be good, and maybe rethinking some of the structure. I would like to send down an image array with size data to get the deep zoom functionality working in HTML5.

    I couldn’t click to zoom to an item or mousewheel zoom – i saw you had the jquery plugin, so maybe this is part of the whats coming stuff. Overall very impressive!

    • 4 Roger February 3, 2012 at 7:46 am

      Hi Michael,
      I’m actually working with a client at the moment that has a completely cloud based pivot, including collection generation – I’ll have to remember to write a post on that.
      As you’ve noticed, the moment the Deep Zoom functionality is very limited, which includes any kind of zoom. It’s something I’ve been putting off until I get all the interface functionality sorted out.

  3. 5 Sagi February 5, 2012 at 2:42 pm

    Very Impressive !
    While developing in SL5 pivot viewer I’ve been waiting for the HTML5 version.
    ZOOM ZOOM & ZOOM !!
    The Zoom functionality is very significant for this contol.
    Waiting for seeing this feature soon…

    Thx
    Sagi Karni

  4. 7 saurabh February 10, 2012 at 4:08 pm

    This is amazing!!!

  5. 8 dave February 12, 2012 at 8:10 pm

    hi Roger,

    like it works great on my ipad. Are you posting the code somewhere ?

    Dave

  6. 9 serban February 14, 2012 at 9:32 am

    Hi Roger,
    Your deep zoom functionality could function really well with SVGs instead of bitmaps…SVGs are perfect to scale up or down, with no loss, and because they are text behind the scenes, one would think they can be generated dynamically. The only issue I see with SVGs is that their elements are becoming part of the DOM as they are parsed onto the screen, so the DOM as a whole might get too big. But then again, that might be an advantage, the theory needs to be tested first.
    One of the issues I always saw with the pivot viewer, Silverlight or not, is that it has pictures at the center of the presentation. What if those tiles are just tiles (text and/or image), a la Windows 8 or Win Phone?

    Again, awesome work, buddy!

    PS. Is your js file free to use?

    • 10 Roger February 14, 2012 at 3:50 pm

      Hi Serban,
      The main reason why I didn’t was because DeepZoom collections are very much image based. I was also unsure how well DOM manipulation would perform for 1000+ items (my goal is to support collections of up to 5000 items). However I’m planning on using SVG for some areas of the interface, but for now I just want to get v1 PivotViewer functionality worked out.
      Cheers.

      • 11 serban February 15, 2012 at 9:55 am

        Roger,
        5000 is a nice goal…it should fit the needs for most of us…
        I read more about how the tiles are handled in the silverlight version of the pivotviewer…I saw Msft demo-ed already a version of it with the tiles as xaml entities, which goes toward what I was telling you earlier…
        One idea for you to get more items served by the static cxml behind the pivotviewer is to make the details available on the right side as a result of a dynamic http call. That way, you don’t have to include that heavy info in the static cxml.
        If you consider that each tile is uniquely identified with a tile_id key, the url that handles the detail should be something like http://detail_url/tiles/tile_id, a simple concatenation from your constructor url and the clickable tile_id. That’s very easy to implement in today’s world with RESTful web services, produced automatically by IDEs, just by pointing to a database (Netbeans does that with a wizard, in seconds).

        Later,
        s.

        • 12 Roger February 15, 2012 at 10:42 am

          Agreed, there are lots of areas like that where the cxml/DeepZoom schema can be improved – as you say reducing the size of the CXML by splitting off the details would save a lot of time and perform better. As the Silverlight PivotViewer control is essentially two technologies combined I can only assume that some performance sacrifices were made to preserve the DeepZoom architecture – something that the HTML5 version is not bound to.
          I’m still planning on reproducing v1 functionality based on static cxml and DeepZoom so that the Silverlight control can be simply swapped out with the HTML5 one – but future versions will hopefully take better advantage of web services and dynamic collections.
          Thanks
          Roger

  7. 13 Eduardo February 24, 2012 at 7:40 am

    It’s fantastic! Can we use it in our projects?

    Looks very feature complete for my needs. I don’t care about zoom, it the visualization and filtering what’s important.

  8. 14 Eduardo February 24, 2012 at 8:56 am

    Since you are not implementing the DeepZoom features, wouldn’t be easier if we can reference the image directly in the cxml?
    This will avoid a large chunk of work implementing the collections at runtime

  9. 15 Stuart February 24, 2012 at 9:45 pm

    Thanks for putting this together. I did see a previous HTML/jQuery version from a South African team, and I love the direction this is heading.

    Is there a plan to license this in any way? Either as open or closed source, or as free or as a paid license?

    Thanks again – looking forward to using this one day!

    Stuart

  10. 16 2style March 4, 2012 at 8:48 pm

    Hi Roger,

    this is very nice, impressive and full of potential !
    Works fine on iPad. As Mickael said, I am thinking also it could be a killer feature.

    I stay tune on your project.

    Thanks again

  11. 17 Simon March 6, 2012 at 3:51 pm

    Hi Roger,

    That’s awesome. Works consistently across all devices and browsers I’ve tried so far (iPad, Samsung Galaxy S2, Desktop, Chrome, Firefox, IE etc.)

    Can’t wait for the next installment :-)

    Cheers,
    Simon.

  12. 18 Deepali March 30, 2012 at 2:14 pm

    Hi Roger,

    This is great. Can you please share the sample code for this?

    Thanks.

  13. 19 Jason April 4, 2012 at 3:09 am

    Have you thought about putting it on github and getting some help?

  14. 20 bystander April 4, 2012 at 3:39 am

    Extremely interesting, although the UX has to be polished on many aspects there’s already a lot of impressive work!

    I have a lot of interest in this control, do you have a git or something? On github you can easily share code, accept contributions, track bugs, and so on…

    BTW here’s a tip: do you know the Crossfilter JS library by Mike Bostock? Basically it can do all the filtering, slicing, item count for each filter category, histograms for you. And it’s extremely fast, it easily handles 1M+ records.

  15. 22 bystander April 5, 2012 at 12:59 am

    Here are some details that bother me (tested on IE9). This is not to criticize your awesome work, but rather because I’d love if it could get some extra polish and I could use it in my own project :)

    - Padding at top of view is inconsistent with padding at bottom.

    - cards don’t reflow if you resize the window.

    - mousewheel zoom is not exactly centered at mouse position, which is extremely annoying.

    - when a new resolution is loaded images “pop” into view, which is ditracting. Cross-fading is more subtle.

    - filters scrollbar and contents overflow the frame at the bottom slightly.

    - The blue background that appears when you hover a filter value sometimes appears on the right of the quantity number. It happens with “Regular Session” in “Category” (seems to happen for all quantites >= 100).

    - Inside a filter group, the “Sort” blue box overlapps the group header (noticeable when you click on the group header because the dotted focus box is behind the sort box).

    - When you click on a filter group, during the transition its content scrollbar is invisible and then “pops” into place at the end of the transition, which is distracting.

    - Again during a filter group transition, sometimes quantities seem to flicker / disappear.

    - Textbox above filters has a bigger right margin.

    - Although there’s plenty of room, the “order by” / “group by” dropdown doesn’t expand — or is simply too small – when some values are selected, e.g. “Evaluation URL”.

    - I would love if you could get rid of the jQuery.UI dependency.

    - mousewheel zooming is a bit hard, lacks easing. Panning with the mouse feels hard as well, lacks inertia.

    - when going from card to card by clicking, easing-out could be more aggressive.

    Of course I’m not reporting the missing/unimplemented features, I’m sure you know them already.

    • 23 Roger April 5, 2012 at 7:06 am

      Wow, thanks! I did know about most of those, but I hadn’t actually written them down anywhere.
      Zoom is one of the features I need to rewrite, at the moment I’m working it out by using ratio’s which means it doesn’t zoom in to the right point – as you’ve found. An earlier version did have some easing when zooming, but I turned it off when working on the pinch zoom – I’ll turn it back on for mousewheel only.
      JQuery.UI allowed me to quickly get something working, but I’d love to get rid of it. I’m expecting to have to roll my own accordion, but I’m also planning on changing the whole look and feel of the facet panel as it’s not right for mobile devices.
      Cheers.

  16. 24 Peter Krantz April 8, 2012 at 12:58 am

    This looks really nice. Any plans on releasing the source code under an open license?

  17. 25 Graeme April 10, 2012 at 1:20 am

    Looks awesome – nice work

  18. 26 Jeroen van der Heijden April 15, 2012 at 4:00 pm

    Looks great; we are working on pivots to visualize HR data as part of our SaaS portfolio for HR and payroll. Done some experimenting in SL5, but the iPad is important for us, so we are very interested in your developments. Any news on where you are going with this?

    Jeroen.

  19. 27 Alan Schofield April 19, 2012 at 10:35 am

    Hi Roger,

    Very impressive. We’ve using the SL5 version and been building collections (XAML templates) on the fly from folders of images and SQL Server data and things grind at about 2,000 items.

    I’d love to see how your version performs when it ready.

    One thing lacking the SL5 version (at least when I last checked) was the ability to choose between AND and OR filtering. The SL5 version only supports OR.

    Please don’t lose enthusiasm, to build something like this is way beyond my skills so I rely on good people like you to lead us forward !

    Regards,
    Al.

    • 28 Roger April 19, 2012 at 10:38 am

      Hi Alan,
      The OR filtering is still lacking in the SL5 version. The great thing about the HTML5 is that it’s simple enough to add both types of filtering.

  20. 29 Steven June 10, 2012 at 6:07 am

    What an awesome tool, I would love to use it. I know its been asked already, but any plans on opening this up to the OS community?

  21. 32 Sumit Zitshi June 29, 2012 at 2:48 pm

    Hi Roger,
    I have worked quite a bit on the SilverLight JIT PivotViewer control and was looking for something that would work for devices not running SilverLight. I was impressed by your HTML PivotViewer project and downloaded it from CodePlex.

    I faced issues with it as the example provided in it does not run on IE9 or Chrome for me, although it runs fine on Mozilla Firefox. Moreover, I tried to host the project in IIS, but it still does not work.

    Is there something that I may be missing or something that is required to be done prior to running the project? Any help will be appreciated.

    Regards,
    Sumit Zitshi

    • 33 Roger July 1, 2012 at 3:04 pm

      Hi Sumit,
      You wont be able to run the control in IE or Chrome when opening it off the file system locally – you will get a CORS (http://www.w3.org/TR/access-control/) exception when making the AJAX request to the CXML file.
      I’m surprised you weren’t able to get it to work once hosted in IIS, but I’ll need a bit more detail to know what’s wrong. Can you let me know if anything was written to the developer console (Firebug in FF or hit F12 in IE or Chrome)?
      Thanks

      • 34 Sumit Zitshi July 2, 2012 at 2:22 pm

        Hi Roger,
        When I host the project in IIS and try to browse it I get a pop-up with following error:

        Error loading CXML collection.
        URL : collection/PASS%20Summit%202011.cxml
        Statuscode : 404
        Details: : Not Found
        Pivot Viewer cannto continue until this problem is resolved

        Moreover, I get the following error in developer console:
        http://:1234/examples/collections/PASS%20Summit%202011.cxml 404 (Not Found)
        although all the files are present there.

        Regards,
        Sumit

        • 35 Sumit Zitshi July 2, 2012 at 3:36 pm

          FYI- I have also added the MIME type for CXML, DZC and DZI as well in IIS. Now I get the error “Collection loader is undefined.” in “pivotviewer.js” at line 1798.

          • 36 Sumit Zitshi July 2, 2012 at 4:24 pm

            Update-
            Hosted the application again in a fresh web site and the things started working.

            Thanks.
            Sumit

          • 37 Roger July 2, 2012 at 7:16 pm

            Great! I’m glad you got it working. If you manage to create a collection I would be keen to check it out.

            Roger

  22. 38 Sony December 23, 2012 at 8:44 pm

    Is this project still active? Are you building updates / doing fixes?


  1. 1 Be the surgeon | codingfunda.in Trackback on March 13, 2012 at 11:30 am
  2. 2 » LobsterPot HTML5 PivotViewer – now Open Source! RogerNoble.com Trackback on April 23, 2012 at 4:27 pm
  3. 3 » Power View – how it works: part 3 RogerNoble.com Trackback on November 7, 2012 at 6:41 am

Leave a Reply