<!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 24 Hours',
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:1000px;height:300px" class="graph"
data-src-template="/cgi-bin/graph.pl?graph=[% GRAPH %]&width=1000&height=300&start={{start}}&end={{end}}"
/></div>
</body>
</html>