Chris Leonello avatar Chris Leonello committed 46c0abb

Got grid canvas working and drawing all 4 axes.
Slight adjustment needed for dual axes grid lines, don't always exactly overlap.

Comments (0)

Files changed (2)

     <script language="javascript" type="text/javascript" src="jqplot.js"></script>
     <script language="javascript">
 		$(document).ready(function(){
-			chart = $.jqplot('chartdiv', [[[1,1],[2,4], [3,5], [4,5], [6,12]]])
+			chart = $.jqplot('chartdiv', [[[1,1],[2,4], [3,5], [4,5], [6,12]], [[32,18],[46,14],[79,55]]], {series:[{}, {xaxis:'x2axis', yaxis:'y2axis'}]})
 		});
 		</script>
 		<style type="text/css">
 		.jqplot {
-			border: 1px solid gray;
+			border: 0px solid gray;
 		}
 		</style>
  </head>
         this.gridlines;
         this.background;
         this.border;
-        this.renderer = 'defaultGridRenderer';
         this.width;
         this.height;
         this.top;
         this.left;
+        this.width;
+        this.height;
         
     };
     
         this.defaults = {
             pointsDefaults: {},
             axesDefaults: {},
-            axes:{xaxis:{}, yaxis:{}, x2axis:{}, y2axis:{}},
-            grid:{},
+            axes: {xaxis:{}, yaxis:[], x2axis:{}, y2axis:{}},
             title: {},
             seriesDefaults: {},
             series:[]
         this.width = null;
         this.height = null;
         this.gridOffsets = {top:10, right:10, bottom:10, left:10};
+        this.equalXTicks = true;
+        this.equalYTicks = true;
             
         this.init = function(target, data, options) {
             log('in init');
         this.parseOptions = function(options){
             log('in parseOptions');
             var opts = $.extend(true, {}, this.defaults, options);
-            for (var n in opts.axes) {
+            for (var n in this.axes) {
                 // opts.axes[axis] = $.extend(true, {}, opts.axesDefaults, opts.axes[axis]);
                 // for (var p in opts.axes[axis]){
                 //     this.axes[axis][p] = opts.axes[axis][p];
             axis.gridHeight = this.height;
             axis.gridWidth = this.width;
             var db = axis.dataBounds;
-            log(axis);
             if (axis.ticks && axis.ticks.constructor == Array) {
                 var temp = $.extend(true, [], axis.ticks);
                 // if 2-D array, match them up
                 var axis = this.axes[name];
                 axis.renderer.pack.call(axis, this.gridOffsets);
             }
+            this.grid.top = this.gridOffsets.top;
+            this.grid.left = this.gridOffsets.left;
+            this.grid.height = this.height - this.gridOffsets.top - this.gridOffsets.bottom;
+            this.grid.width = this.width - this.gridOffsets.left - this.gridOffsets.right;
+            this.grid.bottom = this.grid.top + this.grid.height;
+            this.grid.right = this.grid.left + this.grid.width;
         }
     
         // create the plot and add it do the dom
         this.draw = function(){
             this.drawTitle();
             this.drawAxes();
+            this.pack();
             this.makeCanvas();
             this.drawGrid();
-            this.pack();
+            this.drawSeries();
         };
     
         // Add the canvas element to the DOM
                     $(axis.elem).width(axis.width);
                 }
             }
+            
+            // if want equal axis ticks, recompute
+            if (this.equalXTicks) {
+                this.axes.x2axis.numberTicks = this.axes.xaxis.numberTicks;
+                this.setAxis('x2axis');
+            } 
+            
+            if (this.equalYTicks) {
+                this.axes.y2axis.numberTicks = this.axes.yaxis.numberTicks;
+                this.setAxis('y2axis');
+            } 
         };
         
         this.drawGrid = function(){
-            
+            // Add the grid onto the grid canvas.  This is the bottom most layer.
+            var ctx = this.gctx;
+            var grid = this.grid;
+            ctx.lineJoin = 'round';
+            ctx.lineCap = 'round';
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = '#cccccc';
+            for (var name in this.axes) {
+                var axis = this.axes[name];
+                if (axis.show) {
+                    log(name);
+                    var ticks = axis.ticks;
+                    switch (name) {
+                        case 'xaxis':
+                            for (var i=0; i<ticks.values.length; i++) {
+                                var pos = Math.round(axis.u2p(ticks.values[i])) + 0.5;
+                                log(pos);
+                                ctx.moveTo(pos, grid.top);
+                                ctx.lineTo(pos, grid.bottom+4);
+                                ctx.stroke();
+                            }
+                            break;
+                        case 'yaxis':
+                            for (var i=0; i<ticks.values.length; i++) {
+                                var pos = Math.round(axis.u2p(ticks.values[i])) + 0.5;
+                                log(pos)
+                                ctx.moveTo(grid.right, pos);
+                                ctx.lineTo(grid.left-4, pos);
+                                ctx.stroke();
+                            }
+                            break;
+                        case 'x2axis':
+                            for (var i=0; i<ticks.values.length; i++) {
+                                var pos = Math.round(axis.u2p(ticks.values[i])) + 0.5;
+                                ctx.moveTo(pos, grid.bottom);
+                                ctx.lineTo(pos, grid.top-4);
+                                ctx.stroke();
+                            }
+                            break;
+                        case 'y2axis':
+                            for (var i=0; i<ticks.values.length; i++) {
+                                var pos = Math.round(axis.u2p(ticks.values[i])) + 0.5;
+                                ctx.moveTo(grid.left, pos);
+                                ctx.lineTo(grid.right+4, pos);
+                                ctx.stroke();
+                            }
+                            break;
+                    }
+                }
+            }
+            ctx.save();
+            ctx.lineWidth = 2.0;
+            ctx.strokeStyle = '#999999';
+            ctx.strokeRect(grid.left, grid.top, grid.width, grid.height);
+            ctx.restore();
         };
     
         this.makeCanvas = function(){
             this.octx = this.overlayCanvas.getContext("2d");
         };
     
-        this.drawSeries = function(){};
+        this.drawSeries = function(){
+            
+        };
     
         this.drawPoints = function(){};   
     
     };
     
     $.jqplot = function(target, data, options) {
-        log(arguments);
         options = options || {};
         var plot = new $._jqPlot();
         // for (var i in $.jqplot.renderers) {
         plot.draw();
         return plot;
     };
