<?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']) . '&amp;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;">&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',
                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();
?>