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

148 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<!-- 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.cursor.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script>
<style type="text/css">
.jqplot-cursor-legend {
width: 160px;
font-family: "Courier New";
font-size: 0.85em;
}
td.jqplot-cursor-legend-swatch {
width: 1.3em;
}
div.jqplot-cursor-legend-swatch {
/* width: 15px;*/
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
// $.jqplot.config.enablePlugins = true;
var goog = [["6/22/2009",425.32],
["6/8/2009",424.84],
["5/26/2009",417.23],
["5/11/2009",390],
["4/27/2009",393.69],
["4/13/2009",392.24],
["3/30/2009",369.78],
["3/16/2009",330.16],
["3/2/2009",308.57],
["2/17/2009",346.45],
["2/2/2009",371.28],
["1/20/2009",324.7],
["1/5/2009",315.07],
["12/22/2008",300.36],
["12/8/2008",315.76],
["11/24/2008",292.96],
["11/10/2008",310.02],
["10/27/2008",359.36],
["10/13/2008",372.54],
["9/29/2008",386.91],
["9/15/2008",449.15],
["9/2/2008",444.25],
["8/25/2008",463.29],
["8/11/2008",510.15],
["7/28/2008",467.86],
["7/14/2008",481.32],
["6/30/2008",537],
["6/16/2008",546.43],
["6/2/2008",567],
["5/19/2008",544.62],
["5/5/2008",573.2],
["4/21/2008",544.06],
["4/7/2008",457.45],
["3/24/2008",438.08],
["3/10/2008",437.92],
["2/25/2008",471.18],
["2/11/2008",529.64],
["1/28/2008",515.9],
["1/14/2008",600.25],
["12/31/2007",657],
["12/17/2007",696.69],
["12/3/2007",714.87],
["11/19/2007",676.7],
["11/5/2007",663.97],
["10/22/2007",674.6],
["10/8/2007",637.39],
["9/24/2007",567.27],
["9/10/2007",528.75],
["8/27/2007",515.25]];
var plot1 = $.jqplot('chart1', [goog], {
// title: 'Google, Inc.',
series: [{
// label: 'Google, Inc.',
neighborThreshold: -1
}],
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
min:'August 1, 2007',
tickInterval: '4 months',
tickOptions:{formatString:'%Y/%#m/%#d'}
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
tickOptions:{formatString:'$%.2f'}
}
},
cursor:{show:true, zoom:true}
});
var plot2 = $.jqplot('chart2', [goog], {
// title: 'Google, Inc.',
series: [{
// label: 'Google, Inc.',
neighborThreshold: -1
}],
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
min:'August 1, 2007',
tickInterval: '4 months',
tickOptions:{formatString:'%Y/%#m/%#d'}
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
tickOptions:{formatString:'$%.2f'}
}
},
cursor:{show: true, zoom: true, looseZoom: true}
});
});
</script>
</head>
<body>
<?php include "nav.inc"; ?>
<div class="jqPlot" id="chart1" style="height:400px; width:600px;"></div>
<button onclick="plot1.resetZoom()">Reset</button>
<div class="jqPlot" id="chart2" style="height:400px; width:600px;"></div>
<button onclick="plot2.resetZoom()">Reset</button>
</body>
</html>