- SAP Managed Tags:
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 there! In our previous episode on this mini blog series on how to tweak existing Lumira visualization extensions to fit your demands, we covered the topic of adding tooltips to an extension. In conjunction with that, in this blog we will cover how to add data labels to your data points!
Data labels, like tooltips and other attributes, are available out-of-the-box in native Lumira visualization charts, but they don't come by default with extensions. However, like all other attributes, it is very much possible to add them to a custom Lumira visualization extension. For code clarity, we will add the data label code at the end of everything else (rendering all chart elements, even tooltips).
Let's begin!
Step 1: Assign toggle object
For good user experience, we want to give the end user the option of being able to see or hide data labels, depending on the situation. To enable this feature, we can use a toggle button to toggle the showing and hiding of data labels. This can be a relevant object like a checkbox. We will assign the "show" condition to a variable, 'showLabels'.
var showLabels = false; |
Step 2: Append toggle object
Now we shall add this object as a checkbox on to the canvas. It will be appended as a foreign object or element.
Note: Please be careful when adding foreign objects to custom Lumira charts. Append them to a 'div' and NOT the 'body' element. The 'body' is the <body> tag of Lumira's universal DOM structure, and this will cause conflicts in rendering the chart in Lumira. Instead, append it to a random 'div'.
vis.append("foreignObject") .attr("width", 200) .attr("height", 100) .attr("x", width - (margin.left * 3.5)) //your custom position for the checkbox on your canvas .append("xhtml:div") //append foreign object to div, NOT body .html("<form> //add checkbox as an HTML form element <input type=checkbox id=sap_viz_ext_bubblechart_check style=display:inline-block/> <tspan font-weight=\"bold\" font-family=\"Sans-serif\" font-size=\"12px\"> SHOW DATA LABELS </tspan> </form>") .on("click", function(d) { //add checkbox toggle function code }); |
What we have as a result is the following object on the top right corner of the chart.
Step 3: Function on show event
Now inside the .on("click", function(d) { }); add the following code snippet
showLabels = !showLabels;
if(showLabels) {
}
else {
}
What we're doing here is that, we are defining the conditions (whether or not the checkbox is checked), so that we can define what happens under these conditions. For this purpose, we use an if-else condition for when the labels are toggled on and off.
In the if (showLabels) { } section, add the following code snippet:
//use the same ID assigned to the checkbox element
$("#sap_viz_ext_bubblechart_check").prop('checked', true);
bubbles.append("text")
.attr("text-anchor", "middle")
.attr("dx", function(d) {
return x(d[measure1]); //X position for data label
})
.attr("dy", function(d) {
return y(d[measure2]); //Y position for data label
})
.attr("font-size", "12px")
.attr("font-family", "Sans-Serif")
.text(function(d) {
return d[dim]; //text to display as data label
});
In the else { } section, add the following code snippet:
//use the same ID assigned to the checkbox element
$("#sap_viz_ext_bubblechart_check").prop('checked', false);
bubbles.selectAll("text").remove();
We get our final result:
On checking the checkbox:
On unchecking the checkbox:
You can go ahead and try it too!
Stay tuned for our next episode: Adding images!
Happy data labelling!! :smile:
