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":"€1,611,292,000","sec": "No","$area": 1611292032,"$color":"#182838"}, "id": "Alliance Oil Company Ltd-sdr", "name": "Alliance Oil Company Ltd-sdr" }, { "data":{"cap":"€1,363,680,000","sec": "No","$area": 1363680384,"$color":"#192839"}, "id": "Prosafe Se *", "name": "Prosafe Se *" }, { "data":{"cap":"€20,146,000","sec": "No","$area": 20145544,"$color":"#152F3A"}, "id": "Profilgruppen Ab-b Shs", "name": "Profilgruppen Ab-b Shs" }, { "data":{"cap":"€1,530,655,000","sec": "No","$area": 1530655488,"$color":"#172F4A"}, "id": "Semafo Inc *", "name": "Semafo Inc *" }, { "data":{"cap":"€935,771,000","sec": "No","$area": 935771072,"$color":"#162C4F"}, "id": "Hoganas Ab-b", "name": "Hoganas Ab-b" }, { "data":{"cap":"€135,547,000","sec": "No","$area": 135546976,"$color":"#162C4E"}, "id": "Questerre Energy Corp *", "name": "Questerre Energy Corp *" }, { "data":{"cap":"€2,523,062,000","sec": "No","$area": 2523062272,"$color":"#1B293A"}, "id": "Ssab Ab-A Shares *", "name": "Ssab Ab-A Shares *" }, { "data":{"cap":"€13,240,412,000","sec": "Yes","$area": 13240412160,"$color":"#009900"}, "id": "Seadrill Ltd *", "name": "Seadrill Ltd *" }, { "data":{"cap":"€2,523,062,000","sec": "No","$area": 2523062272,"$color":"#153236"}, "id": "Ssab Ab - B Shares", "name": "Ssab Ab - B Shares" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#183247"}, "id": "Frontline Ltd *", "name": "Frontline Ltd *" }, { "data":{"cap":"€2,471,362,000","sec": "No","$area": 2471362048,"$color":"#182E57"}, "id": "Aker Solutions Asa *", "name": "Aker Solutions Asa *" }, { "data":{"cap":"€678,634,000","sec": "No","$area": 678634240,"$color":"#1D2A36"}, "id": "Archer Ltd *", "name": "Archer Ltd *" }, { "data":{"cap":"€2,002,703,000","sec": "No","$area": 2002703232,"$color":"#192F32"}, "id": "Petroleum Geo-services *", "name": "Petroleum Geo-services *" }, { "data":{"cap":"€98,183,000","sec": "No","$area": 98182656,"$color":"#182B43"}, "id": "Sevan Marine Asa *", "name": "Sevan Marine Asa *" }, { "data":{"cap":"€62,206,681,000","sec": "Yes","$area": 62206681088,"$color":"#009900"}, "id": "Statoil Asa *", "name": "Statoil Asa *" }, { "data":{"cap":"€8,290,699,000","sec": "No","$area": 8290698752,"$color":"#1E2D3B"}, "id": "Norsk Hydro Asa *", "name": "Norsk Hydro Asa *" }, { "data":{"cap":"€129,901,000","sec": "No","$area": 129901248,"$color":"#162854"}, "id": "Be Group Ab", "name": "Be Group Ab" }, { "data":{"cap":"€1,115,929,000","sec": "No","$area": 1115929088,"$color":"#1D2B5F"}, "id": "Dno International Asa *", "name": "Dno International Asa *" }, { "data":{"cap":"€255,542,000","sec": "No","$area": 255542000,"$color":"#192F3E"}, "id": "Nordic Mines Ab", "name": "Nordic Mines Ab" }, { "data":{"cap":"€1,838,923,000","sec": "No","$area": 1838922624,"$color":"#1B2A55"}, "id": "Fred Olsen Energy Asa *", "name": "Fred Olsen Energy Asa *" }, { "data":{"cap":"€2,161,672,000","sec": "No","$area": 2161671936,"$color":"#1E2B47"}, "id": "Lundin Mining Corp-Sdr *", "name": "Lundin Mining Corp-Sdr *" }, { "data":{"cap":"€1,936,566,000","sec": "No","$area": 1936566016,"$color":"#142E41"}, "id": "Tgs Nopec Geophysical Co Asa *", "name": "Tgs Nopec Geophysical Co Asa *" }, { "data":{"cap":"€3,615,005,000","sec": "No","$area": 3615004672,"$color":"#172B59"}, "id": "Boliden Ab", "name": "Boliden Ab" }, { "data":{"cap":"€5,499,610,000","sec": "No","$area": 5499609600,"$color":"#1A2A46"}, "id": "Subsea 7 Sa *", "name": "Subsea 7 Sa *" }, { "data":{"cap":"€5,648,129,000","sec": "No","$area": 5648128512,"$color":"#17324C"}, "id": "Lundin Petroleum Ab", "name": "Lundin Petroleum Ab" }, { "data":{"cap":"€1,044,970,000","sec": "No","$area": 1044969920,"$color":"#1A313D"}, "id": "Enquest Plc *", "name": "Enquest Plc *" }, { "data":{"cap":"€173,573,000","sec": "No","$area": 173573280,"$color":"#153232"}, "id": "Pa Resources Ab", "name": "Pa Resources Ab" }, { "data":{"cap":"€420,981,000","sec": "No","$area": 420980672,"$color":"#152B39"}, "id": "Songa Offshore Se *", "name": "Songa Offshore Se *" } ] }; //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(); }); }