Skip to content

Instantly share code, notes, and snippets.

@fdc263

fdc263/flot labels

Forked from colinfwren/flot labels
Created July 19, 2012 13:56
Show Gist options
  • Save fdc263/3144089 to your computer and use it in GitHub Desktop.
Save fdc263/3144089 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment