Database Reference
In-Depth Information
to create the JSON. You copy it manually, but it could just as easily be used
to supply server-side code to create the JSON.
You will need the iles available from this topic's page on Wiley.com called
Chapter12_Treemap.js
. All the editing can happen in any text editor, such
as Notepad++.
You will need the following:
uu
Base.css
uu
Excanvas.js
uu
Jit.js
uu
Treemap.css
uu
Treemap.html
uu
Treemap.js
Treemap.html
simply references the appropriate JavaScript files.
Treemap.js
contains the active code. The first section is the function
init()
,
which is fired when the page is open. The code
var json={}
is the data
piece—you will paste the code you get from SQL over the
{}
.
The next call is to initialize the
treemap
object:
var tm = new $jit.TM.Squarified({
//where to inject the visualization
injectInto: 'infovis',
//parent box title heights
titleHeight: 15,
//enable animations
animate: animate,
//box offsets
offset: 1,
//Attach left and right click events
Events: {
enable: true,
onClick: function(node) {
if(node) tm.enter(node);
},
onRightClick: function() {
tm.out();
}
},
duration: 1000,
//Enable tips
Tips: {
