Integrate supplier piechart
[contractdashboard.git] / lib / graphs.inc.php
blob:a/lib/graphs.inc.php -> blob:b/lib/graphs.inc.php
--- a/lib/graphs.inc.php
+++ b/lib/graphs.inc.php
@@ -6,6 +6,7 @@
  
     <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.js"></script> 
         <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.pie.js"></script> 
+              <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.selection.js"></script> 
 
 ';
 $includedFlot = true;
@@ -18,6 +19,7 @@
 	 ?>
 	   <center><div id="cndist" style="width:900px;height:550px"></div></center>
 <script type="text/javascript"> 
+       var placeholder = $("#cndist");
 	 $(function () {
 
  var d1 = [];
@@ -36,21 +38,69 @@
 };
 ?>
 
-       var placeholder = $("#cndist");
-
-    var plot = $.plot(placeholder, [
+var data = [
        {
             data: d1,
+series: {
+                   lines: { show: true },
+                   points: { show: true }
+               },
             bars: { show: true }
         },
-    ],
-        {
+    ];
+    var options = 
+    {
 
             grid: { hoverable: true, clickable: true, labelMargin: 17  },
+            selection: { mode: "x" }
+    };
+
+placeholder.bind("plotselected", function (event, ranges) {
+            plot = $.plot(placeholder, data,
+                          $.extend(true, {}, options, {
+                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
+                          }));
     });
-
+    var previousPoint = null;
+    placeholder.bind("plothover", function (event, pos, item) {
+        $("#x").text(pos.x.toFixed(2));
+        $("#y").text(pos.y.toFixed(2));
+ 
+            if (item) {
+                if (previousPoint != item.dataIndex) {
+                    previousPoint = item.dataIndex;
+                    
+                    $("#tooltip").remove();
+                    var x = item.datapoint[0].toFixed(2),
+                        y = item.datapoint[1].toFixed(2);
+                    
+                    showTooltip(item.pageX, item.pageY,
+                                item.series.label + " of " + x + " = " + y);
+                }
+            }
+            else {
+                $("#tooltip").remove();
+                previousPoint = null;            
+            }
+    });
+
+    var plot = $.plot(placeholder, data,
+        options);
  });
 
+   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> 
 <?php
 }
@@ -428,3 +478,4 @@
 }
 
 ?>
+