mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-19 14:33:22 +01:00
121 lines
4.8 KiB
HTML
121 lines
4.8 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.canvasTextRenderer.js"></script>
|
||
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.js"></script>
|
||
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.js"></script>
|
||
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.enhancedLegendRenderer.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
.jqplot-y2axis { margin-left: 4px; }
|
||
|
|
.jqplot { margin: 70px;}
|
||
|
|
table.jqplot-table-legend { border: 0px;}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript" language="javascript"><!--
|
||
|
|
$(document).ready(function(){
|
||
|
|
$.jqplot.config.enablePlugins = true;
|
||
|
|
l1 = [[2011,1200], [2039,1200]];
|
||
|
|
l2 = [[2011,0], [2039,800]];
|
||
|
|
l3 = [[2011,0], [2039,400]];
|
||
|
|
|
||
|
|
plot1 = $.jqplot('chart1', [l1,l2,l3], {
|
||
|
|
grid: {
|
||
|
|
background:'#ffffff',
|
||
|
|
// turn off the border. Note, should set
|
||
|
|
// borderColor as well due to way axes shares color
|
||
|
|
// defaults with the grid.
|
||
|
|
borderWidth:0,
|
||
|
|
borderColor:'#ffffff',
|
||
|
|
shadow:true,
|
||
|
|
// give a wide shadow
|
||
|
|
shadowWidth: 10,
|
||
|
|
shadowOffset: 3,
|
||
|
|
shadowDepth: 8,
|
||
|
|
// use new shadowColor option to give a custom lighter color
|
||
|
|
// because the high shadowDepth will make it look too dark.
|
||
|
|
shadowColor: 'rgba(230, 230, 230, 0.07)'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
renderer: $.jqplot.EnhancedLegendRenderer,
|
||
|
|
show:true,
|
||
|
|
location: 's',
|
||
|
|
placement:'outside',
|
||
|
|
yoffset: 30,
|
||
|
|
rendererOptions:{
|
||
|
|
numberRows: 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
stackSeries:true,
|
||
|
|
// use the new fillToValue option to make filled series "hover" above the x axis.
|
||
|
|
seriesDefaults:{fill:true, fillToZero:true, fillToValue: 100, yaxis:'y2axis'},
|
||
|
|
series:[{label:'oil'}, {label:'renewables'}, {label:'wind and water'}],
|
||
|
|
axesDefaults: {
|
||
|
|
showTickMarks:false,
|
||
|
|
tickOptions: {
|
||
|
|
formatString: '%d'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axes:{
|
||
|
|
xaxis: {
|
||
|
|
borderWidth:2,
|
||
|
|
borderColor:'#999999',
|
||
|
|
ticks:[2010, 2040],
|
||
|
|
tickOptions:{
|
||
|
|
showGridline: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
y2axis:{
|
||
|
|
borderWidth:0,
|
||
|
|
borderColor:'#ffffff',
|
||
|
|
autoscale: true,
|
||
|
|
min:0,
|
||
|
|
max: 3000,
|
||
|
|
numberTicks:4,
|
||
|
|
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
|
||
|
|
label:'energy use'
|
||
|
|
},
|
||
|
|
x2axis: {
|
||
|
|
borderWidth:0,
|
||
|
|
borderColor:'#ffffff'
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
borderWidth:2,
|
||
|
|
borderColor: '#999999'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Going to post process the css position of the y2axis label so it appears on the left side of the grid.
|
||
|
|
// Can't specify this in a css rule because jqPlot figures out the correct position of the label and then
|
||
|
|
// sets the style attributes on the label itself. This will override those element style attributes.
|
||
|
|
// Note, this fails in IE for some reason, probably due to VML emulated canvas elements.
|
||
|
|
var r = plot1._width - plot1._gridPadding.left - 5;
|
||
|
|
r = r+'px';
|
||
|
|
$('.jqplot-y2axis-label').css({top:'10px', right:r});
|
||
|
|
});
|
||
|
|
-->
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<?php include "nav.inc"; ?>
|
||
|
|
<div class="jqplot" id="chart1" style="height:300px;width:400px;"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
|
||
|
|
</html>
|