forked from extern/egroupware
114 lines
4.0 KiB
HTML
114 lines
4.0 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.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="examples.css" />
|
|
|
|
<!-- BEGIN: load jquery -->
|
|
<script type="text/javascript" src="../jquery.min.js"></script>
|
|
<!-- END: load jquery -->
|
|
|
|
<!-- BEGIN: load jqplot -->
|
|
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
|
|
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
|
|
<script type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
|
|
<script type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../plugins/jqplot.donutRenderer.min.js"></script>
|
|
|
|
<!-- END: load jqplot -->
|
|
|
|
<style type="text/css">
|
|
.jqplot-target {
|
|
margin: 30px;
|
|
}
|
|
</style>
|
|
|
|
<script class="code" language="javascript" type="text/javascript">
|
|
$(document).ready(function(){
|
|
|
|
var l2 = [11, 9, 5, 12, 14];
|
|
var l3 = [4, 8, 5, 3, 6];
|
|
var l4 = [12, 6, 13, 11, 2];
|
|
var l5 = [4, -3, 3, 6, 2, -2];
|
|
|
|
|
|
var plot1b = $.jqplot('chart1b',[l2, l3, l4],{
|
|
stackSeries: true,
|
|
showMarker: false,
|
|
seriesDefaults: {
|
|
fill: true
|
|
},
|
|
axes: {
|
|
xaxis: {
|
|
renderer: $.jqplot.CategoryAxisRenderer,
|
|
ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#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>
|
|
|
|
|
|
<script class="code" language="javascript" type="text/javascript">
|
|
$(document).ready(function(){
|
|
var 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);
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<script type="text/javascript" src="example.js"></script>
|
|
</head>
|
|
<body>
|
|
<?php include "topbanner.inc"; ?>
|
|
<div class="example-content">
|
|
<?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>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |