Commits

Anonymous committed 59b5bd9

Now allow series specific options to highlighter for tooltipSeparator, formatstring, tooltipFormatstring, useAxesFormatters, tootipAxes and tooltipContentEditor options.

  • Participants
  • Parent commits a64f4a1

Comments (0)

Files changed (2)

File examples/highlighter.html

   <!-- END: load jqplot -->
 
 
-<script language="javascript" type="text/javascript">
+<script class="code" language="javascript" type="text/javascript">
+$(document).ready(function(){
+    $.jqplot.config.enablePlugins = true;
+    var s1 = [['23-May-08', 1],['24-May-08', 4],['25-May-08', 2],['26-May-08', 6]];
 
-$(document).ready(function(){
-      $.jqplot.config.enablePlugins = true;
-   s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08',
-6]];
-
-    s2 = [3,5,7,4,8];
-    s3 = [9,11,15,8,15];
-    s4 = [8,7,12,18,4];
-    s5 = [13,17,21,19,11];
-    l1 = [];
-    l2 = [];
-    l3 = [];
-    
-    for (var i=0; i<100; i++) {
-        l1.push(Math.random()*7);
-        l2.push(Math.random()*13);
-        l3.push(Math.random()*2);
-    }
-
-
-   plot1 = $.jqplot('chart1',[s1],{
+    plot1 = $.jqplot('chart1',[s1],{
        title: 'Highlighting',
        axes: {
            xaxis: {
            show: true,
            zoom: true
        }
-   });
-   
-   plot2 = $.jqplot('chart2', [s2, s3, s4, s5], { highlighter: { bringSeriesToFront: true, tooltipLocation: 'e', tooltipOffset: 0, formatString: '<div class="jqplot-highlighter"><span>#seriesLabel#</span>%s: <strong>%s</strong></div>' } });
-   plot3 = $.jqplot('chart3', [s2, s3], { highlighter: { bringSeriesToFront: true, tooltipLocation: 'e', tooltipOffset: 0, formatString: '<div class="jqplot-highlighter"><span>#seriesLabel#</span>%s: <strong>%s</strong></div>' } });
-   plot4 = $.jqplot('chart4', [s2, s3, s4], { highlighter: { bringSeriesToFront: true, tooltipLocation: 'e', tooltipOffset: 0, formatString: '<div class="jqplot-highlighter"><span>#seriesLabel#</span>%s: <strong>%s</strong></div>' } });
-   plot5 = $.jqplot('chart5', [l1, l2, l3], { seriesDefaults:{neighborThreshold:0, showMarker:false}, highlighter: { bringSeriesToFront: true, tooltipLocation: 'e', tooltipOffset: 0, formatString: '<div class="jqplot-highlighter"><span>#seriesLabel#</span>%s: <strong>%s</strong></div>' } });
+    });
+});
+</script>
+
+<script class="code" language="javascript" type="text/javascript">
+$(document).ready(function(){
+    var s2 = [3,5,7,4,8];
+    var s3 = [9,11,15,8,15];
+    var s4 = [8,7,12,18,4];
+    var s5 = [13,17,21,19,11];
+
+    plot2 = $.jqplot('chart2', [s2, s3, s4, s5], { 
+        highlighter: { 
+            bringSeriesToFront: true, 
+            tooltipLocation: 'e', 
+            tooltipOffset: 0, 
+            formatString: '<div class="jqplot-highlighter"><span>Point </span>%s: <strong>%s</strong></div>' 
+        },
+        series: [
+            {
+                highlighter: {
+                    useAxesFormatters: false,
+                    tooltipFormatString: '%6.1f%%'
+                }
+            },
+            {
+                highlighter: {
+                    formatString: '$%6.2f'
+                }
+            }
+        ]
+    });
    
 });
+</script>
 
-</script>
+<script type="text/javascript" src="example.js"></script>
+
   </head>
   <body>
 <?php include "nav.inc"; ?>
 <div id="chart1" class="plot" style="width:500px;height:300px;"></div>
 <div id="chart2" class="plot" style="width:500px;height:300px;"></div>
-<div id="chart3" class="plot" style="width:500px;height:300px;"></div>
-<div id="chart4" class="plot" style="width:500px;height:300px;"></div>
-<div id="chart5" class="plot" style="width:500px;height:300px;"></div>
-
-
 
   </body>
 </html>

File src/plugins/jqplot.highlighter.js

         // add the plot._gridPadding to that to get x,y in the target.
         var hl = plot.plugins.highlighter;
         var elem = hl._tooltipElem;
-        if (hl.useAxesFormatters) {
+        var serieshl = series.highlighter || {};
+
+        var opts = $.extend(true, {}, hl, serieshl);
+
+        if (opts.useAxesFormatters) {
             var xf = series._xaxis._ticks[0].formatter;
             var yf = series._yaxis._ticks[0].formatter;
             var xfstr = series._xaxis._ticks[0].formatString;
             var str;
             var xstr = xf(xfstr, neighbor.data[0]);
             var ystrs = [];
-            for (var i=1; i<hl.yvalues+1; i++) {
+            for (var i=1; i<opts.yvalues+1; i++) {
                 ystrs.push(yf(yfstr, neighbor.data[i]));
             }
-            if (hl.formatString) {
-                switch (hl.tooltipAxes) {
+            if (opts.formatString) {
+                switch (opts.tooltipAxes) {
                     case 'both':
                     case 'xy':
                         ystrs.unshift(xstr);
-                        ystrs.unshift(hl.formatString);
+                        ystrs.unshift(opts.formatString);
                         str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
                         break;
                     case 'yx':
                         ystrs.push(xstr);
-                        ystrs.unshift(hl.formatString);
+                        ystrs.unshift(opts.formatString);
                         str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
                         break;
                     case 'x':
-                        str = $.jqplot.sprintf.apply($.jqplot.sprintf, [hl.formatString, xstr]);
+                        str = $.jqplot.sprintf.apply($.jqplot.sprintf, [opts.formatString, xstr]);
                         break;
                     case 'y':
-                        ystrs.unshift(hl.formatString);
+                        ystrs.unshift(opts.formatString);
                         str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
                         break;
                     default: // same as xy
                         ystrs.unshift(xstr);
-                        ystrs.unshift(hl.formatString);
+                        ystrs.unshift(opts.formatString);
                         str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
                         break;
                 } 
             }
             else {
-                switch (hl.tooltipAxes) {
+                switch (opts.tooltipAxes) {
                     case 'both':
                     case 'xy':
                         str = xstr;
                         for (var i=0; i<ystrs.length; i++) {
-                            str += hl.tooltipSeparator + ystrs[i];
+                            str += opts.tooltipSeparator + ystrs[i];
                         }
                         break;
                     case 'yx':
                         str = '';
                         for (var i=0; i<ystrs.length; i++) {
-                            str += ystrs[i] + hl.tooltipSeparator;
+                            str += ystrs[i] + opts.tooltipSeparator;
                         }
                         str += xstr;
                         break;
                         str = xstr;
                         break;
                     case 'y':
-                        str = ystrs.join(hl.tooltipSeparator);
+                        str = ystrs.join(opts.tooltipSeparator);
                         break;
                     default: // same as 'xy'
                         str = xstr;
                         for (var i=0; i<ystrs.length; i++) {
-                            str += hl.tooltipSeparator + ystrs[i];
+                            str += opts.tooltipSeparator + ystrs[i];
                         }
                         break;
                     
         }
         else {
             var str;
-            if (hl.tooltipAxes == 'both' || hl.tooltipAxes == 'xy') {
-                str = $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[0]) + hl.tooltipSeparator + $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[1]);
+            if (opts.tooltipAxes == 'both' || opts.tooltipAxes == 'xy') {
+                str = $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[0]) + opts.tooltipSeparator + $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[1]);
             }
-            else if (hl.tooltipAxes == 'yx') {
-                str = $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[1]) + hl.tooltipSeparator + $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[0]);
+            else if (opts.tooltipAxes == 'yx') {
+                str = $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[1]) + opts.tooltipSeparator + $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[0]);
             }
-            else if (hl.tooltipAxes == 'x') {
-                str = $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[0]);
+            else if (opts.tooltipAxes == 'x') {
+                str = $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[0]);
             }
-            else if (hl.tooltipAxes == 'y') {
-                str = $.jqplot.sprintf(hl.tooltipFormatString, neighbor.data[1]);
+            else if (opts.tooltipAxes == 'y') {
+                str = $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[1]);
             } 
         }
-        if ($.isFunction(hl.tooltipContentEditor)) {
+        if ($.isFunction(opts.tooltipContentEditor)) {
             // args str, seriesIndex, pointIndex are essential so the hook can look up
             // extra data for the point.
-            str = hl.tooltipContentEditor(str, neighbor.seriesIndex, neighbor.pointIndex, plot);
+            str = opts.tooltipContentEditor(str, neighbor.seriesIndex, neighbor.pointIndex, plot);
         }
         elem.html(str);
         var gridpos = {x:neighbor.gridData[0], y:neighbor.gridData[1]};
         var ms = 0;
         var fact = 0.707;
         if (series.markerRenderer.show == true) { 
-            ms = (series.markerRenderer.size + hl.sizeAdjust)/2;
+            ms = (series.markerRenderer.size + opts.sizeAdjust)/2;
         }
 		
 		var loc = locations;
 			loc = oppositeLocations;
 		}
 		
-        switch (loc[locationIndicies[hl.tooltipLocation]]) {
+        switch (loc[locationIndicies[opts.tooltipLocation]]) {
             case 'nw':
-                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - hl.tooltipOffset - fact * ms;
-                var y = gridpos.y + plot._gridPadding.top - hl.tooltipOffset - elem.outerHeight(true) - fact * ms;
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - opts.tooltipOffset - fact * ms;
+                var y = gridpos.y + plot._gridPadding.top - opts.tooltipOffset - elem.outerHeight(true) - fact * ms;
                 break;
             case 'n':
                 var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2;
-                var y = gridpos.y + plot._gridPadding.top - hl.tooltipOffset - elem.outerHeight(true) - ms;
+                var y = gridpos.y + plot._gridPadding.top - opts.tooltipOffset - elem.outerHeight(true) - ms;
                 break;
             case 'ne':
-                var x = gridpos.x + plot._gridPadding.left + hl.tooltipOffset + fact * ms;
-                var y = gridpos.y + plot._gridPadding.top - hl.tooltipOffset - elem.outerHeight(true) - fact * ms;
+                var x = gridpos.x + plot._gridPadding.left + opts.tooltipOffset + fact * ms;
+                var y = gridpos.y + plot._gridPadding.top - opts.tooltipOffset - elem.outerHeight(true) - fact * ms;
                 break;
             case 'e':
-                var x = gridpos.x + plot._gridPadding.left + hl.tooltipOffset + ms;
+                var x = gridpos.x + plot._gridPadding.left + opts.tooltipOffset + ms;
                 var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2;
                 break;
             case 'se':
-                var x = gridpos.x + plot._gridPadding.left + hl.tooltipOffset + fact * ms;
-                var y = gridpos.y + plot._gridPadding.top + hl.tooltipOffset + fact * ms;
+                var x = gridpos.x + plot._gridPadding.left + opts.tooltipOffset + fact * ms;
+                var y = gridpos.y + plot._gridPadding.top + opts.tooltipOffset + fact * ms;
                 break;
             case 's':
                 var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2;
-                var y = gridpos.y + plot._gridPadding.top + hl.tooltipOffset + ms;
+                var y = gridpos.y + plot._gridPadding.top + opts.tooltipOffset + ms;
                 break;
             case 'sw':
-                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - hl.tooltipOffset - fact * ms;
-                var y = gridpos.y + plot._gridPadding.top + hl.tooltipOffset + fact * ms;
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - opts.tooltipOffset - fact * ms;
+                var y = gridpos.y + plot._gridPadding.top + opts.tooltipOffset + fact * ms;
                 break;
             case 'w':
-                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - hl.tooltipOffset - ms;
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - opts.tooltipOffset - ms;
                 var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2;
                 break;
             default: // same as 'nw'
-                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - hl.tooltipOffset - fact * ms;
-                var y = gridpos.y + plot._gridPadding.top - hl.tooltipOffset - elem.outerHeight(true) - fact * ms;
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - opts.tooltipOffset - fact * ms;
+                var y = gridpos.y + plot._gridPadding.top - opts.tooltipOffset - elem.outerHeight(true) - fact * ms;
                 break;
         }
         elem.css('left', x);
         elem.css('top', y);
-        if (hl.fadeTooltip) {
+        if (opts.fadeTooltip) {
             // Fix for stacked up animations.  Thnanks Trevor!
-            elem.stop(true,true).fadeIn(hl.tooltipFadeSpeed);
+            elem.stop(true,true).fadeIn(opts.tooltipFadeSpeed);
         }
         else {
             elem.show();