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