Merge pull request #56 from Lukindo/master

Tooltip content
krzysu · Jan 10, 2014 · f08440a · f08440a
2 parents 44658ec + a7cdda4
commit f08440a
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 11 deletions.
diff --git a/examples/custom_ticks.html b/examples/custom_ticks.html
@@ -0,0 +1,70 @@
+<!doctype html>  
+
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+	<title>flot.tooltip plugin example page</title>
+	<meta name="author" content="@krzysu, myviews.pl">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+    <!--[if lte IE 8]><script src="../js/excanvas.min.js"></script><![endif]-->
+	<script src="../js/jquery.flot.js"></script>
+	<script src="../js/jquery.flot.tooltip.js"></script>
+
+	<style type="text/css">
+		body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
+		#flotTip {}
+	</style>
+</head>
+
+<body>
+    <h1>flot.tooltip plugin example page</h1>
+
+    <div id="placeholder" style="width: 825px; height: 150px;"></div>
+	<a href="javascript:void(0);" class="button" id="replot">Plot</a>
+
+	<script type="text/javascript">
+	$(document).ready(function(){
+
+		plot();
+
+		function plot(){
+			var values = [ [0, 450], [1, 550], [2, 320], [3, 700] ]
+
+			var options = {
+				series: {
+					lines: { show: true },
+					points: { show: true }
+				},
+				grid: {
+					hoverable: true //IMPORTANT! this is needed for tooltip to work
+				},
+				xaxis: {
+				     ticks: [
+				       [0, "great"],
+				       [1, "greater"],
+				       [2, "greatest"]
+				     ]
+				},
+				tooltip: true,
+				tooltipOpts: {
+					content: "%s: value of %x is %y",
+					shifts: {
+						x: -60,
+						y: 25
+					}
+				}
+			};
+
+			var plotObj = $.plot( $("#placeholder"),
+				[ { data: values, label: "Series 1"}],
+				options );
+		}
+	});
+	</script>
+
+</body>
+</html>
diff --git a/examples/dollar_in_tickformatter.html b/examples/dollar_in_tickformatter.html
@@ -0,0 +1,68 @@
+<!doctype html>  
+
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+	<title>flot.tooltip plugin example page</title>
+	<meta name="author" content="@krzysu, myviews.pl">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+    <!--[if lte IE 8]><script src="../js/excanvas.min.js"></script><![endif]-->
+	<script src="../js/jquery.flot.js"></script>
+	<script src="../js/jquery.flot.tooltip.js"></script>
+
+	<style type="text/css">
+		body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
+		#flotTip {}
+	</style>
+</head>
+
+<body>
+    <h1>flot.tooltip plugin example page</h1>
+
+    <div id="placeholder" style="width: 825px; height: 150px;"></div>
+	<a href="javascript:void(0);" class="button" id="replot">Plot</a>
+
+	<script type="text/javascript">
+	$(document).ready(function(){
+
+		plot();
+
+		function plot(){
+			var values = [ [0.75, 123], [1, 550], [2.823695, 320], [3, 700],[4,17000],[5,300] ]
+
+			var options = {
+				series: {
+					lines: { show: true },
+					points: { show: true }
+				},
+				grid: {
+					hoverable: true //IMPORTANT! this is needed for tooltip to work
+				},
+				yaxis:{
+                                    tickFormatter: function(val, axis) {
+					  return '$' + val.toLocaleString()+"$";
+				    },
+				},
+				tooltip: true,
+				tooltipOpts: {
+					content: "%s of %x.2 is %y",
+					shifts: {
+						x: -60,
+						y: 25
+					}
+				}
+			};
+
+			var plotObj = $.plot( $("#placeholder"),
+				[ { data: values, label: "Series 1"}],
+				options );
+		}
+	});
+	</script>
+
+</body>
+</html>
diff --git a/js/jquery.flot.tooltip.js b/js/jquery.flot.tooltip.js
@@ -6,7 +6,7 @@
  * author: Krzysztof Urbas @krzysu [myviews.pl]
  * website: https://github.com/krzysu/flot.tooltip
  * 
