Skip to Content

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:

Animating Design Studio Components using CSS

An Animation in Action: 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!

I have included the CSS file as an 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:

SAP Lumira – Geek Tweaks: Customizing visualization properties in SAP Lumira

/wp-content/uploads/2015/05/lumiraanimation_709913.gif

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: http://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 http://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

/wp-content/uploads/2015/05/shakeanimation_709914.gif

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 http://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!

/wp-content/uploads/2015/05/roadrunneranimation_709915.gif

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! Comment below if you have done something interesting Animations with SAP Lumira

Like this blog! Tip this blog @ 1DtfHaPcUCaA95WY4eaM2se7kkvPQFELsz

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

        1. Annie Niangneihoi

          Hi Shankar,

          I don’t get it though, how do I use this extension with another custom extension? Should I paste the code of that extension into the render.js file of this extension?

          (0) 
          1. Shankar Narayanan SGS Post author

            Hi Annie,

            This extension affects all the charts in Lumira. You just have to copy the CSS in the style.css and pack it as an extension, Once you install it and open it once, it would affect all the charts for the storyboard.

            Regards
            Shankar

            (0) 
              1. Shankar Narayanan SGS Post author

                Hi Annie,

                It would work for all the chart, that is how my above extension is designed. If you see the screen shots, i have used native chart, those bar, column charts are those that are shipped with Lumira.

                Have you tried installing the extension? maybe that would give you better idea.

                Regards

                Shankar

                (0) 
                  1. Shankar Narayanan SGS Post author

                    That is not how it is suppose to work Annie. After you install the extension, can you select it from the extension (from custom extensions) and then click on other native chart and let me know what happens?

                    Cheers

                    Shanky

                    (0) 
                    1. Annie Niangneihoi

                      Hi Shanky, That’s not possible. I’ve selected the extension. It then shows me the blank Lumira screen without any measures or dimensions like this:

                      /wp-content/uploads/2015/08/1_773848.png

                      It shows the animation. The “Add more measures and dimensions” does get animated. But as soon as I start adding measures and dimensions, there comes a blank.

                      I don’t get how you can select this extension, and then click on a native chart. It just changes the chart type – which means I can select only one of either the animation extension or a different chart type – not both at once!

                      Could you explain please?

                      Thanks,

                      – Annie

                      (0) 
  1. Shankar Narayanan SGS Post author

    Hi Annie,

    Once you select this Extension, its intended to show the screen which you see. Now when you select any other native chart and add dimensions and measures to it does it start to animate? and are you using the style css extension from my repository?

    Regards

    Shankar

    (0) 
    1. Annie Niangneihoi

      Hi Shankar,

      Yes I am using the same extension from your repository.

      This is what I did, following your instructions:

      1. Select the extension (saw the same shaking blank screen)
      2. Select a native chart (bar chart for example) – this completely switches to a bar chart viz
      3. Add measures/dims (shows a regular bar chart – no animation whatsoever!)

      Since you can choose only one visualization for one chart at a time, it basically just switches from the extension to the native chart when I select it.

      🙁

      (0) 

Leave a Reply