1. iande
  2. jqplot

Commits

Chris Leonello  committed 15d177d

Still under heavy code reorganization. These last couple of checkins shouldn't be used, they are for my historical reference only.

  • Participants
  • Parent commits 0db658d
  • Branches default

Comments (0)

Files changed (5)

File jqplot.axisRenderers.js

View file
             var dim=0;
             var temp;
             
-            this._elem = $('<div class="jqplot-axis jqplot-'+this.name+'" style="position:absolute;"
-></div>');
+            this._elem = $('<div class="jqplot-axis jqplot-'+this.name+'" style="position:absolute;"></div>');
             //for (var s in axis.style) $(axis._elem).css(s, axis.style[s]);
     
             if (this.showTicks) {
                 }
             }
             if (this.name == 'xaxis') this._elem.css({'height':dim+'px', left:'0px', bottom:'0px'});
-            else if (this.name == 'x2axis') this._elem.css({'height':dim+'px', left:'0px', top:'0px'
-});
-            else if (this.name == 'yaxis') this._elem.css({'width':dim+'px', left:'0px', top:'0px'})
-;
-            else if (this.name == 'y2axis') this._elem.css({'width':dim+'px', right:'0px', top:'0px'
-});
+            else if (this.name == 'x2axis') this._elem.css({'height':dim+'px', left:'0px', top:'0px'});
+            else if (this.name == 'yaxis') this._elem.css({'width':dim+'px', left:'0px', top:'0px'});
+            else if (this.name == 'y2axis') this._elem.css({'width':dim+'px', right:'0px', top:'0px'});
         }  
     };
     
             //     var pox = i*15+'px';
             //     switch (name) {
             //         case 'xaxis':
-            //             t._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'}
-;
+            //             t._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
             //             break;
             //         case 'x2axis':
-            //             t._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'
-};
+            //             t._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
             //             break;
             //         case 'yaxis':
-            //             t._styles = {position:'absolute', right:'0px', top:pox, paddingRight:'10px'
-};
+            //             t._styles = {position:'absolute', right:'0px', top:pox, paddingRight:'10px'};
             //             break;
             //         case 'y2axis':
-            //             t._styles = {position:'absolute', left:'0px', top:pox, paddingLeft:'10px'
-};
+            //             t._styles = {position:'absolute', left:'0px', top:pox, paddingLeft:'10px'};
             //             break;
             //     }
             // }
         }
         
         this._offsets = offsets;
-        // pixellength will be + for x axes and - for y axes becasue pixels always measured from top
- left.
+        // pixellength will be + for x axes and - for y axes becasue pixels always measured from top left.
         var pixellength = offmax - offmin;
         var unitlength = max - min;
         
-        // point to unit and unit to point conversions references to Plot DOM element top left corner
-.
+        // point to unit and unit to point conversions references to Plot DOM element top left corner.
         this.p2u = function(p){
             return (p - offmin) * unitlength / pixellength + min;
         };
             return (u - min) * pixellength / unitlength + offmin;
         };
         
