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