Commits

Anonymous committed 91a4bb6

Fixed css for point labels so they won't fall behind series. Note, this may interfere with cursor and zoom as they will lie on top of plot.
Added format string capability to point labels.
Added another stacked bar example.

Comments (0)

Files changed (4)

examples/stackedBar2.html

 	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
 	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.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.canvasAxisTickRenderer.js"></script>
-	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.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>
 		
 		 
 
 
 var tickers = ['2008-03-01', '2008-04-01', '2008-05-01', '2008-06-01', '2008-07-01'];
 		
-		plot1 = $.jqplot('chart5', [line1, line2], {
+		plot1 = $.jqplot('chart1', [line1, line2], {
 			stackSeries: true,
 			legend: {
 				show: true,
 				}
 			}	
 		});
+		
+    line1 = [20, 10];
+    line2 = [80, 90];
+    plot2 = $.jqplot('chart2', [line1, line2], {
+        grid:{drawGridlines:false},
+        stackSeries: true, 
+        seriesColors: ["#82BC24","#363636"],
+        seriesDefaults: {
+            renderer: $.jqplot.BarRenderer,
+            rendererOptions:{barMargin: 25}, 
+            pointLabels:{stackedValue: true},
+            yaxis:'y2axis'
+        },
+        series:[
+            {pointLabels:{ypadding: -15}},
+            {pointLabels:{ypadding:9000}}
+        ],
+        axes: {
+            xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
+            y2axis:{ticks:[0, 100], tickOptions:{formatString:'%d\%'}}
+        }
+    });
+
 });
 
 
 </head>
 <body>
 <?php include "nav.inc"; ?>
-<div id="chart5" class='plot' style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
+<div id="chart1" class='plot' style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
+<div id="chart2" class='plot' style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
  
 </body>
 

examples/stackedBar3.html

+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
+  <link rel="stylesheet" type="text/css" href="examples.css" />
+  <!--[if IE]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
+  
+  <!-- BEGIN: load jquery -->
+  <script language="javascript" type="text/javascript" src="../src/jquery-1.4.1.min.js"></script>
+
+  <!-- END: load jquery -->
+  
+  <!-- BEGIN: load jqplot -->
+  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.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.dateAxisRenderer.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.pointLabels.js"></script>
+		
+		 
+
+<script type="text/javascript" language="javascript">
+  
+ $(document).ready(function(){		
+    line1 = [20, 10];
+    line2 = [80, 90];
+    plot2 = $.jqplot('chart2', [line1, line2], {
+        grid:{
+            drawGridlines:true,
+            background: '#ffffff',
+            borderWidth: 0,
+            shadow: false
+        },
+        stackSeries: true, 
+        seriesColors: ["#82BC24","#363636"],
+        seriesDefaults: {
+            renderer: $.jqplot.BarRenderer,
+            rendererOptions:{barMargin: 25}, 
+            pointLabels:{stackedValue: true},
+            yaxis:'y2axis',
+            shadow: false
+        },
+        series:[
+            {pointLabels:{ypadding: -15}},
+            {pointLabels:{ypadding:9000}}   // this hack will push the labels for the top series off of the page so they don't appear.
+        ],
+        axes: {
+            xaxis:{
+                ticks:[2010, 2040], 
+                renderer:$.jqplot.CategoryAxisRenderer, 
+                tickOptions:{
+                    showGridline:false, 
+                    markSize:0
+                }
+            },
+            y2axis:{
+                ticks:[0, 100], 
+                tickOptions:{formatString:'%d\%'}
+            }
+        }
+    });
+});
+
+
+
+
+</script>
+</head>
+<body>
+<?php include "nav.inc"; ?>
+<div id="chart2" class='plot' style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
+ 
+</body>
+
+
+</html>

src/jquery.jqplot.css

 
 .jqplot-point-label {
     font-size: 0.75em;
+    z-index: 2;
 }
       
 td.jqplot-cursor-legend-swatch {

src/plugins/jqplot.pointLabels.js

         // boundary in order to be drawn.  Negative values will allow overlap
         // with the grid boundaries.
         this.edgeTolerance = 0;
+        // prop: formatter
+        // A class of a formatter for the tick text.  sprintf by default.
+        this.formatter = $.jqplot.DefaultTickFormatter;
+        // prop: formatString
+        // string passed to the formatter.
+        this.formatString = '';
         // prop: hideZeros
         // true to not show a label for a value which is 0.
         this.hideZeros = false;
     $.jqplot.PointLabels.draw = function (sctx, options) {
         var p = this.plugins.pointLabels;
         if (p.show) {
-            // var xoffset, yoffset;
-            //         
-            // switch (p.location) {
-            //     case 'nw':
-            //         xoffset = function(elem) { return -elem.outerWidth(true) - p.xpadding; };
-            //         yoffset = function(elem) { return -elem.outerHeight(true) - p.ypadding; };
-            //         break;
-            //     case 'n':
-            //         xoffset = function(elem) { return -elem.outerWidth(true)/2; };
-            //         yoffset = function(elem) { return -elem.outerHeight(true) - p.ypadding; };
-            //         break;
-            //     case 'ne':
-            //         xoffset = function(elem) { return p.xpadding; };
-            //         yoffset = function(elem) { return -elem.outerHeight(true) - p.ypadding; };
-            //         break;
-            //     case 'e':
-            //         xoffset = function(elem) { return p.xpadding; };
-            //         yoffset = function(elem) { return -elem.outerHeight(true)/2; };
-            //         break;
-            //     case 'se':
-            //         xoffset = function(elem) { return p.xpadding; };
-            //         yoffset = function(elem) { return p.ypadding; };
-            //         break;
-            //     case 's':
-            //         xoffset = function(elem) { return -elem.outerWidth(true)/2; };
-            //         yoffset = function(elem) { return p.ypadding; };
-            //         break;
-            //     case 'sw':
-            //         xoffset = function(elem) { return -elem.outerWidth(true) - p.xpadding; };
-            //         yoffset = function(elem) { return p.ypadding; };
-            //         break;
-            //     case 'w':
-            //         xoffset = function(elem) { return -elem.outerWidth(true) - p.xpadding; };
-            //         yoffset = function(elem) { return -elem.outerHeight(true)/2; };
-            //         break;
-            //     default: // same as 'nw'
-            //         xoffset = function(elem) { return -elem.outerWidth(true) - p.xpadding; };
-            //         yoffset = function(elem) { return -elem.outerHeight(true) - p.ypadding; };
-            //         break;
-            // }
+        
+            if (!p.formatString) {
+                var ax = '_'+this._stackAxis+'axis';
+                p.formatString = this[ax]._ticks[0].formatString;
+                p.formatter = this[ax]._ticks[0].formatter;
+            }
         
             for (var i=0; i<p.labels.length; i++) {
                 var pd = this._plotData;
                     label = '';
                 }
                 
+                label = p.formatter(p.formatString, label);
+                
                 var elem = $('<div class="jqplot-point-label" style="position:absolute"></div>');
                 elem.insertAfter(sctx.canvas);
                 if (p.escapeHTML) {