- * build on 2013-12-21
+ * build on 2014-01-09
  * released under MIT License, 2012
 */ 
 (function ($) {
@@ -165,8 +165,10 @@
 
         var percentPattern = /%p\.{0,1}(\d{0,})/;
         var seriesPattern = /%s/;
-        var xPattern = /%x\.{0,1}(?:\d{0,})/;
-        var yPattern = /%y\.{0,1}(?:\d{0,})/;
+        var xPattern = /%x\.{0,1}(\d{0,})/;
+        var yPattern = /%y\.{0,1}(\d{0,})/;
+	var xPatternWithoutPrecision = "%x";
+	var yPatternWithoutPrecision = "%y";
 
         var x = item.datapoint[0];
         var y = item.datapoint[1];
@@ -185,6 +187,10 @@
         if( typeof(item.series.label) !== 'undefined' ) {
             content = content.replace(seriesPattern, item.series.label);
         }
+	else{
+            //remove %s if label is undefined
+            content = content.replace(seriesPattern, "");
+        }
 
         // time mode axes with custom dateFormat
         if(this.isTimeMode('xaxis', item) && this.isXDateFormat(item)) {
@@ -203,12 +209,19 @@
             content = this.adjustValPrecision(yPattern, content, y);
         }
 
+        // change x from number to given label, if given
+        if(typeof item.series.xaxis.ticks !== 'undefined') {
+            if(item.series.xaxis.ticks.length > item.dataIndex && !this.isTimeMode('xaxis', item))
+                content = content.replace(xPattern, item.series.xaxis.ticks[item.dataIndex].label);
+        }
         // if no value customization, use tickFormatter by default
         if(typeof item.series.xaxis.tickFormatter !== 'undefined') {
-            content = content.replace(xPattern, item.series.xaxis.tickFormatter(x, item.series.xaxis));
+            //escape dollar
+            content = content.replace(xPatternWithoutPrecision, item.series.xaxis.tickFormatter(x, item.series.xaxis).replace(/\$/g, '$$'));
         }
         if(typeof item.series.yaxis.tickFormatter !== 'undefined') {
-            content = content.replace(yPattern, item.series.yaxis.tickFormatter(y, item.series.yaxis));
+            //escape dollar
+            content = content.replace(yPatternWithoutPrecision, item.series.yaxis.tickFormatter(y, item.series.yaxis).replace(/\$/g, '$$'));
         }
 
         return content;

diff --git a/js/jquery.flot.tooltip.min.js b/js/jquery.flot.tooltip.min.js
diff --git a/js/jquery.flot.tooltip.source.js b/js/jquery.flot.tooltip.source.js
@@ -154,8 +154,10 @@
 
         var percentPattern = /%p\.{0,1}(\d{0,})/;
         var seriesPattern = /%s/;
-        var xPattern = /%x\.{0,1}(?:\d{0,})/;
-        var yPattern = /%y\.{0,1}(?:\d{0,})/;
+        var xPattern = /%x\.{0,1}(\d{0,})/;
+        var yPattern = /%y\.{0,1}(\d{0,})/;
+	var xPatternWithoutPrecision = "%x";
+	var yPatternWithoutPrecision = "%y";
 
         var x = item.datapoint[0];
         var y = item.datapoint[1];
@@ -174,6 +176,10 @@
         if( typeof(item.series.label) !== 'undefined' ) {
             content = content.replace(seriesPattern, item.series.label);
         }
+	else{
+            //remove %s if label is undefined
+            content = content.replace(seriesPattern, "");
+        }
 
         // time mode axes with custom dateFormat
         if(this.isTimeMode('xaxis', item) && this.isXDateFormat(item)) {
@@ -192,12 +198,19 @@
             content = this.adjustValPrecision(yPattern, content, y);
         }
 
+        // change x from number to given label, if given
+        if(typeof item.series.xaxis.ticks !== 'undefined') {
+            if(item.series.xaxis.ticks.length > item.dataIndex && !this.isTimeMode('xaxis', item))
+                content = content.replace(xPattern, item.series.xaxis.ticks[item.dataIndex].label);
+        }
         // if no value customization, use tickFormatter by default
         if(typeof item.series.xaxis.tickFormatter !== 'undefined') {
-            content = content.replace(xPattern, item.series.xaxis.tickFormatter(x, item.series.xaxis));
+            //escape dollar
+            content = content.replace(xPatternWithoutPrecision, item.series.xaxis.tickFormatter(x, item.series.xaxis).replace(/\$/g, '$$'));
         }
         if(typeof item.series.yaxis.tickFormatter !== 'undefined') {
-            content = content.replace(yPattern, item.series.yaxis.tickFormatter(y, item.series.yaxis));
+            //escape dollar
+            content = content.replace(yPatternWithoutPrecision, item.series.yaxis.tickFormatter(y, item.series.yaxis).replace(/\$/g, '$$'));
         }
 
         return content;