-        // point to unit and unit to point conversions references to Grid DOM element top left corner
-.
-        this.grid_p2u = function(p){
+        // point to unit and unit to point conversions references to Grid DOM element top left corner.
+        this.series_p2u = function(p){
             return p * unitlength / pixellength + min;
         };
         
-        this.grid_u2p = function(u){
-            return (u - min) * pixellength / unitlength;
-        };
+        if (this.name == 'xaxis' || this.name == 'x2axis'){
+            this.series_u2p = function(u){
+                return (u - min) * pixellength / unitlength;
+            };
+        }
+        
+        else {
+            this.series_u2p = function(u){
+                return (u - max) * pixellength / unitlength;
+            };
+        }
         
         if (this.show) {
             if (this.name == 'xaxis' || this.name == 'x2axis') {
         
         // if tick
         
-        // Ticks should have been already specified by the user or set by the line renderer.  Since 
-we
+        // Ticks should have been already specified by the user or set by the line renderer.  Since we
         // don't have access to the series, there's not much to do if we don't already have ticks.
         if (ticks.length) {
             this.numberTicks =ticks.length;
                         t._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
                         break;
                     case 'x2axis':
-                        t._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'
-};
+                        t._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
                         break;
                     case 'yaxis':
-                        t._styles = {position:'absolute', right:'0px', top:pox, paddingRight:'10px'}
-;
+                        t._styles = {position:'absolute', right:'0px', top:pox, paddingRight:'10px'};
                         break;
                     case 'y2axis':
                         t._styles = {position:'absolute', left:'0px', top:pox, paddingLeft:'10px'};

File jqplot.axisTicks.js

-(function($) {    
-    $.jqplot.AxisTick = function(options) {
-        $.jqplot.ElemContainer.call(this);
-        this.mark = 'outside';
-        this.showMark = true;
-        this.isMinorTick = false;
-        this.size = 4;
-        this.markSize = 4;
-        this.show = true;
-        this.showLabel = true;
-        this.label = '';
-        this.value = null;
-        this._styles = {};
-        this.formatter = $.jqplot.sprintf;
-        this.formatString;
-        this.fontFamily='';
-        this.fontSize = '0.75em';
-        this.textColor = '';
-        this._elem;
-        
-        $.extend(true, this, options);
-    };
-    
-    $.jqplot.AxisTick.prototype = new $.jqplot.ElemContainer();
-    $.jqplot.AxisTick.prototype.constructor = $.jqplot.AxisTick;
-    
-    $.jqplot.AxisTick.prototype.setTick = function(value, axisName, isMinor) {
-        this.value = value;
-        var pox = '15px';
-        switch (axisName) {
-            case 'xaxis':
-                this._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
-                break;
-            case 'x2axis':
-                this._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
-                break;
-            case 'yaxis':
-                this._styles = {position:'absolute', left:'0px', top:pox, paddingRight:'10px'};
-                break;
-            case 'y2axis':
-                this._styles = {position:'absolute', right:'0px', top:pox, paddingLeft:'10px'};
-                break;
-        }
-        if (isMinor) this.isMinorTick = true;
-        return this;
-    };
-    
-    $.jqplot.AxisTick.prototype.draw = function() {
-        if (!this.label) this.label = this.formatter(this.formatString, this.value);
-        this._elem = $('<div class="jqplot-axis-tick">'+this.label+'</div>');
-        for (var s in this._styles) {
-            this._elem.css(s, this._styles[s]);
-        }
-        if (this.fontFamily) this._elem.css('font-family', this.fontFamily);
-        if (this.fontSize) this._elem.css('font-size', this.fontSize);
-        if (this.textColor) this._elem.css('color', this.textColor);
-        return this._elem;
-    }
-})(jQuery);

File jqplot.canvasGridRenderer.js

View file
     }
     
     // called with context of Grid.
-    $.jqplot.canvasGridRenderer.prototype.createElements = function() {
+    $.jqplot.canvasGridRenderer.prototype.createElement = function() {
         var elem = document.createElement('canvas');
         var w = this._plotDimensions.width;
         var h = this._plotDimensions.height;

File jqplot.lineRenderer.js

View file
 (function($) {
     $.jqplot.lineRenderer = function(){
-        this._ctx;
     };
     
     $.jqplot.lineRenderer.prototype.init = function(options) {
         $.extend(true, this, options);
         this.markerOptions = {color: this.color};
-        this.marker.init(this.markerOptions);
+        // this.marker.init(this.markerOptions);
     }
 
-    $.jqplot.lineRenderer.prototype.draw = function(series, grid, ctx) {
+    $.jqplot.lineRenderer.prototype.draw = function(ctx) {
         var i;
-        var xaxis = series.xaxis;
-        var yaxis = series.yaxis;
-        var d = series.data;
-        var xp = series._xaxis.series_u2p;
-        var yp = series._yaxis.series_u2p;
+        var xaxis = this.xaxis;
+        var yaxis = this.yaxis;
+        var d = this.data;
+        var xp = this._xaxis.series_u2p;
+        var yp = this._yaxis.series_u2p;
         var pointx, pointy;
         ctx.save();
         if (this.showLine) {
             ctx.lineWidth = this.lineWidth;
             ctx.strokeStyle = this.color;
             // recalculate the grid data
-            series.gridData = [];
-            series.gridData.push([xp.call(series._xaxis, series.data[0][0]), yp.call(series._yaxis, series.data[0][1])]);
-            ctx.moveTo(series.gridData[0][0], series.gridData[0][1]);
-            for (var i=1; i<series.data.length; i++) {
-                series.gridData.push([xp.call(series._xaxis, series.data[i][0]), yp.call(series._yaxis, series.data[i][1])]);
-                ctx.lineTo(series.gridData[i][0], series.gridData[i][1]);
+            this.gridData = [];
+            this.gridData.push([xp.call(this._xaxis, this.data[0][0]), yp.call(this._yaxis, this.data[0][1])]);
+            ctx.moveTo(this.gridData[0][0], this.gridData[0][1]);
+            for (var i=1; i<this.data.length; i++) {
+                this.gridData.push([xp.call(this._xaxis, this.data[i][0]), yp.call(this._yaxis, this.data[i][1])]);
+                ctx.lineTo(this.gridData[i][0], this.gridData[i][1]);
             }
             ctx.stroke();
         
                     ctx.translate(Math.cos(this.shadowAngle*Math.PI/180)*this.shadowOffset, Math.sin(this.shadowAngle*Math.PI/180)*this.shadowOffset);
                     ctx.beginPath();
                     ctx.strokeStyle = 'rgba(0,0,0,'+this.shadowAlpha+')';
-                    ctx.moveTo(series.gridData[0][0], series.gridData[0][1]);
-                    for (var i=1; i<series.data.length; i++) {
-                        // pointx = xp.call(series._xaxis, series.data[i][0]);
-                        // pointy = yp.call(series._yaxis, series.data[i][1]);
-                        ctx.lineTo(series.gridData[i][0], series.gridData[i][1]);
+                    ctx.moveTo(this.gridData[0][0], this.gridData[0][1]);
+                    for (var i=1; i<this.data.length; i++) {
+                        // pointx = xp.call(this._xaxis, this.data[i][0]);
+                        // pointy = yp.call(this._yaxis, this.data[i][1]);
+                        ctx.lineTo(this.gridData[i][0], this.gridData[i][1]);
                     }
                     ctx.stroke();
                 }
         }
         
         // now draw the markers
-        if (this.marker.show) {
-            for (i=0; i<series.gridData.length; i++) {
-                this.marker.draw(series.gridData[i][0], series.gridData[i][1], ctx);
-            }
-        }
+        // if (this.marker.show) {
+        //     for (i=0; i<this.gridData.length; i++) {
+        //         this.marker.draw(this.gridData[i][0], this.gridData[i][1], ctx);
+        //     }
+        // }
         
         ctx.restore();
     };

File jquery.jqplot.js

View file
         this.renderer.init(this.rendererOptions);
     }
     
+    Series.prototype.draw = function(sctx) {
+        this.renderer.draw.call(this, sctx);
+    }
+    
     /* 
         Class: Grid
         (Private) Object representing the grid on which the plot is drawn.  The grid in this
     
     function SeriesCanvas() {
         $.jqplot.ElemContainer.call(this);
+        this._ctx;
     };
     
     SeriesCanvas.prototype = new $.jqplot.ElemContainer();
     SeriesCanvas.prototype.constructor = SeriesCanvas;
+    
+    SeriesCanvas.prototype.createElement = function(offsets) {
+        this._offsets = offsets;
+        var elem = document.createElement('canvas');
+        var w = this._plotDimensions.width - this._offsets.left - this._offsets.right;
+        var h = this._plotDimensions.height - this._offsets.top - this._offsets.bottom;
+        elem.width = this._plotDimensions.width - this._offsets.left - this._offsets.right;
+        elem.height = this._plotDimensions.height - this._offsets.top - this._offsets.bottom;
+        if ($.browser.msie) // excanvas hack
+            elem = window.G_vmlCanvasManager.initElement(elem);
+        this._elem = $(elem);
+        this._elem.css({ position: 'absolute', left: this._offsets.left, top: this._offsets.top });
+        return this._elem;
+    };
+    
+    SeriesCanvas.prototype.setContext = function() {
+        this._ctx = this._elem.get(0).getContext("2d");
+        return this._ctx;
+    }
 
     
     /* 
         this.axes = {xaxis: new Axis('xaxis'), yaxis: new Axis('yaxis'), x2axis: new Axis('x2axis'), y2axis: new Axis('y2axis')};
         this.grid = new Grid();
         this.legend = new Legend();
-        this.seriesView = new $.jqplot.canvasSeriesView();
-        this.overlayView = new $.jqplot.canvasOverlayView();
+        this.seriesCanvas = new SeriesCanvas();
         // Can get these through the representative ojects.
         // // handle to the grid canvas drawing context.  Holds the axes, grid, and labels.
         // // Stuff that should be rendered only at initial plot drawing.
             this._plotDimensions.width = this._width;
             this.grid._plotDimensions = this._plotDimensions;
             this.title._plotDimensions = this._plotDimensions;
+            this.seriesCanvas._plotDimensions = this._plotDimensions;
             if (this._height <=0 || this._width <=0) throw "Canvas dimensions <=0";
             
             // get a handle to the plot object from the target to help with events.
             
             this.target.append(this.grid.createElement(this._gridOffsets));
             this.grid.draw();
-            this.target.append(this.)
+            this.target.append(this.seriesCanvas.createElement(this._gridOffsets));
+            var sctx = this.seriesCanvas.setContext();
+            
+            for (var i=0; i<this.series.length; i++) {
+                this.series[i].draw(sctx);
+            }
             // // the series share one element and drawing context.
             // this.target.append(this.createSeriesContext(););
             // // grid and series won't need to be packed since they are the last elements to be drawn.