Skip to content

Instantly share code, notes, and snippets.

@siwells

siwells/jqplot_test001.html

Created December 16, 2011 15:19
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 siwells/1486431 to your computer and use it in GitHub Desktop.
Save siwells/1486431 to your computer and use it in GitHub Desktop.
Download ZIP
Using the JQPlot API to draw a simple line chart
Raw
jqplot_test001.html
<html>
<head>
<title>Line Chart Test</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script class="code" type="text/javascript">
$(document).ready(function(){
var line1=[['2011-6-29 8:00AM',3],['2011-6-30 8:00AM',4], ['2011-7-1 8:00AM',8], ['2011-7-2 8:00AM',15], ['2011-7-3 8:00AM',9], ['2011-7-4 8:00AM',11], ['2011-7-5 8:00AM',18]];
var plot2 = $.jqplot('chart', [line1], {
title:'Dataset Access This Week',
gridPadding:{left:100,right:50},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
fontSize: '10pt'
}
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{angle: -55,formatString:'%d %B'},
min:'Jun 29, 2011',
tickInterval:'12 hours'
},
yaxis: {
label: "Number of Accesses"
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
});
</script>
</head>
<body>
<div id="chart" style="width:500px"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment