| <?php | <?php |
| include('common.inc.php'); | include('common.inc.php'); |
| $tgid = 1; | $tgid = 44028; |
| include_header("fdds"); | |
| ?> | ?> |
| <div class="span12"> | <div class="span12"> |
| <table width="100%" height="375px"><tr><td valign="middle"><span class="arrow-w" style="font-size:2em;"></span></td><td width="95%"><div id="placeholder" style="width:100%;height:375px;"></div></td><td valign="middle"><span class="arrow-e" style="font-size:2em;"></span></td></tr></table> | <table width="100%" height="375px"><tr><td valign="middle"><span class="arrow-w" style="font-size:2em;"><</span></td><td width="95%"><div id="placeholder" style="width:100%;height:375px;"></div></td><td valign="middle"><span class="arrow-e" style="font-size:2em;">></span></td></tr></table> |
| <script> | <script> |
| var data = []; | var data = []; |
| var plot; | var plot; |
| var options = { | var options = { |
| lines: { show: true }, | lines: { show: true }, |
| points: { show: true }, | points: { show: true }, |
| xaxis: { mode: "time" }, | xaxis: { mode: "time" }, |
| crosshair: { mode: "x" }, | crosshair: { mode: "x" }, |
| series: { | series: { |
| lines: { show: true }, | lines: { show: true }, |
| points: { show: true } | points: { show: true } |
| }, | }, |
| grid: { hoverable: true, clickable: true } | grid: { hoverable: true, clickable: true } |
| }; | }; |
| window.onload = function() { | $(function () { |
| // graph | // graph |
| var placeholder = $("#placeholder"); | var placeholder = document.getElementById("placeholder"); |
| var plot = $.plot(placeholder, data, options); | var plot = Flotr.draw(placeholder, data, options); |
| $("#placeholder").bind("plothover", function (event, pos, item) { | $("#placeholder").bind("plothover", function (event, pos, item) { |
| if (item) { | if (item) { |
| if (previousPoint != item.dataIndex) { | if (previousPoint != item.dataIndex) { |
| previousPoint = item.dataIndex; | previousPoint = item.dataIndex; |
| $("#tooltip").remove(); | $("#tooltip").remove(); |
| var x = item.datapoint[0].toFixed(2), | var x = item.datapoint[0].toFixed(2), |
| y = item.datapoint[1].toFixed(2); | y = item.datapoint[1].toFixed(2); |
| var d = new Date(); | var d = new Date(); |
| d.setTime(x); | d.setTime(x); |
| var time = d.getDate() + "-" + (d.getMonth()+1) + "-" + d.getFullYear() | var time = d.getDate() + "-" + (d.getMonth()+1) + "-" + d.getFullYear() |
| + " " + d.getUTCHours() + ':'+ (d.getUTCMinutes().toString().length == 1 ? '0'+ d.getMinutes(): d.getUTCMinutes()); | + " " + d.getUTCHours() + ':'+ (d.getUTCMinutes().toString().length == 1 ? '0'+ d.getMinutes(): d.getUTCMinutes()); |
| showTooltip(item.pageX, item.pageY, | showTooltip(item.pageX, item.pageY, |
| item.series.label + " at " + time + " = " + y); | item.series.label + " at " + time + " = " + y); |
| } | } |
| } | } |
| else { | else { |
| $("#tooltip").remove(); | $("#tooltip").remove(); |
| previousPoint = null; | previousPoint = null; |
| } | } |
| }); | }); |
| getData('<?php echo $tgid; ?>','<?php echo strtotime("10/10/2012") ?>','<?php echo strtotime("12/10/2012") ?>'); | getData('<?php echo $tgid; ?>','<?php echo strtotime("10/10/2012") ?>','<?php echo strtotime("12/10/2012") ?>'); |
| }; | }); |
| function onDataReceived(series) { | function onDataReceived(series) { |
| data =[] | data =[] |
| data[data.length] = series; | data[data.length] = series; |
| plot = $.plot($("#placeholder"), data, options); | plot = $.plot($("#placeholder"), data, options); |
| } | } |
| function getData(sensorID,from,to) { | function getData(sensorID,from,to) { |
| $.ajax({ | $.ajax({ |
| url: "<?php echo $basePath; ?>/calls.json.php?"+sensorID+"/"+from+"/"+to, | url: "<?php echo $basePath; ?>calls.json.php?action=graph&tgid="+sensorID+"&from="+from+"&to="+to, |
| method: 'GET', | method: 'GET', |
| dataType: 'json', | dataType: 'json', |
| success: onDataReceived | success: onDataReceived |
| }); | }); |
| } | } |
| function showTooltip(x, y, contents) { | function showTooltip(x, y, contents) { |
| $('<div id="tooltip">' + contents + '</div>').css( { | $('<div id="tooltip">' + contents + '</div>').css( { |
| position: 'absolute', | position: 'absolute', |
| display: 'none', | display: 'none', |
| top: y + 5, | top: y + 5, |
| left: x + 5, | left: x + 5, |
| border: '1px solid #fdd', | border: '1px solid #fdd', |
| padding: '2px', | padding: '2px', |
| 'background-color': '#fee', | 'background-color': '#fee', |
| opacity: 0.80 | opacity: 0.80 |
| }).appendTo("body").fadeIn(200); | }).appendTo("body").fadeIn(200); |
| } | } |
| </script> | </script> |
| </div> | </div> |
| <?php | |
| include_footer(); | |
| ?> |