Skip to Content
Author's profile photo Murali Balreddy

How To: Create a Map Chart in Design Studio..

This blog explains about the map chart I wrote about in the sneak preview blog.

In that blog, i mentioned I had some issues with IE that I need to resolve before providing more information.

See this link for how this IE issue was resolved.

Here is the output from the map chart design.


This map chart was built using “STATELY” font. More information on how to obtain and use this font can be found here.

In this font, each character is a US state. So each of the 50 states and DC are mapped to alphabets A-Z and a-y. Complete map of the USA is mapped to alphabet z.

I have to host this web-font at an external site as Design Studio was not reading them when placed in the same folder as the custom CSS.

In order to utilize this web-font, add this font-face rule the top of the custom CSS.

@font-face {
  font-family: 'stately-webfont';
  src: url("http://<your host>/fonts/stately-webfont.eot");
  src: url("http://<your host>/fonts/stately-webfont.eot?#iefix") format("embedded-opentype"),
             url("http://<your host>/fonts/stately-webfont.woff") format("woff"),
             url("http://<your host>/fontsstately-webfont.ttf") format("truetype"),
             url("http://<your host>/fontsstately-webfont.svg#testfontRegular") format("svg");
  font-weight: normal;
  font-style: normal;

To build this map chart, I have to place 51 textboxes aligned vertically and horizontally. Each of these textboxes has a single character text from A…Z and a…y. The background was set to be transparent so that each font does cover the other. The textboxes were assigned the following CSS class

  font: normal normal 300px/100% "stately-webfont";
  font-size-adjust: none;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "liga=1";
  -ms-font-feature-settings: "liga" 1;
  -ms-font-feature-settings: "liga", "dlig";
  overflow: hidden;
  width: 300px;
  display: block;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  padding: 20px;
  border-radius: 25px;
  border: 2px dashed #eeeeee; 

For demo purposes of the map chart, I selected five colors and set each set of ten states to one color. For my actual map chart, these colors were set based on the state data.

Following screenshot the different text boxes and the setting for one text box.

A textbox.JPG

There are a few limitations:

a) Even-though the map chart visually shows the color, it is not possible to hover over (like tooltip) to show the data of each state

b) The states cannot be drilled down

The above two limitations are due to the fact that each state font occupy the whole map area and since they are layered, it is not possible to reach the lower layers. My actual map chart shows the map data on a crosstab from which you can drill down to a pie chart showing more detail.

Until SAP releases a map chart, this is a very good alternative.

10% CSS and 90% Creativity can get you build a flashy (no pun intended) and informative dashboard.

Thank you.

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.