Web-deployed dashboards without Flash or expensive BI tools (Protovis)
I discussed recently about how new javascript libraries (especially Protovis) have the potential to revolutionize information delivery to the web. As I haven’t seen any examples of these libraries being used to create a dashboard, I thought I’d be the first. This is my first iteration (click for the big, real version) – don’t read anything into the choice of metrics, values, or charts. If you can’t see the dashboard after clicking through, chances are you’re using IE or an older version of another browser
It uses existing examples of a sparkline function, a bullet chart adapted to better fit a dashboard application, sparkbars, and two stacked bar charts. all aligned using basic CSS. I’ve also added alerts, and tooltips. At the moment it all seems a bit static, but when considering that nothing on this example is an image, no reliance on Flash, and all drawn by your browser, I think the potential is huge for using Protovis as a graphical front-end to dashboards on the web.
It’s not a leap to see how you could use javascript to import new data, create dropdowns for filtering time ranges, expand sections (though divs) to provide more information, and add the interactivity (where useful) seen in the Protovis showcase.
Obviously feel free to look at the source of dashboard. If you need a primer on Protovis, I found the one @EagerEyes to be useful.
If you’re interested in understanding how to design better dashboards, whether on the web, or in Excel, Data-Driven offers on-site seminars tailored to your needs.
John Childress
Good post. I have been dying to figure out a decent way to work on web dashboards… what kills me is I need to be able to print them out also. We are using Excel, but it’s hard to “re-use” it like I would like to…
John
John Munoz
Alex,
Wonderful job! I’ve been searching for applications of Protovis as a dashboarding tool and have come up empty handed, until I saw yours.
This is the first instance I’ve seen of a tool that presents high quality/high resolution tiny charts equal to Microcharts, on the web that doesn’t require a $20,000 down payment and/or years of Flash programming experience. In addition, by presenting your dashboard on the web, you open up a huge realm of applications that are well beyond the scope of what Excel can do. The addition of interactivity, in the form of drop down boxes, or sliders, will really put your application over the top.
BTW, it’s worth noting that when the dashboard is clicked, it presents itself in a larger version.
Very nice and well done!
Alex Kerin
Thanks for your comments, I’ve also added some number formating and text to the tooltips to make them more useful.
DCasey
Brilliant!
I started to play with this at work some and was starting to move toward building a POC for the bosses.
Of course I then discovered that my one hope of having something work, IE8, didn’t support anything useful. My fault for not making sure IE8 was capable. Regardless I’m just happy to be off IE6. Maybe the new release of Chrome Frame can save me from Excel Dashboard hell…
Alex Kerin
Yeah, hate to be the bearer of bad news, but IE9 won’t be too hot on this either. Chrome is great, but if you need IE… The developers are apparently trying to shoehorn something together for IE.
Per Excel – it can be challenging, but personally I think that Excel can be fantastic for dashboards, deployment issues notwithstanding (and they are manageable) . I just recently taught a course on creating great Excel dashboards – the Protovis example is almost an exact copy of what I created in Excel for the seminar.
Ping me if you need any help.
DCasey
Oh for sure Excel works great. But unfortunetly everything has be published in a .pdf with not linking even. I’ve created some lovely excel dashboards that even move toward interactivity. But where I work, adoption to new things is difficult and near impossible. The biggest complaint I get is that the ‘dashboard’ doesn’t allow for user interaction of any kind (embedding links in the .pdf was removed for some reason) and they prefer to spend 8 hours in meetings going over report after report. Which is of course followed by a decision that ignores everthing they just looked at.
Uphill battle that I’ve started the first few steps on. Having an interactive webbased dashboard is my goal (be it Tableau or Protovis or even Excel Services), but getting buy in tends to require a major leap.
Alex Kerin
If you have time to wait, Excel 2010, plus Office online (docs.com) may be a solution as well…
anonymous
Protovis, as it fails to support IE, is not the optimal solution.
The sparklines and the bullet graphs can be done with the
jquery sparklines plugin; and, unlike Protovis, jquery sparklines
works in IE.
http://www.omnipotent.net/jquery.sparkline/
The graphs at the bottom can even be done
in pure css/html.
Alex Kerin
The lack of IE is definitely a problem, but I understand the developers are working on a solution. I wasn’t trying to suggest that you could only do this in Protovis, nor that Protovis is the best library for these charts, but rather that Protovis, which has amazing promise for advanced visualizations (like the Dorling Cartogram example) could also be used for this application.
It will be exciting to see how all of these libraries develop over the coming months and years.
Eric Blue’s Blog » Weekly Lifestream for June 13th
[...] Shared Web-deployed dashboards without Flash or expensive BI tools (Protovis) « Data Driven. [...]
Sparklines in Wordpress and Blogger Posts « Data Driven
[...] and not messing up line heights is generally annoying. As discussed in the Dorling Cartogram, Protovis Dashboard, and Google Intensity Map posts, the options for generating graphics are expanding with continued [...]
Fabrice Rimlinger
Very very nice indeed.
I have to give it a try and share some thoughts.
This opens a great potential to share efficient & light infoviz.
Thanks again Alex
Regards
Fabrice
jerome cukier
that’s a really nice dashboard which combines good design, value-added interactivity, and instantaneous execution. good work!
Dashboard Designer
Very nice example. I always enjoy coming across well thought out, well designed dashboards. This one packs so much information into one view, but is so clean and simple, it’s not overwhelming. Great inspiration for my efforts. Thanks.
bottleboot
Very nice work and great use of Protovis! Nice Dashboard.
I seriously don’t get why everybody is whining about IE in the comments here. There is a hack available to fix the problems. See more about it in this article here: http://multimedia.journalism.berkeley.edu/tutorials/protovis-internet-explorer/protovis-svgweb/
I also don’t see how one can compare this to Excel, which is a paid program with a lot more limitations then Protovis has.
admin
Thank you for the link – a good solution for making IE behave better. Maybe in IE10 we can hope for standards to be adhered to?
bottleboot
Haha, let’s hope so, though i fear the days we have to look for IE hacks are not over yet.
Zira
Hi Admin,
1)May i know that this dashboard require run with flash?
2)May i know the differentiate dashboard application that require flash VS dashboard application that non-require flash?
sorry, i’m new in developing dashboard report.
Alex Kerin
Zira 1. No flash – that’s the point, but still some difficulties with Internet Explorer – those are being solved by various parties
2. Being able to run on iphone/ipad is a big plus, but also should be quicker to load for more complex dashboards.
Thanks for the questions.