{"id":5141,"date":"2012-06-29T09:14:11","date_gmt":"2012-06-29T07:14:11","guid":{"rendered":"http:\/\/www.graphomate.com\/?p=5141"},"modified":"2022-01-20T13:53:08","modified_gmt":"2022-01-20T12:53:08","slug":"visualization-efficient-dashboard-design-part-ii","status":"publish","type":"post","link":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/","title":{"rendered":"Visualization: Efficient Dashboard Design (2\/2)"},"content":{"rendered":"

In my last <\/span>post<\/a><\/strong><\/span> I announced that I would analyze the – how shall I call it – maybe “the worst chart in the world”. Here it is: the origination process from a visual loser to a meaningful visualization.<\/span><\/p>\n

I think in the first part<\/a><\/strong><\/span> of my series about efficient Dasboard Design, I was able to demonstrate that the graphical presentation of information is preferable to the tabular presentation.
\nWhen it comes to recognizing patterns, trends or outliers charts remain unbeaten. Although tables have their place in reporting – more on this in another post!<\/p>\n

Now the point is to show that is not sufficient for efficient Dashboard-Design to position some pie-, column charts or speedometers\/gauges haphazardly on a screen page.<\/p>\n

The selection of the right chart type and the design of the chart are decisive for the expressiveness of a dashboard. I want to show this by means of an example chart in a step-by-step evaluation.<\/p>\n

But first of all I need to confess that I found the chart two years ago in a blog entry by\u00a0Stephen Few<\/a><\/span><\/strong> with the title<\/strong><\/span><\/a>: \u201eOracle \u2013 Have you no shame?\u201c<\/p>\n

\"\"<\/a><\/p>\n

In my opinion it is still probably the worst chart in the world! It seems unbelievable but this chart was \u2013 is? \u2013 the demonstrative example for the online learning course: \u201cOracle BI Enterprise Edition \u2013 Build Good Dashboards\u201d! Putting it a bit bluntly, Stephen Few sums it up:<\/span><\/p>\n

\u201cBased on this graph, I\u2019m guessing that Oracle now outsources the development of its courses to the primate house of the local zoo.\u201d<\/strong><\/p>\n

Why? Beautiful 3D- cylinder charts and -lines, which make an interpretation of the underlying data nearly impossible. First of all we will delete this straining after effect along with superfluous frames. You can see the result here, built with standard components of SAP BO Dashboards
\n(Xcelsius). I needed to perform some sleights of hand to succeed in building the chart of image 2 with Xcelsius:<\/p>\n

\"\"<\/a><\/p>\n

Without the 3D-effects and value axis starting on the same level with “0”, the basic prerequisites for a sensible interpretation of this chart are given. On closer inspection it is obvious that the “Forecasted Dollars” are not shown on the left value axes, together with the other two given values, but on the right value axis, together with the “Forecasted Units”. They can not be serious! All values (\u201eDollars”) are depicted with <\/span>identical elements<\/strong> \u2013 columns \u2013 and <\/span>on the same axes<\/strong>:<\/span><\/p>\n

\"\"<\/a><\/p>\n

Up to this point I am tolerant as these mistakes are BI-standard. But it gets a lot worse: Who is the donkey responsible for <\/span>stacking <\/strong>three annual values in order to make them visually comparable?! If I want to compare actual turnover data with data from the last year or with the forecast, I show<\/span><\/p>\n

them grouped side-by-side<\/strong>:<\/p>\n

\"\"<\/a><\/p>\n

Furthermore, I am able to depict the \u201cForecasted Units\u201d on a uniform scale with the Dollar-values. I can do without auxiliary lines. I rather prefer the data labels on the elements. I also adopted a rule: I always show <\/span>development over time on a horizontal axis<\/strong> from left to right,<\/span><\/p>\n

structural development on a vertical axis<\/strong>. For the comparison of regional structures I therefore prefer a grouped bar- instead of a column chart<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

Still rather colorful. <\/span>The choice of color and color-effects are deviating.<\/strong> Visualization gurus call this \u201cNoise\u201d. My advice is to use colors only if they make sense: to emphasize, as a warning signal or if the color is used to encode information. I know companies which assign certain colors to each<\/span><\/p>\n

business segment! Red and Green are reserved for \u201cgood\u201d and \u201cbad\u201d. Furthermore, charts in shades of gray are easier to print. Another form of \u201cnoise\u201d are the 6-digits chart labels: I use three digits as a maximum and scale the chart accordingly:<\/p>\n

\"\"<\/a><\/p>\n

Regular readers of my lines know: I am a fan of the regulatory framework SUCCESS by Rolf Hichert. We have these rules fully implemented in our <\/span>graphomate<\/strong><\/span><\/a> Addon for SAP BO Dashboards (Xselsius). After applying the CHECK and SIMPLIFY rules for the scaling and design of the chart, the next step is to apply the CONDENSE rules: The goal is to reach a high density of information in order to <\/span>depict complex data at a glance<\/strong>. The need to browse through (web) pages hinders the comprehension. On the third page, at the latest, we have forgotten what was shown on the first pages. So: minimize the chart size and put the \u201cForecasted Units\u201d again in the chart. Shown in a needle chart as to set them apart from the values (\u201cDollars\u201d).<\/span><\/p>\n

\"\"<\/a><\/p>\n

And finally:<\/span> What is a report without a message?<\/strong> The name of the original chart \u201cRegional Revenue: Current Versus Prior Period\u201d is wrong and meaningless: I can see that it is a comparison of the turnover! Even if I do so at a second glance, as I can also see forecasted units and values.<\/span><\/p>\n

Each report should have a message, which should be emphasized in the chart:<\/p>\n

\"\"<\/a>
fig.8: Step 7<\/figcaption><\/figure>\n

I am aware that realizing these rules of the SUCCESS-concept \u2013 SAY \u2013 is rather difficult.<\/span><\/p>\n

Stephen Few rightly remarks, that:<\/p>\n

\u201cIt is as if the person who created this \u201cGood Dashboard\u201d example of a graph did everything possible to make it as ineffective as possible.\u201d<\/strong><\/p>\n

Terrible, really terrible, if this is sold as the \u201cbest practice\u201d of a BI vendor!
\nIn Part III of my series on efficient Dashboard Design I will talk about the remaining regulatory groups of the SUCCESS concept. Especially UNIFY \u2013 the idea of a standardized company-wide notation for business reports \u2013 will be a topic.<\/p>\n

But for now I am going to eat some watchamacallits …<\/p>\n

Pleasant holidays,<\/p>\n

\"Unterschrift\"<\/p>\n

_<\/p>\n

\"ccbync\"<\/a>
\nThis file is licenced under the\u00a0Creative Commons-Licence<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"In my last post I announced that I would analyze the – how shall I call it – maybe “the worst chart in the world”. Here it is: the origination process from a visual loser to a meaningful visualization. I think in the first part of my series about efficient Dasboard Design, I was able","protected":false},"author":17,"featured_media":5346,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post post-type-post post-view- post-scope-","status-publish","post-format-standard","has-post-thumbnail","category-general","clear"],"acf":[],"yoast_head":"\nVisualization: Efficient Dashboard Design (2\/2) - graphomate<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualization: Efficient Dashboard Design (2\/2) - graphomate\" \/>\n<meta property=\"og:description\" content=\"In my last post I announced that I would analyze the – how shall I call it – maybe “the worst chart in the world”. Here it is: the origination process from a visual loser to a meaningful visualization. I think in the first part of my series about efficient Dasboard Design, I was able\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/\" \/>\n<meta property=\"og:site_name\" content=\"graphomate\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-29T07:14:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-20T12:53:08+00:00\" \/>\n<meta name=\"author\" content=\"Lars\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@graphomate\" \/>\n<meta name=\"twitter:site\" content=\"@graphomate\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lars\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/\"},\"author\":{\"name\":\"Lars\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#\\\/schema\\\/person\\\/6e3bdc48e7b183261940f7340907f50f\"},\"headline\":\"Visualization: Efficient Dashboard Design (2\\\/2)\",\"datePublished\":\"2012-06-29T07:14:11+00:00\",\"dateModified\":\"2022-01-20T12:53:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/\"},\"wordCount\":954,\"publisher\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"General\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/\",\"url\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/\",\"name\":\"Visualization: Efficient Dashboard Design (2\\\/2) - graphomate\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2012-06-29T07:14:11+00:00\",\"dateModified\":\"2022-01-20T12:53:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/2012\\\/06\\\/visualization-efficient-dashboard-design-part-ii\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualization: Efficient Dashboard Design (2\\\/2)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/\",\"name\":\"graphomate\",\"description\":\"Einfach und einheitlich IBCS Dashboards visualisieren\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#organization\",\"name\":\"graphomate Gmbh\",\"url\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.graphomate.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/graphomate_logo_2014_500px_transparent.png\",\"contentUrl\":\"https:\\\/\\\/www.graphomate.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/graphomate_logo_2014_500px_transparent.png\",\"width\":500,\"height\":82,\"caption\":\"graphomate Gmbh\"},\"image\":{\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/graphomate\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/graphomate-gmbh\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCvrjaoVJ-xDFGLCAzKN_11Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/#\\\/schema\\\/person\\\/6e3bdc48e7b183261940f7340907f50f\",\"name\":\"Lars\",\"url\":\"https:\\\/\\\/www.graphomate.com\\\/en\\\/author\\\/lschubert\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visualization: Efficient Dashboard Design (2\/2) - graphomate","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/","og_locale":"en_US","og_type":"article","og_title":"Visualization: Efficient Dashboard Design (2\/2) - graphomate","og_description":"In my last post I announced that I would analyze the – how shall I call it – maybe “the worst chart in the world”. Here it is: the origination process from a visual loser to a meaningful visualization. I think in the first part of my series about efficient Dasboard Design, I was able","og_url":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/","og_site_name":"graphomate","article_published_time":"2012-06-29T07:14:11+00:00","article_modified_time":"2022-01-20T12:53:08+00:00","author":"Lars","twitter_card":"summary_large_image","twitter_creator":"@graphomate","twitter_site":"@graphomate","twitter_misc":{"Written by":"Lars","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/#article","isPartOf":{"@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/"},"author":{"name":"Lars","@id":"https:\/\/www.graphomate.com\/en\/#\/schema\/person\/6e3bdc48e7b183261940f7340907f50f"},"headline":"Visualization: Efficient Dashboard Design (2\/2)","datePublished":"2012-06-29T07:14:11+00:00","dateModified":"2022-01-20T12:53:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/"},"wordCount":954,"publisher":{"@id":"https:\/\/www.graphomate.com\/en\/#organization"},"image":{"@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/#primaryimage"},"thumbnailUrl":"","articleSection":["General"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/","url":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/","name":"Visualization: Efficient Dashboard Design (2\/2) - graphomate","isPartOf":{"@id":"https:\/\/www.graphomate.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/#primaryimage"},"image":{"@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/#primaryimage"},"thumbnailUrl":"","datePublished":"2012-06-29T07:14:11+00:00","dateModified":"2022-01-20T12:53:08+00:00","breadcrumb":{"@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.graphomate.com\/en\/2012\/06\/visualization-efficient-dashboard-design-part-ii\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.graphomate.com\/en\/"},{"@type":"ListItem","position":2,"name":"Visualization: Efficient Dashboard Design (2\/2)"}]},{"@type":"WebSite","@id":"https:\/\/www.graphomate.com\/en\/#website","url":"https:\/\/www.graphomate.com\/en\/","name":"graphomate","description":"Einfach und einheitlich IBCS Dashboards visualisieren","publisher":{"@id":"https:\/\/www.graphomate.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.graphomate.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.graphomate.com\/en\/#organization","name":"graphomate Gmbh","url":"https:\/\/www.graphomate.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.graphomate.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.graphomate.com\/wp-content\/uploads\/2021\/06\/graphomate_logo_2014_500px_transparent.png","contentUrl":"https:\/\/www.graphomate.com\/wp-content\/uploads\/2021\/06\/graphomate_logo_2014_500px_transparent.png","width":500,"height":82,"caption":"graphomate Gmbh"},"image":{"@id":"https:\/\/www.graphomate.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/graphomate","https:\/\/www.linkedin.com\/company\/graphomate-gmbh\/","https:\/\/www.youtube.com\/channel\/UCvrjaoVJ-xDFGLCAzKN_11Q"]},{"@type":"Person","@id":"https:\/\/www.graphomate.com\/en\/#\/schema\/person\/6e3bdc48e7b183261940f7340907f50f","name":"Lars","url":"https:\/\/www.graphomate.com\/en\/author\/lschubert\/"}]}},"_links":{"self":[{"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/posts\/5141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/comments?post=5141"}],"version-history":[{"count":3,"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/posts\/5141\/revisions"}],"predecessor-version":[{"id":17339,"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/posts\/5141\/revisions\/17339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.graphomate.com\/en\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/media?parent=5141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/categories?post=5141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.graphomate.com\/en\/wp-json\/wp\/v2\/tags?post=5141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}