Skip to content

Instantly share code, notes, and snippets.

@colinfwren

colinfwren/flot labels

Created June 14, 2011 22:10
Show Gist options
  • Save colinfwren/1026055 to your computer and use it in GitHub Desktop.
Save colinfwren/1026055 to your computer and use it in GitHub Desktop.
Download ZIP
Code for flot labelling project
Raw
flot labels
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to add labels to a flot graph</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
body{
padding: 1em;
}
#graph{
margin-bottom: 1em;
}
</style>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.min.js"></script>
<!-- You'll need to get hold of the flot library to use this code -->
<script type="text/javascript">
$(document).ready(function(){
console.log('If you\'re debugging because it\'s not working it might because you haven't downloaded the flot library and added it to your directory');
$(function(){
var data = [
{label: 'Unemployment in thousands', data: [[1, null], [2, 1501], [3, 1463], [4, 1422], [5, 1405], [6, 1523], [7, 1683], [8,1604], [9, 2034], [10, null]], color: '#3a8df6'},
{label: 'ASBOs issued', data: [[1, null], [2, 350], [3, 427], [4, 1349], [5, 3479], [6, 4112], [7, 2705], [8, 2299], [9, 2027], [10, null]], color: '#ff0000'}
];
var options = {
lines: {show: true},
points: {show: true},
yaxis: {tickDecimals: 0, min: 0, max: 5000, autoscaleMargin: null},
xaxis: {ticks: [[2, 2001], [3, 2002], [4, 2003], [5, 2004], [6, 2005], [7, 2006], [8, 2007], [9, 2008]]},
grid: {backgroundColor: '#ffffff'}
};
var graph = $.plot($('#graph'), data, options);
var points = graph.getData();
var graphx = $('#graph').offset().left;
graphx = graphx + 30; // replace with offset of canvas on graph
var graphy = $('#graph').offset().top;
graphy = graphy + 10; // how low you want the label to hang underneath the point
for(var k = 0; k < points.length; k++){
for(var m = 0; m < points[k].data.length; m++){
if(points[k].data[m][0] != null && points[k].data[m][1] != null){
if(k == 0){
showTooltip(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 10,points[k].data[m][1], data[k].color)
}else{
showTooltip(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 45,points[k].data[m][1], data[k].color)
}
}
}
}
});
});
function showTooltip(x,y,contents, colour){
$('<div id="value">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y,
left: x,
'border-style': 'solid',
'border-width': '2px',
'border-color': colour,
'border-radius': '5px',
'background-color': '#ffffff',
color: '#262626',
padding: '2px'
}).appendTo("body").fadeIn(200);
}
</script>
</head>
<body>
<div id="container">
<div id="content">
<h2>Adding data labels to a flot graph</h2>
<div id="graph" style="width: 800px; height: 500px;"></div>
<p>Data from the Guardian datablog:</p>
<ul>
<li>ASBO data: <a href="http://www.guardian.co.uk/news/datablog/2010/jul/28/asbo-orders-statistics-police-force#data" class="new_window" title="ASBO data">http://www.guardian.co.uk/news/datablog/2010/jul/28/asbo-orders-statistics-police-force#data</a></li>
<li>Unemployment data: <a href="http://www.guardian.co.uk/news/datablog/2010/nov/17/unemployment-and-employment-statistics-economics" class="new_window" title="Unemployment data">http://www.guardian.co.uk/news/datablog/2010/nov/17/unemployment-and-employment-statistics-economics</a></li>
</ul>
</div>
</div>
</body>
</html>
@monkey413
Copy link

there is an error on line 21 "haven't" should be "haven't"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment