Web Design Applications, Dashboards & Mashboards

How do you tell your developer to build a dashboard?

• Do you send powerpoint slides that you currently use as dashboards?
• Do you send a bunch of Excel files that contain data extracts in one sheet and charts that derive from the raw data?
• Do you sketch the charts on a paper or drawing board?

You are probably thinking what is wrong with any of the approaches above?

Your company just purchased the latest and greatest dashboard software and now has hired a consulting firm or trained internal IT resources to build the dashboards that pull data right from the ERP/CRM/MRP or custom datawarehouses.

Let us go through each of the approach above

1. Powerpoint slides

In many organizations, Powerpoint slides are “THE Dashboards“. A dedicated user crunches the numbers every month and keeps updating the powerpoint slides day in and day out. The slides then ship out to a mailing list containing the CEO, CFO, CIO, managers, and all the executives that are suppose to view them.

Now would you send the same slides to a developer or the consultant who is suppose to build Dashboards using the latest dashboard software?

If yes, then answer these questions

• Isn’t your data seen by someone who is probably not suppose to have access to?
• Your powerpoint slides will greatly influence the final dashboard that is delivered which is bad most of the time as all the design flaws get propogated in your latest and greatest dashboard software. So how will you prevent that?

2. Excel sheets

I have seen this so many times. Users have bunch of excel spreadsheets that reference multitudes of various other files that are sitting in some fileshare directory. The user shows the main number crunching sheet that they are proud of and demonstrates how these numbers are derived and then referenced in a third sheet that draws the dashboard. Amazing, isn’t it? The user has done the hard work no doubt about it but again the same questions arise with respect to data security and “design flaw propogation“.

3. Draw doodles of dashboard charts and the layout on a paper or drawing board

• How will you send it to other people for review and revisions?
• Where is the data on the charts that you just sketched?

You might argue back saying, why need data? The point here is not give real data in your Dashboard mockups but there is no rule against providing realistic and familiar data. If you present some wireframes or chart mockups that does not resemble your organization names on it, people names as example then users are going to simply balk. And throughout the entire review the only thing going in their mind is “This data does not look right, this data is not right…”.

So what are my options?

There are lot of wireframing tools in the market that allow you to prototype software but none provided me to mockup dashboards. So I spent 2 years developing this MockupTiger Wireframes and here is a brief introduction that provides exclusive Dashboard wireframing options.

For e.g To create a Bar chart, you simply drag the chart from the library

This is the true beauty of Dashboard wireframes. There are no colors. Your bar chart appears just like a skeleton which is perfect like a doodle on a paper except little clean and neat.

Double click the bar chart and now you edit the values that control the individual bars.

 

As you change the Rows, columns and the data against each label, you will notice the bars go up and down when you press OK.

The editor does not hide after clicking ok as it allows you to iterate and refine your mockup. You can click on the X on the top-right to close it.

There are lot of charts in the library to choose from and you can even add colors to your final mockups

 

This is not it, the application has software prototyping library of widgets so you can create website wireframes as well as mobile application mockups.

The best part is the online version is absolutely free so you can register and start using in few seconds.

Go check out my Free Wireframe software (online)

So do you think this is a better approach for defining Business Intelligence requirements for Dashboards and Web applications?

Remember, a dashboard is also a web application so you will definitely need to include all the web design aesthetics and UI patterns when designing dashboards.

That is why MockupTiger allows you to build desktop, mobile, web and dashboard prototypes/wireframes/mockups.

You can also download and try it on your own PC.

Here is the Demo link

When you build website wireframes or prototypes, clickable mockups is a standard requirement.

MockupTiger when released had Clickable prototyping feature using the Text widgets

Now all the text widgets, icons can be linked. There is a new element called hotspot that you can overlay on any kind of object/widget to simulate Clicking or interactivity

Read more about building Clickable Prototypes using Mockups

MockupTiger is a very powerful Prototyping and Wireframing application. It is web based and can be run on your desktop or you can host it on your own domain. Please visit Mockups website for more details

http://www.mockuptiger.com

My wife and kid are vacationing in India and everyday I talk to my son about what he did today. One thing he always ask me is “Is it night in Pittsburgh?”, “Is it night in Virginia?”. He finds it intriguing how come the day never happens at the same time in India and America. I guess it is time for a geography lesson for him when he gets back.

So, recently when he visited the Zoo in India, I asked him what all did he see. He started naming the animals …”I saw elephant..ummm lion…ummm and dad! dad! guess what? I saw mockuptiger!”. I had such a hearty laugh at that and I reverted “Are you making fun of my product?”. He continued, “there were two mockuptigers, one was sleeping and second roaming”. So that was funny and I started reflecting on how MockupTiger was born….here is short history

One of my chinese friend once told me that in China when a baby is born, they drop a vessel on the floor and whatever sound the impact makes determines the name of the baby. If they drop a spoon the sound is like “ching ..ching.”..ok..lets name the baby Chan, a big bowl –”chong dong” ..ping…pong…and so on. I guess he had pretty good sense of humor and he fooled me for a while.

More details here http://www.mockuptiger.com/mockuptiger-in-the-zoo

 

 

 

 

 

 

 

 

 

 

xcategory
xgroup
xgroup_category_map
xmembership_plan
xmembership_plan_detail
xobject
xobject_category_map
xobject_share
xobject_type
xplan_subscription
xprivilege
xrole
xrole_privilege_map
xuser
xuser_group_map

In this article we will take an Excel source containing scorecard information and convert into dials and speedometer charts.

We will also create few bar trending charts.

Consider the below sample data

Source File: You can download the excel file here

 

 

 

 

The above excel file tracks few metrics such as safety, quality and revenue. This is just a sample data and may not make sense in actual world but just imagine a manufacturing company that wants to track its overall safety and quality score and also track its total revenue. Now the company may use its own method at deriving the individual safety and quality scores.

They may have a dedicated team to collect safety violations and product defects and then use some formulae to convert those data into final score for any given month. We are not concerned with any of the methods on how those scores are generated. You are the dashboard person and the company has provided you the metrics by each month and now your job is produce a nice dashboard that shows relevant charts for the given data.

Since the data is tracked for each month, it makes sense to show a line or bar chart trending for the metrics.

Dials and Speedometers are relevant when we need to show performance of a single value. So in this case, since we have 12 month data, how do we show single value on the meter chart?

One solution is to show an ‘Average’ value for the safety and Quality metrics or we could show a dial that shows the current month values.

So the GOAL for this exercise is: Show bar chart for Safety trending 12 months and show average and current month value on the dial chart.

Dial chart requirement: For the dial chart, we are measuring the performance, whether we are on track or missed the goal. In order to achieve that, we create three new columns for safety such as ’safety_bad’, ’safety_ok’, safety_good’. These values need to be decided by the company management. If you are not sure, then look at previous year data and decide what should be good and bad values. The dials are used to guide the company to perform better or atleast improve that portion of the company operation represented by the metric.

 

 

 

 

 

 

 

First let us create the date hierarchy columns from the Period column. You need to make sure that the Period column is an actual Excel date column, else the hierarchy will not be generated

 

 

 

 

 

 

 

 

 

 

Right click on the period column, select Create -> Add Year, Quarter, Month columns

 

 

 

 

 

 

 

 

 

 

As you see we added the year and month columns. We may not use all of the above columns but having them ready gives us the option during the chart building.

Now right click on the “Name” and select ‘Create Chart”

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

We selected the ‘Bar’ chart type

For the x-axis we select the month column and for the y – axis we select the Safety metric

Next, we click on the “Create Chart” button

This action takes us to the below dialog

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

We rename the chart to ‘Safety’ and then click on ‘Fully Apply’

This action create the below chart (You may need to move the screens and dialog around to see the chart behind)

 

 

 

 

 

 

 

 

 

 

Now having the chart wizard open, we change the selection to ‘Dial’ chart

Check the Dial chart options below

 

 

 

 

 

 

 

 

 

We modify the options as below

• You can type the low and high range values for each range on the dial.
• In our case, we have defined the safety bad, ok and good values in our spreadsheet so when our goals change, we just change the spreadsheet and the dials will automatically take care. Also, what if we needed different goals for each month so rather than hard coding the range in the chart, we get them from the excel file

 

 

 

 

 

 

 

 

 

 

 

 

We first change the label sequence for the “Region Name” from “Bad” -> “Warning” -> to “Good”. For the dial chart the labels are not used so make sure that the colors are selected appropriately.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

You may click on the color icon to change the colors of your choice

