Using Helical Insight map customization, a user can add information to a tool tip. On hovering, a user can see the customized information.
The above tooltip customization is done using Helical Insight Adhoc. Once the default geographical map is generated, inject a javascript code to generate intended output. To know more about how to generate a default geographical map click here
Note: Javascript code contains columns used for the current report. If you are using same javascript code, please change the column name to suit your report.
Javascript :
hi_container.set("postExecution", function() {
d3.selectAll("circle").on("mouseover", function(d) {
var xPosition = d3.event.pageX;
var yPosition = d3.event.pageY;
d3.select(".HI-Core-tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px");
var insidevar = setcontent(d);
if (insidevar) {
d3.selectAll(".HI-Core-tooltip").style("display", "hidden").html(insidevar);
d3.select(".HI-Core-tooltip").style("display", "block");
}
function setcontent(content) {
var text;
// console.log(content);
text = "<table>";
var lengthOfParentArray = content.parentArray.length;
if (lengthOfParentArray === 0) {
text += "<tr><td>" + content.key + "</td></tr>";
} else if (lengthOfParentArray > 1) {
for (var i = 1; i < lengthOfParentArray; i++) {
text += "<tr><td>" + content.parentArray[i].key + "</td><td>" + content.parentArray[i].keyvalue + "</td></tr>";
}
text += "<tr><td>" + content.key + "</td><td>" + content.keyvalue + "</td></tr>";
} else {
text += "<tr><td>" + content.key + "</td><td>" + content.keyvalue + "</td></tr>";
}
while (content.key != "Total Travel") {
content = content.children[0];
}
text += "<tr><td>Total Travel</td><td>" + content.keyvalue + "</td></tr>";
var temp = content.parent.children[1];
text += "<tr><td>Travel Cost</td><td>" + temp.keyvalue + "</td></tr>";
text += "</table>";
return text;
}
});
});