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":"€236,010,000","sec": "No","$area": 236010384,"$color":"#162C32"}, "id": "Ruukki Group Oyj", "name": "Ruukki Group Oyj" }, { "data":{"cap":"€992,304,000","sec": "No","$area": 992303872,"$color":"#1C2A3E"}, "id": "Talvivaara Mining Co Plc *", "name": "Talvivaara Mining Co Plc *" }, { "data":{"cap":"€2,193,534,000","sec": "No","$area": 2193533696,"$color":"#1C2B57"}, "id": "Neste Oil Oyj", "name": "Neste Oil Oyj" }, { "data":{"cap":"€134,369,000","sec": "No","$area": 134368592,"$color":"#182E4E"}, "id": "Nordic Aluminium Oyj", "name": "Nordic Aluminium Oyj" }, { "data":{"cap":"€1,212,066,000","sec": "No","$area": 1212066176,"$color":"#1D2A59"}, "id": "Rautaruukki Oyj", "name": "Rautaruukki Oyj" }, { "data":{"cap":"€1,158,509,000","sec": "No","$area": 1158508672,"$color":"#162A44"}, "id": "Outokumpu Oyj", "name": "Outokumpu Oyj" } ] }; //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 = "