Introduction

A major shortcoming that most users will find in SAP Lumira is the lack of customizable animations. While a basic application does do the job, inclusion of advanced animations can help portray more powerful messages or just add an accent to what you wish to convey already. For instance, it would be pretty neat to give users an animation of an earthquake while showing data about earthquakes. It would quickly tell users that we’re talking about earthquakes, and add to the UX value of the dashboard as well.

HTML5 and CSS3 together make it possible to enable all kinds of animations on charts used in SAP Lumira. Let’s take a look at how we can leverage this feature!

Through the course of this blog, I am assuming that you have basic knowledge in writing extensions for SAP Lumira. But even if you don’t, I’ve provided links for you at every step so you don’t get lost – best of luck!

How is the animation done?

Animation in CSS is done by using the “keyframes” rule. When we define the animation to be shown using the keyframes rule, we can assign this class to a particular component on which we wish to see the animation. For example, a chart.

For more details on CSS keyframes and animation, you could try taking a look at this blog:

https://visualbi.com/blogs/design-studio/animating-sap-design-studio-components-using-css/

An Animation in Example: Shrinking and Growing Charts

The KPIs we show on a chart always keep shrinking and growing, right? So, let’s look at how we can get the charts showing them to shrink or grow as well!

(We have included the CSS file as an attachment (click here for attachment) – you’re good to save the file and use it as is. But in case you want to know what it does, read on!)

 

Defining the animation target

We will be defining a CSS class named “animation-target”, which when applied to an element, animates that particular element. Here we are using the “animation” property of CSS3. To ensure that the animation is shown smoothly across different browsers such as Firefox, Chrome and Safari, we will also be defining a “webkit animation”. The animation takes place over a period of 2000ms (2 seconds).

.animation-target {
  -webkit-animation: animate 2000ms linear infinite both;
  animation: animate 2000ms linear infinite both;
}

Defining the keyframe animation

Once we have defined the animation target class, we will be defining the actual keyframe animation sequence within the same CSS file. (You can take a look at how the sequence has been defined within the CSS file itself).

The keyframe animation sequence defines the actual animation/transition. Keyframes are powerful as they have basic steps like rotation, skew and also advanced steps like 3D transformations. We will make use of transformations to shrink and grow the chart at different intervals of time.

Applying animation to SAP Lumira

Now that we have the CSS file for the animation ready, it’s time to see it in action on SAP Lumira. We will need to write an Extension that applies the “animation-target” class to viz-controls-chart-holder. You can follow the guide here on how to apply Custom CSS to extend SAP Lumira charts:

https://visualbi.com/blogs/sap-lumira/sap-lumira-geek-tweaks-customizing-visualization-properties-in-sap-lumira/

Lumira Animation

 

Now, you should be able to see your charts shrink and grow as you would like! If you want a bit more fun with CSS3 animations on Lumira, read on!

Another Example: Shaking up your Data!

We will build an extension that will give the impression of an earthquake motion to the charts while analyzing earthquake data.  We will download the Data from here: https://earthquake.usgs.gov/earthquakes/feed/v1.0/

For this animation we will use a CSS library called shake.css. You can find out more about that the library at https://elrumordelaluz.github.io/csshake/. It has a lot of different options that can be leveraged using the classes that have been defined.

You can download the extension and the profile from my github https://github.com/sgsshankar/lumira-extension-viz-shakecss

Shake Animation

Gee Whiz-z-z-z-z-z-z data of The Road Runner show

The Road runner show is one the best cartoon shows that came out and it is one of my personal favourites. So let’s build an extension that could make your chart run like the road runner.

This time we will make of online animation generator https://bouncejs.com/. BounceJS helps us with prebuild animations and also sequences that we could use to build our animation and finally it generates neat little CSS that we can use.

Copy the generated CSS into your extension style.css and add it to the viz-controls-chart-holder, build the extension and add it to Lumira to get the effect!

Road-Runner Animation

 

There are lot of Animation Generators available online that could help you generate the animation CSS that you could use inside your extension. Hope you have some fun with your animations!

Learn More

Subscribe to our Newsletter

5920 Windhaven Pkwy
Plano TX 75093.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com