Skip to Content

Blog Series

Episode 1: Data Measures & Dimensions
Episode 2: Changing Colors Episode 3: Axes
Episode 4: Chart Title & Legend Episode 5: Tooltips
Episode 6: Data Labels Episode 7: Adding Images

Related Links: Overview: SAP Lumira Extensions | Learn how | Viz Gallery I | Viz Gallery II

Hi everyone!

I’m starting this series of mini blogs on how to “tweak” an existing Lumira visualization extension chart from the many we already have open sourced on our Gallery.

We’ve had quite a few folks asking if it was possible to slightly modify a viz extension and have it look the way they want without making some major changes. The answer is yes! You absolutely can. Most of our open sourced extensions have been developed to be made flexible with any data you use, except the ones that have been created for specific use cases due to the nature of the requests for having them developed. But even these ones can be tweaked and fixed to fulfill the needs of your use case.

In this mini blog series episode (episode 1), we will discuss how to make sure that your extension can be used with similarly structured data for the particular chart type you are using. We also want to make sure that your chart can be reused with other similar datasets, which means that your extension code shouldn’t be tied to the data measures and dimensions of any particular dataset.

Please note: This particular blog isn’t really about tweaking yet. We will get to that in the next episodes. I felt it necessary to mention how data works before we jumped into those tweaking bits.

Let’s get into the specifics:

The Lumira extension framework, which is facilitated by SAP Web IDE, uses certain in-built properties. For data measures and dimensions, we have:

1a.PNG

Now take as an example, if you have three measures, you can either have one measure set with all three measures in it, or you can have three separate measure sets – one for each measure.

To make this easier to understand, we have a sample dataset with 3 measures (Net Promoter Score, Revenue Growth, Revenue) and one dimension (Company)

1b.PNG

We can arrange this data into measure and dimension sets accordingly. We may have them as separate measure sets, i.e. 3 measure sets and 1 dimension set

1c.PNG

And have them defined in the code in the render.js file of the extension project as:

1d.PNG

1e.PNG

OR we can have all three measures in a single dimension set as in this example where we have 3 measures (Family, Professional, Student) and 1 dimension (Country)

1g.PNG

We can have all 3 measures in one measure set called ‘X Axis’

1f.PNG

Accordingly, they can be defined in the render.js code as:

1h.PNG

Another alternative would be to write it as:

1i.PNG

Sometimes, when you have numerical measures, you want to make sure that your numbers have been imported as numbers indeed.

For separate measure sets:

1j.PNG

For a single measure set:

1k.PNG

The difference between these two is evident.

Once we have our data mapped into the extension project, we just make sure that the data has been correctly imported into the project by adding a console statement after our data mapping.

1l.PNG

You should be able to see your data array in the dev tool console:

1m.PNG

Now we can happily start building or rebuilding our extensions once we have the data configured.

Watch out for the next episode in our Lumira viz extension tweaking mini blog series: Changing Colors!

Happy coding! 🙂

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply