Permalink
Browse files

Add value precision to string formatter and rewrite it to regex

  • Loading branch information...
1 parent 0d39556 commit 5f9d5547bc096ac047e91e60e47a00f93a37afde @krzysu committed Jul 30, 2011
Showing with 153 additions and 13 deletions.
  1. +17 −9 README.md
  2. +1 −1 example.html
  3. +3 −3 example_series.html
  4. +132 −0 js/jquery.flot.tooltip_0.4.js
View
@@ -12,8 +12,20 @@ See the `example.html` and `example_series.html` files and source code of plugin
Changelog
---------
+### What's new in v0.4? ###
-### What's new in v0.3? ###
+Now you can easily set precision of values displayed on tip thanks to enhanced 'string formatter'.
+Just put your desired precision after value in format like this `%x.precision`,
+where 'precision; is a number of digits to appear after the decimal point. It uses `number.toFixed(precision)` function internally.
+
+What is more 'string formatter' was rewritten and now is RegExp based.
+
+#### Examples: ####
+
+ content: "value of X is %x.1 and value of Y is %y.4 and they belong to '%s' series"
+ content: "<h4>%s</h4><ul><li>X is %x</li><li>Y is %y.2</li></ul>"
+
+### v0.3 ###
I'd like to introduce 'string formatter'. Now you can easily define how content of your flot.tooltip should look like.
You can also use HTML tags!
@@ -26,11 +38,6 @@ Just use new option called `content`. The following specifiers are supported:
Also minified version is available.
-#### Examples: ####
-
- content: "value of X is %x and value of Y is %y and they belong to %s series"
- content: "<h4>%s</h4><ul><li>X is %x</li><li>Y is %y</li></ul>"
-
### v0.2 ###
- many series support with series name on the tooltip
@@ -45,13 +52,13 @@ You need to set hoverable to true if you want this tooltip plugin to work.
hoverable: true
}
-Plugin Options (v0.3)
+Plugin Options (v0.4)
-------
In comments there are default values
tooltip: boolean //false
tooltipOpts: {
- content: string //"%s | X: %x | Y: %y"
+ content: string //"%s | X: %x | Y: %y.2"
dateFormat: string //"%y-%0m-%0d"
shifts: {
x: int //25
@@ -61,7 +68,8 @@ In comments there are default values
- `tooltip` : set to `true` to turn on this plugin (if `grid.hoverable` is also set to `true`)
-- `content` : content of your tooltip, HTML tags are also allowed; use `%s` as series label, `%x` as X value, `%y` as Y value
+- `content` : content of your tooltip, HTML tags are also allowed; use `%s` as series label, `%x` as X value, `%y` as Y value.
+ With `%x` and `%y` values you can also use `.precision`, for example `%x.2` means that value of X will be rounded to 2 digits after the decimal point.
- `dateFormat` : you can use the same specifiers as in Flot, for time mode data
- `shifts` : shift tooltip position regarding mouse pointer for `x` and `y`, negative values are ok
View
@@ -12,7 +12,7 @@
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/jquery.flot.min.js"></script>
- <script src="js/jquery.flot.tooltip_0.3.min.js"></script>
+ <script src="js/jquery.flot.tooltip_0.4.js"></script>
<style type="text/css">
body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
View
@@ -12,7 +12,7 @@
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/jquery.flot.min.js"></script>
- <script src="js/jquery.flot.tooltip_0.3.js"></script>
+ <script src="js/jquery.flot.tooltip_0.4.js"></script>
<style type="text/css">
body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
@@ -29,7 +29,7 @@
<script type="text/javascript">
$(function () {
var sin = [], cos = [];
- for (var i = 0; i < 14; i += 0.5) {
+ for (var i = 0; i < 12; i += 0.2) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
@@ -45,7 +45,7 @@
yaxis: { min: -1.2, max: 1.2 },
tooltip: true,
tooltipOpts: {
- content: "value of X is %x and value of Y is %y and they belong to '%s' series",
+ content: "value of X is %x.1 and value of Y is %y.5 and they belong to '%s' series",
series: true,
shifts: {
x: -55,
@@ -0,0 +1,132 @@
+/*
+ * jquery.flot.tooltip
+ * desc: create tooltip with values of hovered point on the graph,
+ support many series, time mode,
+ you can set custom tip content (also with use of HTML tags) and precision of values
+ * version: 0.4
+ * author: Krzysztof Urbas @krzysu [myviews.pl]
+ * website: https://github.com/krzysu/flot.tooltip
+ *
+ * released under MIT License, 2011
+*/
+
+(function ($) {
+ var options = {
+ tooltip: false, //boolean
+ tooltipOpts: {
+ content: "%s | X: %x | Y: %y.2", //%s -> series label, %x -> X value, %y -> Y value, %x.2 -> precision of X value
+ dateFormat: "%y-%0m-%0d",
+ shifts: {
+ x: 25,
+ y: 25
+ }
+ }
+ };
+
+ function init(plot) {
+
+ var tipPosition = {x: 0, y: 0};
+ var opts = plot.getOptions();
+
+ function updateTooltipPosition(pos) {
+ tipPosition.x = pos.x;
+ tipPosition.y = pos.y;
+ };
+
+ function onMouseMove(e) {
+
+ var pos = {x: 0, y: 0};
+ var offset = plot.offset();
+
+ pos.x = e.pageX - offset.left;
+ pos.y = e.pageY - offset.top;
+
+ updateTooltipPosition(pos);
+ };
+
+ function timestampToDate(tmst) {
+
+ var theDate = new Date(tmst);
+
+ return $.plot.formatDate(theDate, opts.tooltipOpts.dateFormat);
+ };
+
+ plot.hooks.bindEvents.push(function (plot, eventHolder) {
+
+ var to = opts.tooltipOpts;
+
+ if (opts.tooltip === false) {
+ return;
+ }
+
+ var placeholder = plot.getPlaceholder();
+ var $tip = $('<div />').attr('id', 'flotTip');
+ $tip.appendTo(placeholder).hide().css({position: 'absolute'});
+
+ $(placeholder).bind("plothover", function (event, pos, item) {
+ if (item) {
+
+ var tipText;
+
+ if(opts.xaxis.mode === "time") {
+ tipText = stringFormat(to.content, item, timestampToDate);
+ }
+ else {
+ tipText = stringFormat(to.content, item);
+ }
+
+ $tip.html( tipText ).css({left: tipPosition.x + to.shifts.x, top: tipPosition.y + to.shifts.y}).show();
+ }
+ else {
+ $tip.hide();
+ }
+ });
+
+ eventHolder.mousemove(onMouseMove);
+ });
+
+ function stringFormat(content, item, fnct) {
+
+ var seriesPattern = /%s/;
+ var xPattern = /%x\.{0,1}(\d{0,})/;
+ var yPattern = /%y\.{0,1}(\d{0,})/;
+
+ //series match
+ if( typeof(item.series.label) !== 'undefined' ) {
+ content = content.replace(seriesPattern, item.series.label);
+ }
+ // xVal match
+ if( typeof(fnct) === 'function' ) {
+ content = content.replace(xPattern, fnct(item.datapoint[0]) );
+ }
+ else {
+ content = adjustValPrecision(xPattern, content, item.datapoint[0]);
+ }
+ // yVal match
+ content = adjustValPrecision(yPattern, content, item.datapoint[1]);
+
+ return content;
+ };
+
+ function adjustValPrecision(pattern, content, value) {
+
+ var precision;
+ if( content.match(pattern) !== 'null' ) {
+ if(RegExp.$1 !== '') {
+ precision = RegExp.$1;
+ value = value.toFixed(precision)
+ }
+ content = content.replace(pattern, value);
+ }
+
+ return content;
+ };
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'tooltip',
+ version: '0.4'
+ });
+})(jQuery);

0 comments on commit 5f9d554

Please sign in to comment.