47 lines
1.3 KiB
Cheetah
47 lines
1.3 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 7 Days',
|
|
resetTimeOnDateChange: true
|
|
});
|
|
|
|
// 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>
|