Skip to content

Instantly share code, notes, and snippets.

@hbillings

hbillings/graph.html

Created December 14, 2011 04:13
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hbillings/1475232 to your computer and use it in GitHub Desktop.
Save hbillings/1475232 to your computer and use it in GitHub Desktop.
Download ZIP
A lotta Flot: Getting started with simple JavaScript charts
Raw
graph.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A lotta Flot</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="graph.js"></script>
</head>
<body>
<h3>Teacher misassignments in California's lowest 3% of schools, 2008-2009</h3>
<div id="graph" style="width:300px;height:300px;"></div>
<h3>Misassignments by subject, 2004-2009</h3>
<div id="subjects" style="width:600px; height:600px;"></div>
</body>
</html>
Raw
graph.js
var $ = jQuery.noConflict();
$(document).ready(function(){
// Example #1: Number of misassigned teachers per decile
// Declare the variable
var misassignments_per_decile = [
[1,6152],
[2,3799],
[3,3011]
];
// plot the data
$.plot($("#graph"), [
{ label: "Number of misassignments",
data: misassignments_per_decile }],
{
series: {
bars: {
show: true,
align: "center"
}
},
xaxis: {
show: true,
ticks: 3,
min: 0,
max: 4,
tickDecimals: 0
},
yaxis: {
show: true,
ticks: 5,
min: 2000,
max: 7000
}
}
);
// Example #2: Number of misassignments in the top 10 classes since 2004
// We're only using five, but here are 10 for you to play around with!
var sdaie = [[2009, 6033], [2008, 8244], [2007, 1927], [2006, 4808], [2005, 690], [2004, 67]];
var science = [[2009, 940], [2008, 446], [2007, 88], [2006, 93], [2005, 227], [2004, 122]];
var english = [[2009, 687], [2008, 790], [2007, 140],[2006, 340],[2005, 313],[2004, 192]];
var math = [[2009, 441],[2008, 373],[2007, 113],[2006, 225],[2005, 334],[2004, 173]];
var social_studies = [[2009, 375],[2008, 279],[2007, 79],[2006, 144],[2005, 130],[2004, 134]];
var eld = [[2009, 348],[2008, 537],[2007, 1520],[2006, 1649],[2005, 909],[2004, 237]];
var phys_ed = [[2009, 313],[2008, 361],[2007, 122],[2006, 132],[2005, 259],[2004, 168]];
var life_skills = [[2009, 296],[2008, 271],[2007, 9],[2006, 17],[2005, 32], [2004, 11]];
var health = [[2009, 254],[2008, 243],[2007, 51],[2006, 96],[2005, 106],[2004, 62]];
var computers = [[2009, 225],[2008, 207],[2007, 59],[2006, 92], [2005, 117],[2004, 82]];
$.plot($("#subjects"),
[
{ label: "Science",
data: science },
{ label: "English",
data: english },
{ label: "Math",
data: math },
{ label: "Social Studies",
data: social_studies},
{ label: "ELD",
data: eld }],
{
series: {
lines: {
show: true,
lineWidth: 4
},
shadowSize: 0,
},
xaxis: {
tickDecimals: 0
},
grid: {
hoverable: true,
clickable: true,
borderWidth: 0
},
colors: ["#95997B", "#B9CC3E", "#FFE667", "#A7BAFF", "#3E82CC"]
}
);
// Create the box for the tooltip, but don't display it yet
// The CSS here is completely customizable. The only required rules are
// display: none, position: absolute, and the top and left values.
function showTooltip(x, y, contents, color) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
width: '140px',
display: 'none',
'font-family': 'sans-serif',
'font-size': '12px',
top: y + 5,
left: x + 5,
'border-width': '2px',
'border-style': 'solid',
'border-color': color,
padding: '4px',
'background-color': "#eee",
opacity: 0.90
}).appendTo("body").fadeIn(200);
}
// Figure out which point is being hovered over and display that data
$("#subjects").bind("plothover", function (event, pos, item){
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
// This defines x and y as variables that will display the
// x and y values of the point being hovered over. If you'd like to display
// decimal places, try this code: var x = item.datapoint[0].toFixed(2);
// Be aware that this will affect all tooltips for all charts on this page.
var x = item.datapoint[0];
var y = item.datapoint[1];
// This is where you can control what shows up in your tooltip.
// "item.series.label" will return the name of your dataset.
var label = "In " + x + ", there were " + y + " misassigned teachers in " + item.series.label;
// showTooltip is a function that takes three comma-separated arguments.
// The first two arguments will help position the tooltip near the point.
// The third is our label, defined above, and the fourth returns the color of the chart.
showTooltip(item.pageX, item.pageY, label, item.series.color);
}
}
// Once we're no longer hovering over the point, remove the tooltip
else {
$("#tooltip").remove();
previousPoint = null;
}
});
}); //end of $(document).ready(function()
Raw
sample.js
//a sample Flot object
$.plot($("#graph"),
[{ label: "Sample data", // What Flot's built-in legend will reflect, if enabled
data: some_data },
{ label: "More data",
data: more_data }],
{
series: {
lines: { // How data is displayed. Possible values include points, bars, or lines
show: true
lineWidth: // how thick the line is (or the border for points and bars)
shadowSize: // an integer. Set to 0 for no shadow (my preference)
},
colors: [] // an array of colors you want to use (otherwise Flot will auto-generate)
// if using bars, you can control the layout with "barWidth" (an integer) and "horizontal" (true/false); if points, you can adjust the size with "radius" (an integer); if lines, you can create steps with "steps" (true/false)
},
legend :{
show:
position: // which quadrant of the chart the legend appears in. "ne," "se," "sw," or "nw"
backgroundColor: // in hex
}
xaxis: { // All x-axis options are also available for the y-axis
ticks: // an integer
tickDecimals: // how many decimal places to show on each label
min:
max:
show: // true or false. it's possible to customize the min/max, etc., while hiding the actual labels
},
grid: { // Customization of the graph's grid
show: // True or false
borderWidth: // in pixels; 0 hides it
borderColor: // in hex
hoverable: // Makes the graph interactive. Either true or false (false by default)
clickable: // should be true if hoverable is true; more on that in a bit
}
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment