Database Reference
In-Depth Information
enable: true,
//add positioning offsets
offsetX: 20,
offsetY: 20,
//implement the onShow method to
//add content to the tooltip when a node
//is hovered
onShow: function(tip, node, isLeaf, domElement) {
var html = "<div class=\"tip-title\">" + node.name
+ "</div><div class=\"tip-text\">";
var data = node.data;
if(data.playcount) {
html += "play count: " + data.playcount;
}
if(data.image) {
html += "<img src=\""+ data.image +"\" class=\"album\" />";
}
tip.innerHTML = html;
}
},
//Add the name of the node in the correponding label
//This method is called once, on label creation.
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
var style = domElement.style;
style.display = '';
style.border = '1px solid transparent';
domElement.onmouseover = function() {
style.border = '1px solid #9FD4FF';
};
domElement.onmouseout = function() {
style.border = '1px solid transparent';
};
}
});
The parameters are the name of the div to insert the visualization into, the
height, the title, whether or not to animate transitions, and how to enable left-
and right-clicks. All of these settings are available from the InfoVis examples
at
http://philogb.github.com/jit/static/v20/Jit/Examples/Treemap/
example1.html
.
It's a two-step process to generate the JSON you will paste in. The first step
is a function that creates the individual child nodes, as follows:
ALTER FUNCTION dbo.fn_JSONCountryTree (@RegionName varchar(255))
RETURNS varchar(max)
AS
BEGIN
