--- a/viewcalls.php
+++ b/viewcalls.php
@@ -1,1 +1,85 @@
+<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 $sensorID; ?>','<?php echo strtotime("12/1/2010") ?>','<?php echo strtotime("12/2/2010") ?>');
+        
+    };
+    
+    function onDataReceived(series) {
+        data =[]
+        data[data.length] = series;
+        
+        plot = $.plot($("#placeholder"), data, options);
+    }
+    function getData(sensorID,from,to) {
+        $.ajax({
+            url: "<?php echo base_url(); ?>/sensor/json_graph/"+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>