Chris Leonello avatar Chris Leonello committed c262fcb

Modified seriesCanvas so it fits inside the grid boundaries. That way lines will clip when outside of grid without any complicated point insertion and look right in IE.

Comments (0)

Files changed (2)

         chart2 = $.jqplot('chartdiv2', [[[1,1],[2,4], [4,5], [5,3], null, [7,8]], [[2,35],[5,30],[9,18],[11,21]]], {title:'Sample #2', series:[{}, {yaxis:'y2axis'}]});
 */
         chart = $.jqplot('chartdiv', 
-            [[[1,1],[2,4],[3,5],[4,1],[5,4],[6,10]], [[1,11],[2,18],[3,27],[4,22],[6,41]]], 
+            [[[1,1],[2,4],[3,5],[4,1],[5,4],[6,10]], [[1,11],[2,18],[3,-8],[4,50],[6,41]]], 
             {
                 title:{text:'Dual Axis With Title and Trend Line'}, 
                 legend:{textColor:'', fontSize:'0.8em', location:'nw', rowSpacing:'0.2em'}, 
             
             for (var name in this.axes) {
                 var axis = this.axes[name];
-                axis.renderer.pack.call(axis, offsets);
+                axis.renderer.pack.call(axis, offsets, this.grid._width, this.grid._height);
             }
             
         };
     
     // Now we know offsets around the grid, we can define conversioning functions
     // and properly lay out the axes.
-    $.jqplot.lineAxisRenderer.prototype.pack = function(offsets, grid) {
+    $.jqplot.lineAxisRenderer.prototype.pack = function(offsets, gridwidth, gridheight) {
         var ticks = this.ticks;
         var tickdivs = $(this._elem).children('div');
         if (this.name == 'xaxis' || this.name == 'x2axis') {
                 return (u - this.min) * (this._canvasWidth - this._offsets.max - this._offsets.min) / (this.max - this.min) + this._offsets.min;
             }
             
+            this.series_u2p = function(u) {
+                return (u - this.min) * gridwidth / (this.max - this.min);
+            }
+            
+            this.series_p2u = function(p) {
+                return p * (this.max - this.min) / gridwidth + this.min;
+            }
+            
             if (this.show) {
                 // set the position
                 if (this.name == 'xaxis') {
             this.u2p = function(u) {
                 return -(u - this.min) * (this._canvasHeight - this._offsets.min - this._offsets.max) / (this.max - this.min) + this._canvasHeight - this._offsets.min;
             }
+            
+            this.series_u2p = function(u) {
+                return (this.max - u) * gridheight /(this.max - this.min);
+            }
+            
+            this.series_p2u = function(p) {
+                return -p * (this.max - this.min) / gridheight + this.max;
+            }
+            
             if (this.show) {
                 // set the position
                 if (this.name == 'yaxis') {
         this.gctx = this.gridCanvas.getContext("2d");
         
         this.seriesCanvas = document.createElement('canvas');
-        this.seriesCanvas.width = this._width;
-        this.seriesCanvas.height = this._height;
+        this.seriesCanvas.width = this.grid._width;
+        this.seriesCanvas.height = this.grid._height;
         if ($.browser.msie) // excanvas hack
             this.seriesCanvas = window.G_vmlCanvasManager.initElement(this.seriesCanvas);
-        $(this.seriesCanvas).css({ position: 'absolute', left: 0, top: 0 });
+        $(this.seriesCanvas).css({ position: 'absolute', left: this.grid._left, top: this.grid._top });
         this.target.append(this.seriesCanvas);
         this.sctx = this.seriesCanvas.getContext("2d");
         
         var xaxis = this.xaxis;
         var yaxis = this.yaxis;
         var d = this.data;
-        var xp = this._xaxis.u2p;
-        var yp = this._yaxis.u2p;
+        var xp = this._xaxis.series_u2p;
+        var yp = this._yaxis.series_u2p;
         // use a clipping path to cut lines outside of grid.
-        ctx.moveTo(grid._left, grid._top);
-        ctx.lineTo(grid._right, grid._top);
-        ctx.lineTo(grid._right, grid._bottom);
-        ctx.lineTo(grid._left, grid._bottom);
-        ctx.closePath();
-        ctx.clip();
-        ctx.beginPath();
+        // ctx.moveTo(grid._left, grid._top);
+        // ctx.lineTo(grid._right, grid._top);
+        // ctx.lineTo(grid._right, grid._bottom);
+        // ctx.lineTo(grid._left, grid._bottom);
+        // ctx.closePath();
+        // ctx.clip();
+        // ctx.beginPath();
         ctx.lineJoin = 'round';
         ctx.lineCap = 'round';
         ctx.lineWidth = this.lineWidth;
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.