mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-13 10:11:22 +01:00
108 lines
4.2 KiB
HTML
108 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Filled (Area) Charts</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.barRenderer.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.highlighter.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.cursor.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.pieRenderer.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.donutRenderer.js"></script>
|
|
<!-- <script language="javascript" type="text/javascript" src="../plugins/jqplot.funnelRenderer.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.js"></script>
|
|
-->
|
|
<!-- END: load jqplot -->
|
|
|
|
<style type="text/css">
|
|
.jqplot-target {
|
|
margin: 30px;
|
|
}
|
|
</style>
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
$(document).ready(function(){
|
|
|
|
l2 = [11, 9, 5, 12, 14];
|
|
l3 = [4, 8, 5, 3, 6];
|
|
l4 = [12, 6, 13, 11, 2];
|
|
l5 = [4, -3, 3, 6, 2, -2];
|
|
|
|
|
|
plot1b = $.jqplot('chart1b',[l2, l3, l4],{
|
|
stackSeries: true,
|
|
showMarker: false,
|
|
seriesDefaults: {
|
|
fill: true
|
|
},
|
|
axes: {
|
|
xaxis: {
|
|
renderer: $.jqplot.CategoryAxisRenderer,
|
|
ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]
|
|
}
|
|
}
|
|
});
|
|
|
|
plot1c = $.jqplot('chart1c',[l5],{
|
|
stackSeries: true,
|
|
showMarker: false,
|
|
seriesDefaults: {
|
|
fill: true,
|
|
fillToZero: true,
|
|
rendererOptions: {
|
|
highlightMouseDown: true
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#chart1c').bind('jqplotDataClick',
|
|
function (ev, seriesIndex, pointIndex, data) {
|
|
$('#info1c').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
|
|
}
|
|
);
|
|
|
|
$('#chart1b').bind('jqplotDataHighlight',
|
|
function (ev, seriesIndex, pointIndex, data) {
|
|
$('#info1b').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
|
|
}
|
|
);
|
|
|
|
$('#chart1b').bind('jqplotDataUnhighlight',
|
|
function (ev) {
|
|
$('#info1b').html('Nothing');
|
|
}
|
|
);
|
|
});
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<?php include "nav.inc"; ?>
|
|
|
|
<p>Area charts support highlighting and mouse events by default. The options and handlers and callbacks are essentially the same as with bar, pie, donut and funnel charts. One notable exception for area charts is that no data point index will be provided to the callback and the entire data set for the highlighted area will be returned. This is because the area is not associated with one particular data point, but with the entire data set of the series.</p>
|
|
|
|
<div><span>Moused Over: </span><span id="info1b">Nothing</span></div>
|
|
|
|
<div id="chart1b" class="plot" style="width:400px;height:260px;"></div>
|
|
|
|
<p>For the chart below, mouseover has been disabled and click handling is enabled by setting "highlightMouseDown: true". For "fillToZero" area charts that have both negative and positive values as shown below, clicking in either the positive of negative regions will generate the same result.</p>
|
|
|
|
<div><span>You Clicked: </span><span id="info1c">Nothing yet</span></div>
|
|
|
|
<div id="chart1c" class="plot" style="width:400px;height:260px;"></div>
|
|
</body>
|
|
</html> |