egroupware/phpgwapi/js/jquery/jqplot/examples/customHighlighterCursorTrendline.html
2011-08-09 23:10:50 +00:00

69 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Test</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.cursor.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dragable.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.trendline.js"></script>
<!-- END: load jqplot -->
</head>
<body>
<?php include "nav.inc"; ?>
<div id="test" class="plot" style="width:500px;height:300px;"></div>
<script language="javascript" type="text/javascript"><!--
$.jqplot.config.enablePlugins = true;
s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08',
6]];
plot1 = $.jqplot('test',[s1],{
title: 'Highlighting, Dragging, Cursor and Trend Line',
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d, %Y'
},
numberTicks: 4
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
sizeAdjust: 10,
tooltipLocation: 'n',
tooltipAxes: 'y',
tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
useAxesFormatters: false
},
cursor: {
show: true
}
});
--></script>
</body>
</html>