Skip to content

Instantly share code, notes, and snippets.

@sandeep048

sandeep048/Flot_Starter

Created April 14, 2015 11:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sandeep048/49f882090ed569c50afb to your computer and use it in GitHub Desktop.
Save sandeep048/49f882090ed569c50afb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Flot_Starter
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Starter Page</title>
<link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script type="text/javascript" src="http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/markrcote/flot-axislabels/master/jquery.flot.axislabels.js"></script>
<script language="javascript" type="text/javascript" src="https://cdn.rawgit.com/flot/flot/master/jquery.flot.resize.js"></script>
<!-- <script type="text/javascript" src="/ie/static/flot/jquery.flot.js"></script> -->
<!-- <script type="text/javascript" src="/ie/static/flot/jquery.flot.canvas.js"></script>
<script type="text/javascript" src="/ie/static/flot/jquery.flot.tickrotor.js"></script>
<script type="text/javascript" src="/ie/static/flot/jquery.flot.stack.js"></script> -->
<!-- <script language="javascript" type="text/javascript" src="/ie/static/flot/jquery.flot.selection.js"></script>
<script language="javascript" type="text/javascript" src="/ie/static/flot/jquery.flot.navigate.js"></script>
<script type="text/javascript" src="/ie/static/flot/jquery.flot.tooltip.js"></script>
<script type="text/javascript" src="/ie/static/flot/jquery.flot.pyramid.js"></script>
<script type="text/javascript" src="/ie/static/flot/jquery.flot.resize.js"></script>
-->
<!-- <script type="text/javascript" src="/ie/static/flot/jquery.flot.text.js"></script>
<script type="text/javascript" src="/ie/static/flot/jquery.flot.boxwhisker.js"></script>
-->
<script type="text/javascript">
$(function () {
data = [
{
"label":"Females",
"data":[[0,67],[1,77],[2,71],[3,65],[4,59],[5,57],[6,52],[7,35],[8,20],[9,5],[10,12]]
},
{
"label":"Males",
"data":[[0,68],[1,80],[2,92],[3,100],[4,81],[5,93],[6,76],[7,48],[8,28],[9,14],[10,9]]
}
];
plot_options = {
canvas: true,
grid:{
"clickable":false,
"hoverable":true,
"autoHighlight":true,
"color":"#BBBBBB",
"borderColor":{
"top":"transparent",
"bottom":"grey",
"left":"grey",
"right":"transparent"
}
},
legend:{
container : $("#legend"),
backgroundColor: "#fff",
backgroundOpacity: 0.3,
margin: [0, 50]
},
series:{
"boxwhisker":{
"show":false
},
"bars":{
"show":true,
"order":true,
"barWidth":0.1,
"lineWidth":0.1
}
},
tooltip: true,
tooltipOpts: {
"content":"%s : %y"
},
xaxis:{
"zoomRange": false,
"axisLabelPadding": 4,
"tickDecimals": 0,
"axisLabel": "Age",
"ticks": [
["0", "< 5 years"],
["1", "5-9 years"],
["2", "10-14 years"],
["3", "15-19 years"],
["4", "20-24 years"],
["5", "25-29 years"],
["6", "30-34 years"],
["7", "35-39 years"],
["8", "40-44 years"],
["9", "45-49 years"],
["10", "> 50 years"]
],
'tickColor': 'transparent'
},
yaxis:{
"axisLabelPadding": 20,
"tickDecimals": 0,
"axisLabel": "Years",
'tickColor': 'transparent'
}
}
$.plot("#placeholder", data, plot_options);
});
</script>
</head>
<body>
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment