Commits

Anonymous committed 3fc86b9

Fixed pointlabels plugin to align labels correctly for multi series bar plots and for horizontal bar plots.

Comments (0)

Files changed (4)

examples/barTest.html

   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pointLabels.js"></script>
   <!-- END: load jqplot -->
 
   <script type="text/javascript" src="barTest.js"></script>
     <div><span>You Right Clicked: </span><span id="info3">Nothing yet</span></div>
     
     <div id="chart3" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
+    
+    <div id="chart4" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
+    
+    <div id="chart5" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
         
 <p>A simple line chart is added to test for imcompatabilities.</p>
         <div id="chart6" style="margin-top:20px; margin-left:20px; width:160px; height:100px;"></div>

examples/barTest.js

     
     plot1 = $.jqplot('chart1', [s1], {
         seriesDefaults:{
-            renderer:$.jqplot.BarRenderer
+            renderer:$.jqplot.BarRenderer,
+            pointLabels: { show: true }
         },
         axes: {
             xaxis: {
     
     plot2 = $.jqplot('chart2', [s1, s2], {
         seriesDefaults: {
-            renderer:$.jqplot.BarRenderer
+            renderer:$.jqplot.BarRenderer,
+            pointLabels: { show: true }
         },
         axes: {
             xaxis: {
         }
     });
     
-    plot2b = $.jqplot('chart2b', [[[2,1], [4,2], [6,3], [3,4]], [[5,1], [1,2], [3,3], [4,4]]], {
+    plot2b = $.jqplot('chart2b', [[[2,1], [4,2], [6,3], [3,4]], [[5,1], [1,2], [3,3], [4,4]], [[4,1], [7,2], [1,3], [2,4]]], {
         seriesDefaults: {
             renderer:$.jqplot.BarRenderer,
+            pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
             shadowAngle: 135,
             rendererOptions: {
                 barDirection: 'horizontal'
             renderer:$.jqplot.BarRenderer,
             rendererOptions: {
                 highlightMouseDown: true    
-            }
+            },
+            pointLabels: {show: true}
         },
         legend: {
             show: true,
             placement: 'outside'
         }      
     });
+    
+    plot4 = $.jqplot('chart4', [[[2,1], [6,2], [7,3], [10,4]], [[7,1], [5,2],[3,3],[2,4]], [[14,1], [9,2], [9,3], [8,4]]], {
+        stackSeries: true,
+        captureRightClick: true,
+        seriesDefaults:{
+            renderer:$.jqplot.BarRenderer,
+            shadowAngle: 135,
+            rendererOptions: {
+                barDirection: 'horizontal',
+                highlightMouseDown: true    
+            },
+            pointLabels: {show: true, formatString: '%d'}
+        },
+        legend: {
+            show: true,
+            location: 'e',
+            placement: 'outside'
+        },
+        axes: {
+            yaxis: {
+                renderer: $.jqplot.CategoryAxisRenderer
+            }
+        }
+    });
+    
+    plot5 = $.jqplot('chart5', [[[2,1], [6,2], [7,3], [10,4]]], {
+        captureRightClick: true,
+        seriesDefaults:{
+            renderer:$.jqplot.BarRenderer,
+            shadowAngle: 135,
+            rendererOptions: {
+                barDirection: 'horizontal',
+                highlightMouseDown: true    
+            },
+            pointLabels: {show: true, formatString: '%d'}
+        },
+        legend: {
+            show: true,
+            location: 'e',
+            placement: 'outside'
+        },
+        axes: {
+            yaxis: {
+                renderer: $.jqplot.CategoryAxisRenderer
+            }
+        }
+    });
 
     plot6 = $.jqplot('chart6', [[1,2,3,4]], {seriesDefaults:{highlighter:{show:true}}});
     

examples/pointLabels.html

   <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pointLabels.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
 
   <!-- END: load jqplot -->
 <script language="javascript" type="text/javascript">
         axes:{yaxis:{pad: 1.3}}
       }
     );
+    pop1980 = [7071, 2968, 3005, 1595, 789];
+    pop1990 = [7322, 3485, 2783, 1630, 983];
+    pop2000 = [8008, 3694, 2896, 1974, 1322];
+    ticks = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];
+    
+    plot2 = $.jqplot('chart2',[pop1980, pop1990, pop2000],{
+       title: 'City Population (thousands)',
+       legend: {
+           show: true
+       },
+       seriesDefaults: {
+           renderer: $.jqplot.BarRenderer
+       },
+       series: [
+          {label: '1980'},
+          {label: '1990'},
+          {label: '2000'},
+          {label: '2008 (est)'}
+       ],
+       axes: {
+           xaxis: {
+               label: 'City',
+               renderer: $.jqplot.CategoryAxisRenderer,
+               ticks: ticks
+           },
+           yaxis: {
+               max: 9000,
+               min: 0,
+               tickOptions: {
+                   formatString: '%d'
+                }
+           }
+       }
+    });
 });
 </script>
 
 <div id="chart" style="height:300px; width:600px;"></div>
 <div style="padding-top:20px">
 <button value="reset" type="button" onclick="$.jqplot.Cursor.resetZoom(plot)">Reset Zoom</button>
+
+
+<div id="chart2" style="height:300px; width:600px;"></div>
 </div>
   </body>
 </html>

src/plugins/jqplot.pointLabels.js

         // Number of pixels that the label must be away from an axis
         // boundary in order to be drawn.  Negative values will allow overlap
         // with the grid boundaries.
-        this.edgeTolerance = 0;
+        this.edgeTolerance = -5;
         // prop: formatter
         // A class of a formatter for the tick text.  sprintf by default.
         this.formatter = $.jqplot.DefaultTickFormatter;
     // called with scope of a series
     $.jqplot.PointLabels.init = function (target, data, seriesDefaults, opts){
         var options = $.extend(true, {}, seriesDefaults, opts);
+        options.pointLabels = options.pointLabels || {};
+        if (this.renderer.constructor == $.jqplot.BarRenderer && this.barDirection == 'horizontal' && !options.pointLabels.location) {
+            options.pointLabels.location = 'e';
+        }
         // add a pointLabels attribute to the series plugins
         this.plugins.pointLabels = new $.jqplot.PointLabels(options.pointLabels);
         this.plugins.pointLabels.setLabels.call(this);
     // called with scope of series
     $.jqplot.PointLabels.prototype.setLabels = function() {   
         var p = this.plugins.pointLabels; 
+        var labelIdx;
+        if (p.seriesLabelIndex) {
+            labelIdx = p.seriesLabelIndex;
+        }
+        else if (this.renderer.constuctor = $.jqplot.BarRenderer) {
+            if (this.barDirection == "vertical") {
+                labelIdx = this._plotData[0].length - 1;
+            }
+            else {
+                labelIdx = 0;
+            }
+        }
         p._labels = [];
         if (p.labels.length == 0 || p.labelsFromSeries) {    
             if (p.stackedValue) {
                 if (this._plotData.length && this._plotData[0].length){
-                    var idx = p.seriesLabelIndex || this._plotData[0].length -1;
+                    // var idx = p.seriesLabelIndex || this._plotData[0].length -1;
                     for (var i=0; i<this._plotData.length; i++) {
-                        p._labels.push(this._plotData[i][idx]);
+                        p._labels.push(this._plotData[i][labelIdx]);
                     }
                 }
             }
                     d = this._data;
                 }
                 if (d.length && d[0].length) {
-                    var idx = p.seriesLabelIndex || d[0].length -1;
+                    // var idx = p.seriesLabelIndex || d[0].length -1;
                     for (var i=0; i<d.length; i++) {
-                        p._labels.push(d[i][idx]);
+                        p._labels.push(d[i][labelIdx]);
                     }
                 }
             }
                 }
                 var ell = xax.u2p(pd[i][0]) + p.xOffset(elem, location);
                 var elt = yax.u2p(pd[i][1]) + p.yOffset(elem, location);
+                if (this.renderer.constructor == $.jqplot.BarRenderer) {
+                    if (this.barDirection == "vertical") {
+                        ell += this._barNudge;
+                    }
+                    else {
+                        elt -= this._barNudge;
+                    }
+                }
                 elem.css('left', ell);
                 elem.css('top', elt);
                 var elr = ell + $(elem).width();