add zooming to graph
[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
<?php
include('common.inc.php');
$tgid = 44028;
include_header("fdds");
?>
<div class="span12">
 
<table width="100%" height="775px"><tr><td valign="middle"><span class="arrow-w" style="font-size:2em;">&lt;</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;">&gt;</span></td></tr></table>
<script>
        var data = [];
        var plot;
           var options = {
            lines: { show: true },
            points: { show: true },
            xaxis: { mode: "time" },
               selection : { mode : 'x', fps : 30 },
            series: {
                lines: { show: true },
                points: { show: 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},
                    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 strtotime("10/09/2012") ?>','<?php echo strtotime("10/11/2012") ?>');
        
    });
 
        // 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();
?>