57 lines
1.8 KiB
Cheetah
57 lines
1.8 KiB
Cheetah
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<link href="/style.css" rel="stylesheet">
|
|
<script type="text/javascript" src="/js/q-4.1.min.js"></script>
|
|
<script type="text/javascript" src="/js/moment.js"></script>
|
|
<script type="text/javascript" src="/js/moment-timezone-with-data.js"></script>
|
|
<script type="text/javascript" src="/js/rrdGraphPng.js"></script>
|
|
<script type="text/javascript" src="/js/rrdGraphCtrl.js"></script>
|
|
<script type="text/javascript">
|
|
q.ready(function(){
|
|
|
|
// 'activate' the charts
|
|
var graph = q('.graph').rrdGraphPng({
|
|
canvasPadding: 120,
|
|
initialStart: null
|
|
});
|
|
|
|
// crate a control panel and attach it to the charts
|
|
q('#ctrl').rrdGraphCtrl(graph,{
|
|
initialTimeRange: 'Last 2 Days',
|
|
resetTimeOnDateChange: true,
|
|
timeRanges: {
|
|
"Last 60 Minutes": { order: 0, len: 60, end: 'minute' },
|
|
"Last 6 Hours": { order: 1, len: 6, end: 'hour' },
|
|
"Last 24 Hours": { order: 2, len: 24, end: 'hour' },
|
|
"Last 2 Days": { order: 3, len: 2, end: 'day' },
|
|
"Last 7 Days": { order: 4, len: 7, end: 'day' },
|
|
"Last 31 Days": { order: 5, len: 31, end: 'day' },
|
|
"Last 3 Months": { order: 5, len: 3, end: 'month' },
|
|
"Last 12 Months": { order: 6, len: 12, end: 'month' }
|
|
}
|
|
});
|
|
|
|
// you can also remove all the magic again
|
|
q('#rebinder').on('click',function(){
|
|
// q('#ctrl').dispose();
|
|
q('.graph').dispose();
|
|
var graph = q('.graph').rrdGraphPng({
|
|
canvasPadding: 120,
|
|
initialStart: null
|
|
});
|
|
q('#ctrl').rebind(graph);
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="ctrl"></div><br/>
|
|
<div><img
|
|
style="width:1400px;height:800px" class="graph"
|
|
data-src-template="/cgi-bin/graph.pl?graph=[% GRAPH %]&width=1400&height=800&start={{start}}&end={{end}}"
|
|
/></div>
|
|
</body>
|
|
</html>
|