forked from extern/egroupware
192 lines
8.6 KiB
HTML
192 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<link rel="stylesheet" type="text/css" href="examples.css" />
|
|
<!--[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" />
|
|
<script src="../jquery.min.js" type="text/javascript"></script>
|
|
<script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script>
|
|
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
interval = 1500;
|
|
niters = 0;
|
|
maxIterations = 200;
|
|
GraphUpdate = null;
|
|
|
|
function UpdateGraph() {
|
|
StopGraphLoop();
|
|
GraphUpdate = setInterval(runUpdate, interval);
|
|
}
|
|
|
|
|
|
function runUpdate() {
|
|
if (niters < maxIterations) {
|
|
window.location.reload(true);
|
|
niters++;
|
|
}
|
|
else {
|
|
StopGraphLoop();
|
|
}
|
|
}
|
|
|
|
function StopGraphLoop() {
|
|
|
|
clearInterval(GraphUpdate);
|
|
}
|
|
|
|
function makeLineData(n, p) {
|
|
n = (n == null) ? 1 : n;
|
|
p = (p == null) ? 35 : p;
|
|
var linedata = [];
|
|
if (n == 1) {
|
|
for (var i=0; i< p; i++) {
|
|
// linedata.push([i, ystart]);
|
|
// ystart += (Math.random() - 0.4) * 10;
|
|
linedata.push([i, ((Math.random() - 0.4) * 30)])
|
|
}
|
|
}
|
|
|
|
else if (n == 2) {
|
|
var ystart = 10;
|
|
for (var i=0; i< p; i++) {
|
|
linedata.push([i, ystart]);
|
|
ystart += (Math.random() - 0.4) * 10;
|
|
}
|
|
}
|
|
|
|
else if (n == 3) {
|
|
var ystart = 10 + (Math.random() - 0.5) * 5;
|
|
for (var i=0; i< p; i++) {
|
|
linedata.push([i, ystart]);
|
|
ystart += (Math.random() - 0.4) * 5;
|
|
}
|
|
}
|
|
|
|
else {
|
|
|
|
linedata = [[0, 108], [1, 99], [2, 95], [3, 119], [4, 109], [5, 96], [6, 119], [7, 108], [8, 117], [9, 87], [10, 97], [11, 120], [12, 117], [13, 86], [14, 123], [15, 105], [16, 98], [17, 90], [18, 113], [19, 110], [20, 110], [21, 99], [22, 110], [23, 94], [24, 103], [25, 99], [26, 93], [27, 84], [28, 123], [29, 105], [30, 105], [31, 92], [32, 100], [33, 99], [34, 102]];
|
|
|
|
// linedata = [[0,30], [10,130],[30,150], [50,150], [70,170], [90,220],[100,320]];
|
|
|
|
// linedata = [[0, 1000], [1, 1002], [1.02, -1000], [3.98, -980], [4, 1000]];
|
|
|
|
linedata = [[0,30], [10,300], [30,300], [50,150], [70,170], [90,220], [100,320]];
|
|
|
|
}
|
|
|
|
return linedata;
|
|
}
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
//linedata = [[0, 107.82365883671947], [1, 99.16018668825309], [2, 94.78884418901754], [3, 119.47866379112438], [4, 108.60497096533754], [5, 95.85470385881975], [6, 118.56099903117925], [7, 107.78120403217613], [8, 116.95084761274899], [9, 87.03778841888804], [10, 97.26453809882635], [11, 120.12298234601045], [12, 116.54558331433284], [13, 86.35661502593884], [14, 122.86058241164652], [15, 105.49063230477856], [16, 97.90107693365506], [17, 90.42651033481407], [18, 112.76302896745166], [19, 99.38816776897356], [20, 110.32072892044519], [21, 99.41730398132184], [22, 110.01904139207804], [23, 94.03994244350879], [24, 102.71041277495752], [25, 98.64013661344191], [26, 93.26547044978899], [27, 84.38063003027179], [28, 122.91281762546294], [29, 104.63706448209788], [30, 105.23414202755615], [31, 92.48837995253147], [32, 100.24435203238308], [33, 98.50235067799353], [34, 101.85730984082966]];
|
|
|
|
|
|
// linedata = [[0, 8.194554782826964], [1, -8.26006937761056], [2, 12.342827158030525], [3, 8.030109035522102], [4, 8.182886883054381], [5, 8.836386328822941], [6, 11.176736487401527], [7, 1.8960525030185005], [8, -3.6947299645140443], [9, -5.119827875923864], [10, -5.25942310454954], [11, -4.766757691793732], [12, 11.721069537068498], [13, 0.8432892718526719], [14, 5.332522140414763], [15, 15.277740043938193], [16, -4.074006947418175], [17, -4.364855263823531], [18, 14.551497347313791], [19, -2.33555199082259], [20, -7.744684343217381], [21, 7.815264879043241], [22, -1.7010010417223276], [23, -8.103868356916688], [24, 1.4479942203079321], [25, -10.406369533275939], [26, 8.304909437814956], [27, 13.27288566183171], [28, 14.302875136560548], [29, 1.2372348371186415], [30, -3.7768442729862195], [31, 13.438728151296731], [32, -11.02816010529125], [33, 2.936993823708894], [34, 9.575457689028472], [35, 16.10628772599221], [36, 17.885934937223468], [37, -1.437802063100031], [38, 7.991361850692442], [39, 2.3623691308554386], [40, -2.300820182975629], [41, 11.540237597432307], [42, 13.30015246260144], [43, 11.236446225066283], [44, 4.960937895872273], [45, 7.347381297473149], [46, -1.9248338734684833], [47, -4.0690335548722425], [48, 0.4913951765545854], [49, 9.781926104520892], [50, -5.78653717592562], [51, -5.7333876884315425], [52, 6.635865569798751], [53, -10.685897445075966], [54, 16.05371975947152]];
|
|
|
|
var dat = makeLineData(2, 15);
|
|
plot1 = $.jqplot('chart1', [makeLineData(1,15), makeLineData(1, 15)], {
|
|
grid: {
|
|
drawBorder: false,
|
|
shadow: false,
|
|
background: '#ffffff'
|
|
},
|
|
cursor: { show: true,
|
|
showTooltip: false,
|
|
followMouse: true,
|
|
tooltipFormatString: '%.1f, %.1f',
|
|
useAxesFormatters: false
|
|
},
|
|
highlighter: { show: true },
|
|
seriesDefaults: {
|
|
shadow: true,
|
|
shadowAlpha: 0.1,
|
|
shadowDepth: 2,
|
|
fillToZero: true,
|
|
pointLabels: { show: false },
|
|
showMarker: false,
|
|
markerOptions: {
|
|
style: 'circle',
|
|
size: 12
|
|
},
|
|
rendererOptions: {
|
|
highlightMouseOver: true
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
show: true,
|
|
color: 'rgba(198,88,88,.6)',
|
|
negativeColor: 'rgba(100,50,50,.6)',
|
|
showMarker: true,
|
|
showLine: true,
|
|
fill: true,
|
|
fillAndStroke: true,
|
|
markerOptions: {
|
|
style: 'filledCircle',
|
|
size: 8,
|
|
shadow: false
|
|
},
|
|
rendererOptions: {
|
|
smooth: true,
|
|
constrainSmoothing: true
|
|
// tension: 0.8
|
|
}
|
|
},
|
|
{
|
|
show: true,
|
|
color: 'rgba(44,215,198, 0.7)',
|
|
negativeColor: 'rgba(22,115,98, 0.2)',
|
|
fill: false,
|
|
showMarker: true,
|
|
fillAndStroke: true,
|
|
rendererOptions: {
|
|
smooth: true,
|
|
constrainSmoothing: true
|
|
// tension: 0.6
|
|
},
|
|
markerOptions: {
|
|
style: 'filledCircle',
|
|
size: 8,
|
|
shadow: false
|
|
},
|
|
}
|
|
],
|
|
axes: {
|
|
xaxis: {
|
|
pad: 1.0,
|
|
tickOptions: {
|
|
showGridline: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
pad: 1.05
|
|
}
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<?php include "topbanner.inc"; ?>
|
|
<div class="example-content">
|
|
<?php include "nav.inc"; ?>
|
|
|
|
<div id="chart1" style="height:500px; width:800px;"></div>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|