var labelType, useGradients, nativeTextSupport, animate;
(function() {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();
var Log = {
elem: false,
write: function(text){
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
}
};
function init(){
//init data
var json = {
"children": [
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#143050"},
"id": "Petrofina Sa Cp 46 - Auc *",
"name": "Petrofina Sa Cp 46 - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1E2960"},
"id": "Nyrstar - Strip Vvpr *",
"name": "Nyrstar - Strip Vvpr *"
},
{
"data":{"cap":"€1,998,897,000","sec": "No","$area": 1998897024,"$color":"#1C2C3C"},
"id": "Fluxys-d",
"name": "Fluxys-d"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#192C48"},
"id": "Petrofina Sa Cp 44 - Auc *",
"name": "Petrofina Sa Cp 44 - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#162F35"},
"id": "Total Sa-strip Vvpr *",
"name": "Total Sa-strip Vvpr *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#15285C"},
"id": "Roton Cie Indust & Finan-auc *",
"name": "Roton Cie Indust & Finan-auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#192C3C"},
"id": "Petrofina Sa Cp 40 - Auc *",
"name": "Petrofina Sa Cp 40 - Auc *"
},
{
"data":{"cap":"","sec": "Yes","$area": 1,"$color":"#009900"},
"id": "Imperial Oil-ctfs *",
"name": "Imperial Oil-ctfs *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#192E61"},
"id": "Charbonnages Du Hasard-auc *",
"name": "Charbonnages Du Hasard-auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1C2E5A"},
"id": "Petrofina Sa Cp 37 - Auc *",
"name": "Petrofina Sa Cp 37 - Auc *"
},
{
"data":{"cap":"€163,359,572,000","sec": "No","$area": 163359571968,"$color":"#15325F"},
"id": "Chevron Corporation *",
"name": "Chevron Corporation *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#173164"},
"id": "Cokeries D'anderlues - Auc *",
"name": "Cokeries D'anderlues - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#172D3D"},
"id": "Scr-sibelco Nv - Auc *",
"name": "Scr-sibelco Nv - Auc *"
},
{
"data":{"cap":"€86,588,391,000","sec": "Yes","$area": 86588391424,"$color":"#009900"},
"id": "Rio Tinto-Ctfs *",
"name": "Rio Tinto-Ctfs *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1A2E38"},
"id": "Messer Belgium - Auc *",
"name": "Messer Belgium - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1C2A34"},
"id": "Grange Resources Ltd - Auc *",
"name": "Grange Resources Ltd - Auc *"
},
{
"data":{"cap":"","sec": "Yes","$area": 1,"$color":"#009900"},
"id": "Harmony Gold Mining-ctfs *",
"name": "Harmony Gold Mining-ctfs *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1D324D"},
"id": "Forges De Clabecq - Auc *",
"name": "Forges De Clabecq - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1A2A57"},
"id": "Charbonnages Bois Du Luc-auc *",
"name": "Charbonnages Bois Du Luc-auc *"
},
{
"data":{"cap":"","sec": "Yes","$area": 1,"$color":"#009900"},
"id": "Gold Fields Limited-idr *",
"name": "Gold Fields Limited-idr *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1D2845"},
"id": "Mines D'or De Kilo-mito-auc *",
"name": "Mines D'or De Kilo-mito-auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#162953"},
"id": "Charbonnages Bois Du Luc-auc *",
"name": "Charbonnages Bois Du Luc-auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1E314A"},
"id": "Drdgold Ltd - Cert *",
"name": "Drdgold Ltd - Cert *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1B2E44"},
"id": "Petrofina Sa Cp 2 - Auc *",
"name": "Petrofina Sa Cp 2 - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#192943"},
"id": "Avgold Limited-idr - Auc *",
"name": "Avgold Limited-idr - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1B305A"},
"id": "Petrofina Sa Cp 59 - Auc *",
"name": "Petrofina Sa Cp 59 - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1A3040"},
"id": "Barrack Mines- Auc *",
"name": "Barrack Mines- Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1D2949"},
"id": "Petrofina Sa Cp 81 - Auc *",
"name": "Petrofina Sa Cp 81 - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#153148"},
"id": "Free State Cons Gold-cer-auc *",
"name": "Free State Cons Gold-cer-auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1A3238"},
"id": "Petrofina Sa Cp 79 - Auc *",
"name": "Petrofina Sa Cp 79 - Auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#142F4B"},
"id": "Blyvooritzicht Gold-idr-auc *",
"name": "Blyvooritzicht Gold-idr-auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#172A36"},
"id": "Petrofina Sa - Auc *",
"name": "Petrofina Sa - Auc *"
},
{
"data":{"cap":"","sec": "Yes","$area": 1,"$color":"#009900"},
"id": "Harmony Gold Mining-cfts-auc *",
"name": "Harmony Gold Mining-cfts-auc *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#143055"},
"id": "Geyser *",
"name": "Geyser *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1A2F5F"},
"id": "Orange Free State Invests *",
"name": "Orange Free State Invests *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#192C50"},
"id": "Grange Resources Ltd-idrs *",
"name": "Grange Resources Ltd-idrs *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#183039"},
"id": "Stilfontein Gold-ctfs - Auc *",
"name": "Stilfontein Gold-ctfs - Auc *"
},
{
"data":{"cap":"€95,141,052,000","sec": "Yes","$area": 95141052416,"$color":"#009900"},
"id": "Total Sa *",
"name": "Total Sa *"
},
{
"data":{"cap":"","sec": "No","$area": 1,"$color":"#1D3033"},
"id": "Charbonnages Du Bonnier *",
"name": "Charbonnages Du Bonnier *"
},
{
"data":{"cap":"€1,186,757,000","sec": "No","$area": 1186757376,"$color":"#162C52"},
"id": "Nyrstar",
"name": "Nyrstar"
}
]
};
//end
//init TreeMap
var tm = new $jit.TM.Squarified({
//where to inject the visualization
injectInto: 'infovis',
//parent box title heights
titleHeight: 0,
//enable animations
animate: false,
//box offsets
offset: 1,
//Attach left and right click events
Events: { enable: false },
duration: 1000,
//Enable tips
Tips: {
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 = "" + node.name
+ "
";
var data = node.data;
if(data.cap) {
html += "Market Cap: " + data.cap;
}
if(data.sec) {
html += "
SEC Coverage: " + data.sec;
}
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){
// if (node.data.$width > 10) {
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();
//end
//add events to radio buttons
var sq = $jit.id('r-sq'),
st = $jit.id('r-st'),
sd = $jit.id('r-sd');
var util = $jit.util;
util.addEvent(sq, 'change', function() {
if(!sq.checked) return;
util.extend(tm, new $jit.Layouts.TM.Squarified);
tm.refresh();
});
util.addEvent(st, 'change', function() {
if(!st.checked) return;
util.extend(tm, new $jit.Layouts.TM.Strip);
tm.layout.orientation = "v";
tm.refresh();
});
util.addEvent(sd, 'change', function() {
if(!sd.checked) return;
util.extend(tm, new $jit.Layouts.TM.SliceAndDice);
tm.layout.orientation = "v";
tm.refresh();
});
//add event to the back button
var back = $jit.id('back');
$jit.util.addEvent(back, 'click', function() {
tm.out();
});
}