Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip content #56

Merged
merged 2 commits into from
Jan 10, 2014
+175 −11
Merged

Tooltip content #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3bcf0fc
precision for x and y axis, escape $ in ticks, remove %s if label is …
lmacko Jan 9, 2014
a7cdda4
Fix custom ticks
lmacko Jan 9, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions examples/custom_ticks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
68 changes: 68 additions & 0 deletions examples/dollar_in_tickformatter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
23 changes: 18 additions & 5 deletions js/jquery.flot.tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ($) {
Expand Down Expand Up @@ -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];
Expand All @@ -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)) {
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions js/jquery.flot.tooltip.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 17 additions & 4 deletions js/jquery.flot.tooltip.source.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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)) {
Expand All @@ -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;
Expand Down