Database Reference
In-Depth Information
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.GDP_Per_Capita) {
html += " GDP_Per_Capita: " + data. GDP_Per_Capita;
}
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';
};
}
});
tm.loadJSON(json);
tm.refresh();
}
That's really it. The rest of the sample's layout stays the same. Now open your
browser and go to
http://localhost:5555/treemap.html
.
SuMMARy
In this chapter you learned the basics of using C# and HTML5/Javascript to
create your own visualizations. These make using libraries such as InfoVis and
others for the front end and writing your own web service to supply data to
extend the visualization capabilities available from Microsoft much easier.
