Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 

*This extension will be open sourced on GitHub in a few weeks*


The Product Management, SAP Analytics - Enablement team hosts many webinars to its customers and partners. As products as SAP Lumira are becoming more and more known in the business world, the registrations to these events and webinars increase.


Not only in our team, but also in general in the last few years the number of webinars and online events has increased noticeably. People from all over the world attend these events and as a host you have to think about suitable times. With this you have to keep in mind that your attendees might be from different time zones.

Wouldn´t it be great to see from which time zones the largest number of your attendees are from? You can now visualize this with the Time Zone Geomap extension in SAP Lumira.

The extension maps the registrations to the corresponding country. Based on this, the respective time zone is determined.

In the visualization, all time zones and countries are displayed in a world map. Furthermore, the number of registrations of a specific time zone is displayed with a bar chart below the map. Every bar represents the the number of registrations for each time zone.

This screenshot contains only test data.


Development Process

1.1 Creating a time zone based map

Just like many chart types have already been developed based on D3.js, the time zone based world map was created out of this example: Time Zone World Map with D3 and TopoJson | TechSlides.

This example is based on a TopoJSON file, which contains the data for a world map with time zones. With the support of the TopoJSON library it can be converted to GeoJSON for direct use with D3.

1.2 Processing the input data

The country name is loaded as a dimension and the respective number for the country as a measure.

An array for all time zones with the number of attendees per time zone and the color it represents is created. The number of attendees of a country is added to he value of its respective time zone in the array.

There are several countries which have multiple time zones. However our data does not contain that granular information. As a work around the number of attendees of these countries is divided by the number of time zones before adding it to the array. In this way the total number of a country is allocated in equal parts to all of its time zones.

The following countries have multiple time zones:

  • Australia (3)
  • Brazil (3)
  • Canada (6)
  • Greenland (4)
  • Kazakhstan (3)
  • Indonesia (3)
  • Mexico (3)
  • Russia (8)
  • United States (6)

1.3 Displaying the bar chart

Below the world map a bar chart is shown, which represents the number of attendees. The bar chart also uses the colors, which are stored in the array and also has a hover effect. The hover effect is implemented with the following functions:

.on('mouseover', function(d, i) {

     //Show hover effect

}

.on('mouseout', function(d, i) {

     //Hide hover effect

}

1.4 Choosing colors

The coloring of a visualization extension is one of the most important things when developing an extension. Suitable colors make it easier for the user to understand the data and to draw correct conclusions from it. The following web app helps you with determining the correct colors for your use case:

https://coolors.co/app

1.5 Handling different screen sizes

Due to different screen resolutions it is necessary to optimize extensions for this. As a general rule the dimensions of elements should not be specified in pixels (px), or if, it should be evaluated and tested. As an alternative to pixels, the width which is specified within the render function should be used. For each element that has a specific aspect ratio, multiply the ratio by the width or height of the container element. For the Time Zone Geomap extension this looks like:

var newHeight = width * 0.44186;

if(newHeight > height){

newHeight = height;

width = newHeight * 2.26316;

}

height = newHeight;

The dimensions of the bar chart displayed below the world map are calculated in the same way, based on the total width and height:

var barWidth = $('.map')[0].getBoundingClientRect().width - 20;

var barHeight = height / 6;


1.6 Best practices

The extensions installed in your Lumira can interfere with each other and with the SAP Lumira standard charts. Therefore, it is necessary to use unique CSS classes and not to access anything of the DOM (Document Object Model, all nodes of a document) of Lumira outside of your extension. The following blog gives an overview of best practices for developing extensions:

Best Practices for Visualization Extensions

Next steps

Because of countries with multiple time zones, the data that is calculated for these countries is not as accurate as it could be. Most attendee lists also contain the city of an attendee. For each city the longitude/latitude has to be identified. In the end, the exact time zone can be determined with this longitude/latitude.

If you have any additional ideas please contribute to the project at GitHub (*coming soon*) or comment on this blogpost.

Resources

3 Comments