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