HTML5 Tree View Control

My colleague Ron Keler recently posted on his blog about making a tree view control. I was excited to give this technique a try since it really demonstrates the power and flexibility of a true HTML5 dashboard solution.

It turned out to be a lot easier to implement than I expected. In this example I used the jQuery Plugin: Treeview, but there are a number of other freely available solutions in the jQuery community. While I was working on my own example, I decided to also address the ability to dynamically change chart types as mentioned by Pieter Hendrikx in his blog post SAP Dashboards or ZEN wishlist. This example uses a single data set and one chart to display different series and to toggle between a bar, stacked bar, column and stacked column chart without reloading the page.

Please let me know what you think.

Xclesius vs HTML5 Label Based Menus

While I’m sure there are a number of ways to accomplish the Label Based Menu effect in HTML5, I have found that jQuery Mobile is a pretty easy way to get a nice looking product. Xcelsius may win this challenge for out-of-the-box power and ease of use, but take a look at the following HTML5 example. I see a lot of potential to create some dashboards that look and feel like native apps using this technology.

These images are from my iPad, but click on them to see the working version.

Chart Toggle Example

Chart Toggle Example

My next goal will be to create mobile-ready icons (both standard and HD) to represent each of the chart types as jQuery buttons.

HTML5 Dashboard Examples

While I’m still in the process of blogging about the differences in charting capabilities between Xcelsius and Google Charts, I thought that I would share a dashboard that is rather similar between the two technologies.  

The following images show a layout (high & low contrast) that was based on my Xcelsius infographic template from a few months back.  You can see the original HERE.

Then click on the images below to see them in action.  Don’t forget to test them out on your iPad and phone too!

HTML5 Infographic Dashboard (Low Contrast)

HTML5 Infographic Dashboard (High Contrast)

HMTL5 vs. Xcelsius – Gantt Chart

For round 2, I have chosen the simple gantt chart. Now neither Xcelsius or Google Charts have a specific chart for this, but the effect is easy enough to achieve using a stacked bar and having the first series be the lead time. Then you either make that first series transparent or set it to be the same as the background.


Continue on for a side-by-side comparison and the explanation behind my ruling…

Xcelsius vs. HTML5 – Waterfall Chart

This is one of several posts dedicated to my exploration of HTML5 capabilities using Google charts (which allow for backwards compatibility to older browsers) compared to what I can currently accomplish in Xcelsius.

I already know that the basics are covered (bar, column, area, line, pie), so I’m going after many of the same challenges I faced over the past couple of years with Xcelsius.

My first challenge is the Waterfall chart.


Creating Google Data Tables from Excel

Google charts are an amazing resource and you can’t beat the price, but it is a little tricky switching between those and Xcelsius. While the Google Code Playground offers a great place to test new designs and save for later use (wouldn’t this be great in Xcelsius?), I find that I get off to a slow start with my sample data because it needs to be in the Google Data Table format. Additionally, it allows for custom tool tips… but, you have to have those included in the data table. This includes any formatting that you would want to show on displayed values.

To help facilitate the process, I have created a simple Excel spreadsheet that can translate about 100 rows of 8 columns (plus Axis labels) into the Google Data Table format with an easy copy/paste. The table will appropriate format the values and the labels for String, Number, Currency and Boolean field types.