1 //Class c.protovis.LineChart2 : AreaChart2 2 //This is the custom wrapper class for protovis area/line charts 3 4 //Constructor 5 wso2vis.s.chart.protovis.LineChart2 = function(div, chartTitle, chartDesc) { 6 wso2vis.s.chart.protovis.AreaChart2.call(this, div, chartTitle, chartDesc); 7 } 8 9 // this makes c.protovis.LineChart2.prototype inherit from ProtovisStakedAreaChart 10 wso2vis.extend(wso2vis.s.chart.protovis.LineChart2, wso2vis.s.chart.protovis.AreaChart2); 11 12 //Public function load 13 //Loads the chart inside the given HTML element 14 wso2vis.s.chart.protovis.LineChart2.prototype.load = function (w, h) { 15 if ( w !== undefined ) { 16 this.width(w); 17 } 18 if ( h !== undefined ) { 19 this.height(h); 20 } 21 22 var thisObject = this; 23 24 this.x = pv.Scale.linear(0, 4).range(0, this.width()); 25 this.y = pv.Scale.linear(0, 50).range(0, this.height()*0.9); 26 this.customXticks = []; 27 28 this.vis = new pv.Panel() 29 .canvas(function() { return thisObject.divEl(); }) 30 .width(function() { return thisObject.width(); }) 31 .height(function() { return thisObject.height(); }) 32 .def("i", -1) 33 .bottom(160) 34 .top(0) 35 .left(30) 36 .right(60); 37 38 var panel = this.vis.add(pv.Panel) 39 .top(function() { return (thisObject.height() * (1 - thisObject.titleSpacing())); }) 40 .height(function() { return (thisObject.height() * thisObject.titleSpacing()); }) 41 .data(function() { return thisObject.getData(thisObject); }); 42 43 var line = panel.add(pv.Line) 44 .data(function(a) { return a; }) 45 .left(function(d) { return thisObject.x(d.x); }) 46 .bottom(function(d) { return thisObject.y(d.y); }) 47 .lineWidth(3) 48 .title(function() { 49 var dataObj = thisObject.traverseToDataField(thisObject.data, thisObject.dataField()); 50 if( dataObj instanceof Array ) { 51 return thisObject.onTooltip(dataObj[this.parent.index]); 52 } 53 else { 54 return thisObject.onTooltip(dataObj); 55 } 56 }) 57 .event("click", function() { 58 var dataObj = thisObject.traverseToDataField(thisObject.data, thisObject.dataField()); 59 if( dataObj instanceof Array ) { 60 return thisObject.onClick(dataObj[this.parent.index]); 61 } 62 else { 63 return thisObject.onClick(dataObj); 64 } 65 }); 66 67 var lineDot = line.add(pv.Dot).title(function(d) { return d.y; }) 68 .visible(function() { return thisObject.marks(); }) 69 .fillStyle(function() { return this.strokeStyle(); }); 70 //.add(pv.Label); 71 72 line.add(pv.Dot).title(function(d) { return d.y; }) 73 .visible(function() { return thisObject.marks(); }) 74 .strokeStyle("#fff") 75 .lineWidth(1); 76 77 /* Legend */ 78 panel.add(pv.Dot) 79 .visible(function() { return thisObject.legend(); }) 80 .right(150) 81 .fillStyle(function() { return line.strokeStyle(); }) 82 .bottom(function() { return (this.parent.index * 15) + 10; }) 83 .size(20) 84 .lineWidth(1) 85 .strokeStyle("#000") 86 .anchor("right").add(pv.Label) 87 .text(function() { return thisObject.getDataLabel(this.parent.index); }); 88 89 panel.add(pv.Rule) 90 .data(function() { return thisObject.customXticks; /*thisObject.x.ticks()*/ }) 91 .visible(function(d) { return (d >= 0); }) 92 .left(function(d) { return (Math.round(thisObject.x(d)) - 0.5); }) 93 .strokeStyle("rgba(128,128,128,.1)") 94 .add(pv.Rule) 95 .bottom(-2) 96 .height(5) 97 .strokeStyle("rgba(128,128,128,1)") 98 .anchor("bottom").add(pv.Label) 99 .textMargin(5) 100 .textBaseline("top") 101 .textAlign("left") 102 .textAngle(Math.PI / 3) 103 /*.text(function(d) { return thisObject.formatDataLabel( thisObject.traverseToDataField(thisObject.traverseToDataField(thisObject.traverseToDataField(thisObject.data, thisObject.dataField())[this.parent.index], thisObject.subDataField())[this.index], thisObject.xLabel()) ) + thisObject.xSuffix(); })*/ 104 .text(function(d) { return thisObject.getXDataLabel(this.parent.index, this.index); }) 105 .font(function() { return thisObject.labelFont(); }) 106 .textStyle("rgba(128,128,128,0.5)"); 107 108 panel.add(pv.Rule) 109 .data(function() { return thisObject.y.ticks(); }) 110 //.visible(function() { return !(this.index % 2); }) 111 .bottom(function(d) { return (Math.round(thisObject.y(d)) - 0.5); }) 112 .strokeStyle("rgba(128,128,128,.2)") 113 .add(pv.Rule) 114 .left(-5) 115 .width(5) 116 .strokeStyle("rgba(128,128,128,1)") 117 .anchor("left").add(pv.Label) 118 .textMargin(10) 119 .text(function(d) {return d.toFixed() + thisObject.ySuffix(); }) 120 .font(function() { return thisObject.labelFont(); }) 121 .textStyle("rgba(128,128,128,0.5)"); 122 123 this.vis.add(pv.Label) 124 .left(this.width() / 2) 125 .visible(function() { return !(thisObject.title() === ""); }) 126 .top(16) 127 .textAlign("center") 128 .text(function() { return thisObject.title(); }) 129 .font(function() { return thisObject.titleFont(); }); 130 }; 131 132 wso2vis.s.chart.protovis.LineChart2.prototype.formatDataLabel = function (label) { 133 134 return label; 135 }; 136 137 wso2vis.s.chart.protovis.LineChart2.prototype.getXDataLabel = function (parentIndex, thisIndex) { 138 139 var thisObject = this; 140 141 var a = thisObject.getDataObject( thisObject.traverseToDataField( thisObject.data, thisObject.dataField() ), [parentIndex] ); 142 143 var b = thisObject.getDataObject( thisObject.traverseToDataField( a, thisObject.subDataField() ), [thisIndex] ); 144 145 var c = thisObject.traverseToDataField( b, thisObject.xLabel() ); 146 147 return thisObject.formatDataLabel( c ) + thisObject.xSuffix(); 148 }; 149 150