Next, we select the range boundary values

 

 

 

 

 

The safety_bad value from our spreadsheet represents the lower boundary of our bad region, “safety_ok” represents the upper boundary of our bad region, similarly ’safety_ok’ is the lower bound for our ‘ok’ region and so on. For the ‘Good’ upper bound we simply typed a value but as general practice we should have one more column for the upper bound of the final region. In our case the final region is ‘Safety Good’.

Next, for the pointer value, select the column that you want to show on the dial chart. In our case we select ‘Safety’ and aggregation as ‘Avg’

 

 

 

 

 

 

Next, we click on “Create chart”. This action shows the dialog below

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

We change the chart title to ‘Average Safety’

NOTE: remove the double quotes in the SQL statement for the group by. This will cause an error.

Click on ‘Fully Apply’

Here is our final Dial Chart

 

 

 

 

 

Next, create a dial chart to show current month value

We will change some conditions on the main Qlet. Right click on the “Name” and select ‘Duplicate’

 

 

 

 

 

 

 

 

It creates an exact copy of the qlet table. We change the name to ‘Current Month’

 

 

 

 

 

Right click on the ‘Period’ column and select ‘Create’ -> Create Date Filter

 

 

 

 

 

 

 

 

 

 

This action shows a dialog as shown below

 

 

 

 

 

 

 

First change the operator to ‘Between’

Next select ‘First Day of Month’ for the from and ‘Last Day of Month’ for the To val.

Click on ‘Use This Filter’

This action applies the filter to the Qlet and it shows only currrent month row

 

 

 

 

 

 

 

 

 

 

 

Next, right click on ‘Current Month’ and select ‘Create Chart’

All of the settings remain the same except the ‘Aggregation’, make sure to select ‘NONE’

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Once all the three charts are done, we arrange them as below

 

 

 

 

 

 

 

 

Similarly, you may create the charts for “Quality” and “Revenue”

No Clutter

Don’t clutter your dashboard with unnecessary visual elements and data. If it looks too busy, then it will fail to communicate the data effectively. Don’t include every bit of data in a dashboard. Seperate them into separate dashboard Tabs.

Single Page – No Horizontal scrolling

Do not put objects on the far right so that the user has to scroll horizontally. It is easy to scroll only one direction which is vertical as that is the default website browsing behavior.

Do not print your Dashboard

Encourage users to export dashboard to PDF and stay on the “Green” side

Add interactivity

Adding extra interactivity to your dashboard, such as being able to select a certain region or being able to drill down can make a huge difference in the perceived usability.

Keep it simple

Show trend by periods

Show pie charts by categories or dimensions

Show tabular data with exception formatting

 

At the end, ask yourself, “Does this provide any value?” If so, what is it?

Previous – Excel Dashboard Tutorial – 11

How do you share your Excel Dashboard with users?

Now that you have built the dashboard, you can share the dashboard in multiple ways.

” Create a PDF output of the dashboard and send as email attachment.

Click on the PDF icon on the toolbar as shown below and it will instantly create a PDF output

 

PDF output

 

” Create Static HTML output. Click on the HTML icon on the toolbar. This option creates a static html page that you can put in on the web. Users cannot interact with the dashboard. It is just a snapshot image of the dashboard at the time the output was generated. It does not refresh automatically. You will need to regerate the output again when the data is refreshed.

” Desktop Sharing. You can put the dashboard definition file (icv) on a file share directory and other users can view the dashboard through the Dashboard viewer. You may need separate license for dashboard viewers for desktop.

Go to Menu Create ‘ Publish to web and it will generate a file that you can put it where the dashboard web server is and it will render the output. The look and feel is different with this option

The web version is using a flash charting engine to the desktop Java chart engine.
Details of converting the desktop to web version are not covered in the document. Please refer online at any of our websites for more details

You can download the complete tutorial as PDF
” Web Sharing: In this option, you can publish the dashboard to web and the dashboard is available real time with all the dashboard parameters and refresh actions

Previous – Excel Dashboard Tutorial

Summary

We built the above dashboard completely from scratch.

• We defined Calculations
• We defined date hierarchies
• We built Date Filters
• We built Date Parameters
• We built Bar Charts
• We built Pie Charts
• We cleaned the dashboard layout

Next – Share Excel Dashboard with other Users