1 //Class c.infovis.HyperTree : Chart 2 //This is the custom wrapper class for protovis bar charts 3 4 //Constructor 5 wso2vis.s.chart.infovis.HyperTree = function(divElementLog, canvas, chartTitle, chartDesc) { 6 wso2vis.s.chart.Chart.call(this, canvas, chartTitle, chartDesc); 7 8 /* @private */ 9 this.divElementLog = divElementLog; 10 this.canvas = canvas; 11 this.ht = null; 12 this.y = null; 13 this.x = null; 14 } 15 16 // this makes c.infovis.HyperTree.prototype inherits 17 // from Chart.prototype 18 wso2vis.extend(wso2vis.s.chart.infovis.HyperTree, wso2vis.s.chart.Chart); 19 20 wso2vis.s.chart.infovis.HyperTree.prototype 21 .property("dataField") 22 .property("dataValue") 23 .property("dataLabel") 24 .property("ySuffix") 25 .property("xSuffix"); 26 27 28 function addEvent(obj, type, fn) { 29 if (obj.addEventListener) obj.addEventListener(type, fn, false); 30 else obj.attachEvent('on' + type, fn); 31 }; 32 33 //Public function loadChart 34 //Loads the chart inside the given HTML element 35 36 wso2vis.s.chart.infovis.HyperTree.prototype.load = function (w, h) { 37 38 if (w !== undefined) { 39 this.width(w); 40 } 41 if (h !== undefined) { 42 this.height(h); 43 } 44 45 that = this; 46 var Log = { 47 elem: false, 48 write: function(text){ 49 if (!this.elem) 50 this.elem = that.divElementLog; 51 this.elem.innerHTML = text; 52 this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px'; 53 } 54 }; 55 56 var canvas = new Canvas('mycanvas', { 57 'injectInto': that.canvas, 58 'width': that.width(), 59 'height': that.height(), 60 'backgroundColor': '#1a1a1a' 61 }); 62 63 //end 64 var style = document.getElementById('mycanvas').style; 65 style.marginLeft = style.marginTop = "25px"; 66 //init Hypertree 67 this.ht = new Hypertree(canvas, { 68 //Change node and edge styles such as 69 //color, width and dimensions. 70 Node: { 71 dim: 9, 72 color: "#f00" 73 }, 74 75 Edge: { 76 lineWidth: 2, 77 color: "#024" 78 }, 79 80 onBeforeCompute: function(node){ 81 //Log.write("centering"); 82 }, 83 //Attach event handlers and add text to the 84 //labels. This method is only triggered on label 85 //creation 86 onCreateLabel: function(domElement, node){ 87 domElement.innerHTML = node.name; 88 addEvent(domElement, 'click', function () { 89 that.ht.onClick(node.id); 90 }); 91 }, 92 //Change node styles when labels are placed 93 //or moved. 94 onPlaceLabel: function(domElement, node){ 95 var style = domElement.style; 96 style.display = ''; 97 style.cursor = 'pointer'; 98 if (node._depth <= 1) { 99 style.fontSize = "0.8em"; 100 style.color = "#000"; 101 102 } else if(node._depth == 2){ 103 style.fontSize = "0.7em"; 104 style.color = "#011"; 105 106 } else { 107 style.display = 'none'; 108 } 109 110 var left = parseInt(style.left); 111 var w = domElement.offsetWidth; 112 style.left = (left - w / 2) + 'px'; 113 }, 114 115 onAfterCompute: function(){ 116 // Log.write("done"); 117 } 118 }); 119 120 }; 121 122 123 wso2vis.s.chart.infovis.HyperTree.prototype.populateData = function (thisObject) { 124 // Space Tree can only be drawn with a JSON Tree i.e. with JSON nodes 125 var _dataField = thisObject.traverseToDataField(thisObject.data, thisObject.dataField()); 126 if ((_dataField instanceof Array) && (_dataField.length < 1)) { 127 return false; 128 } 129 var ht = thisObject.ht 130 var lbs = ht.fx.labels; 131 for (label in lbs) { 132 if (lbs[label]) { 133 lbs[label].parentNode.removeChild(lbs[label]); 134 } 135 } 136 ht.fx.labels = {}; 137 thisObject.ht.loadJSON(_dataField[0]); 138 return true; 139 140 }; 141 142 143 144 wso2vis.s.chart.infovis.HyperTree.prototype.update = function () { 145 var ht = this.ht; 146 if (this.populateData(this)) { 147 ht.refresh(); 148 ht.controller.onAfterCompute(); 149 150 if(this.tooltip() === true) { 151 tooltip.init(); 152 } 153 } 154 }; 155 156