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:
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)
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
And have them defined in the code in the render.js file of the extension project as:
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)
We can have all 3 measures in one measure set called 'X Axis'
Accordingly, they can be defined in the render.js code as:
Another alternative would be to write it as:
Sometimes, when you have numerical measures, you want to make sure that your numbers have been imported as numbers indeed.
For separate measure sets:
For a single measure set:
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.
You should be able to see your data array in the dev tool console:
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! :smile:
- SAP Managed Tags:
