jquery.flot.tooltip
Version:
easy-to-use tooltips for Flot charts
115 lines (99 loc) • 3.72 kB
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="@sbedulin, bedulin.com">
<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">
#chart {
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<h1>Using cutom data inside a tooltip</h1>
<div id="chart"></div>
<script type="text/javascript">
(function($) {
'use strict';
var chart = {
selector: '#chart',
gridOptions: {
grid: {
borderColor: 'none',
hoverable: true
},
yaxis: {
max: 100,
min: 0
},
xaxis: {
min: 1,
tickSize: 1,
minTickSize: 1,
tickFormatter: function(number) {
return Number(number.toFixed());
}
},
legend: {
show: false
},
series: {
lines: { show: true },
points: { show: true }
},
tooltip: {
show: true,
content: '%s: you scored %y.0% in %ct',
shifts: {
x: -60,
y: 25
}
}
},
chartData: [],
init: function (options) {
this.$el = $(this.selector);
var series = {
data: options.seriesData || [],
label: options.seriesLabel || '',
hoverable: true
};
this.chartData.push(series);
$.plot(this.$el, this.chartData, this.gridOptions);
}
};
$(function() {
var serverData = {
testName: 'Driving Test',
questions: [
{ number: 1, score: 20, name: 'Difficult question' },
{ number: 2, score: 47, name: 'Who has more priority?' },
{ number: 3, score: 19, name: 'Question 3' },
{ number: 4, score: 63, name: 'Final question' }
]
};
var seriesData = [];
$.each(serverData.questions, function( index, question ) {
seriesData.push([
question.number,
question.score,
"'" + question.number + ' - ' + question.name + "'"
]);
});
chart.init({
seriesLabel: serverData.testName,
seriesData: seriesData
});
});
})(jQuery);
</script>
</body>
</html>