Skip to Content

Greetings!

In this episode of our mini blog series on modifying existing extensions, we will go through how we can add or remove our title or legend in a chart. We’ve already mentioned as part of our Best Practices for Visualization Extensions, to have your title and legend checked when you create your visualization extension project in Web IDE.

REMOVING TITLE AND/OR LEGEND

Typically, if you go to the flow.js file in the Web IDE project, you should find the following code snippets for title and legend. If you want to remove them, you can just comment them out by highlighting the lines and pressing Ctrl + / on your keyboard.

4a.PNG

ADDING TITLE AND/OR LEGEND

A simple way to have the title and legend back is by “un-commenting” out the code snippet above in flow.js

However, in some extension projects, the title and legend code snippets may not be there at all. In this case, it is easier to add or append your own title and legend to the chart using SVG and D3.js

Append a Title


Just add the following D3 code snippet in render.js after you’ve rendered all of your other elements:


vis.append("text") .attr("x", width/2) .attr("y", margin.top * 2) .attr("class", "companyname_viz_ext_myextensionname_title") .text("My Custom Title");

Then go to default.css and add the following styling:

.companyname_viz_ext_myextensionname_title{ font-size: 32px; font-family: Sans-Serif; fill: #000; }

Make sure your class names are the same.

This should give you:

4b.PNG

This can be applied to any extension.


Append a Legend

Similarly, we can append a legend to the chart as well. By appending it using D3 SVG elements. You can either go to flow.js and paste the following code snippet for including a legend:

var legendElement = sap.viz.extapi.Flow.createElement({ id: "sap.viz.chart.elements.ColorLegend", name: "Legend", dimensionIndex: [1] }); flow.addElement({ "element": legendElement, "propertyCategory": "legend", "place": "right" });

Or you can render one yourself. Take the sample code:

4c.PNG

from lumira-extension-viz/render.js at master · SAP/lumira-extension-viz · GitHub

We get:

4d.PNG

You can also write your own code using D3.js and append your own custom legends.

Next in our Lumira viz extension tweaking mini blog series: Tooltips!

Good luck on customizing your charts!! 🙂

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