1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <?php include('common.inc.php'); $tgid = 44028; $from = (isset($_REQUEST['from']) ? $_REQUEST['from'] : strtotime("2012-09-12")); $to = (isset($_REQUEST['to']) ? $_REQUEST['to'] : strtotime("2012-12-12")); include_header("fdds"); $sth = $conn->prepare('select distinct date_trunc(\'day\', call_timestamp) as rdate from recordings order by rdate'); $sth->execute(); foreach ($sth->fetchAll() as $row) { echo '<a href="?from=' . strtotime($row['rdate']) . '&to=' . strtotime($row['rdate'] . ' +1 day') . '">' . $row['rdate'] . '</a> <br>'; } ?> <div class="span12"> <table width="100%" height="775px"> <tr> <td valign="middle"><span class="arrow-w" style="font-size:2em;"><</span></td> <td width="95%"> <div id="placeholder" style="width:100%;height:575px;"></div> </td> <td valign="middle"><span class="arrow-e" style="font-size:2em;">></span></td> </tr> </table> <script> var data = []; var plot; var options = { lines: { show: true }, points: { show: true }, xaxis: { mode: 'time', labelsAngle: 45 }, selection: { mode: 'x', fps: 30 }, series: { lines: { show: true }, points: { show: true } }, mouse: { track: true, relative: true } }; $(function () { // graph var placeholder = document.getElementById("placeholder"); drawGraph(options); // Hook into the 'flotr:select' event. Flotr.EventAdapter.observe(placeholder, 'flotr:select', function (area) { // Draw graph with new area graph = drawGraph({ xaxis: {min: area.x1, max: area.x2, mode: 'time', labelsAngle: 45}, yaxis: {min: area.y1, max: area.y2} }); }); // When graph is clicked, draw the graph with default area. Flotr.EventAdapter.observe(placeholder, 'flotr:click', function () { drawGraph(); }); getData('<?php echo $tgid; ?>', '<?php echo $from ?>', '<?php echo $to ?>'); }); // Draw graph with default options, overwriting with passed options function drawGraph(opts) { // Clone the options, so the 'options' variable always keeps intact. var o = Flotr._.extend(Flotr._.clone(options), opts || {}); // Return a new graph. return Flotr.draw( placeholder, data, o ); } function onDataReceived(series) { data = [] for (var key in series.data) { data[data.length] = {label: key, data: series.data[key]}; } drawGraph(options); } function getData(sensorID, from, to) { $.ajax({ url: "<?php echo $basePath; ?>calls.json.php?action=graphcount&tgid=" + sensorID + "&from=" + from + "&to=" + to, method: 'GET', dataType: 'json', success: onDataReceived }); } </script> </div> <?php include_footer(); ?> |