Dashboard Update: This free HTML Dashboard Template is available for download from The Dashboard Spy. Just join his newsletter to receive this HTML Dashboard for use in your own dashboarding projects.

Here is a preview of the dashboard template:

HTML Dashboard Template

Portlets, widgets, web parts, panels, gadgets – there are many names for them, but whatever you call them, the dashboard portlet has become a common design pattern in dashboard design. Simple to understand and great for categorization, these groupings of KPIs can take a tabular or graphic format. Here is a typical portlet with a pie chart:

Jelly bean Portlet

In today’s post, we have a special treat – I actually took the time to create a video tutorial in which I demonstrate how to code the above “jelly bean” dashboard portlet in HTML. In this video tutorial, I slowly introduce HTML and CSS and show how to wire up a pie chart graph from a google docs spreadsheet. If you’ve ever had the slightest interest in seeing what HTML coding for dashboards is like, please watch the video. Let me know if you like it and I’ll do more.

Actually, I’ve got a whole stack of emails with questions from readers that I plan to answer through similar videos. I’ll call the series “Ask The Dashboard Spy”. Have a look at this video and stay tuned for more in the series.

First, let’s take a look at the letter the reader sent me:

Subject: Please teach me some dashboard coding

Dear Dashboard Spy,

I appreciate very much your Dashboards By Example blog of screenshots.
I’ve gone through hundreds of the examples and came away with some great
UI ideas. Thanks very much.

I’m a subject matter expert from the business side and so I find myself the
least technical person on the dashboard project team. I want to be taken
seriously by the IT guys so can you please teach me something technical.
I’d love to show off a little coding skill so that I can gain some “cred”
from the team.

Regards and Thanks Again.

Dashboard Coder Wannabe

So, here is the video I created in response.  After you watch the video, you can hit the “more” link or scroll down to see the sample HTML code. Please note that the video is longish – about 30 minutes and covers a more topic that’s more technical than usual for this blog. It’s in response to many of you looking for more technical advice. I thought I’d start simple and tackle some very basic HTML and CSS that all dashboard project people should understand.

The real gem in this video is how the portlet consumes a google web service to show a pie chart. You can set up a google docs spreadsheet and use it for the backend and generate KPI graphs which you publish on the web and can bring up in the sample HTML portlet that I will demonstrate the simple code for.  Enjoy and please provide feedback.

(more…)