-    
-    // $.jqplot.renderers = [{name:'linearAxisRenderer', renderer:linearAxisRenderer}, {name:'lineRenderer', renderer:lineRenderer}, {name:'circleRenderer', renderer:circleRenderer}];
-    
-    
-        
+           
     function linearAxisRenderer() {
     };
     
         else {
             dim = this.height;
         }
-        if (dim > 100) {
-            this.numberTicks = parseInt(3+(dim-100)/50);
+        if (this.numberTicks == null){
+            if (dim > 100) {
+                this.numberTicks = parseInt(3+(dim-100)/75);
+            }
+            else this.numberTicks = 3;
         }
-        else this.numberTicks = 3;
         
         min = this.min || db.min;
         max = this.max || db.max;
                     this.ticks.styles.push({position:'absolute', top:'0px', left:pox, paddingTop:'10px'});
                     break;
                 case 'x2axis':
-                    this.ticks.styles.push({position:'absolute', bottom:'0px', left:pox});
+                    this.ticks.styles.push({position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'});
                     break;
                 case 'yaxis':
                     this.ticks.styles.push({position:'absolute', right:'0px', top:pox, paddingRight:'10px'});
                     break;
                 case 'y2axis':
-                    this.ticks.styles.push({position:'absolute', left:'0px', top:pox});
+                    this.ticks.styles.push({position:'absolute', left:'0px', top:pox, paddingLeft:'10px'});
                     break;
                     
             }
                 for (i=0; i<tickdivs.length; i++) {
                     var shim = $(tickdivs[i]).outerWidth()/2;
                     var t = this.u2p(ticks.values[i]);
-                    log (t);
                     var val = this.u2p(ticks.values[i]) - shim + 'px';
                     $(tickdivs[i]).css('left', val);
                     // remember, could have done it this way
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.