html5 boiler plate
[scannr.git] / viewcalls.php
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
<?php
include('common.inc.php');
$tgid = 1;
?>
<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 }
        };
    window.onload = function() {
        // graph
     
        
        var placeholder = $("#placeholder");
    
        var plot = $.plot(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?"+sensorID+"/"+from+"/"+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>