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,8 @@
  
     <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> 
+              <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.stack.js"></script> 
 
 ';
 $includedFlot = true;
@@ -18,11 +20,13 @@
 	 ?>
 	   <center><div id="cndist" style="width:900px;height:550px"></div></center>
 <script type="text/javascript"> 
+       var placeholder = $("#cndist");
 	 $(function () {
 
  var d1 = [];
+ var d2 = [];
 <?php
-$query = 'select cnid, count(*) from (select ("CNID" - MOD("CNID",100)) as cnid from contractnotice where "CNID" < 999999) as a group by cnid order by cnid';
+$query = 'select cnid, count(*) from (select ("CNID" - MOD("CNID",100)) as cnid from contractnotice where "CNID" < 999999 and "parentCN" is null) as a group by cnid order by cnid';
 $query = $conn->prepare($query);
 $query->execute();
 if (!$query) {
@@ -34,23 +38,93 @@
 
 	echo "d1.push([ ".intval($delta['cnid']).", ".intval($delta['count'])."]); \n";
 };
+$query = 'select cnid, count(*) from (select ("CNID" - MOD("CNID",100)) as cnid from contractnotice where "CNID" < 999999 and "parentCN" is not null) as a group by cnid order by cnid';
+$query = $conn->prepare($query);
+$query->execute();
+if (!$query) {
+	databaseError($conn->errorInfo());
+	return Array();
+}
+
+foreach ($query->fetchAll() as $delta) {
+
+	echo "d2.push([ ".intval($delta['cnid']).", ".intval($delta['count'])."]); \n";
+};
 ?>
 
-       var placeholder = $("#cndist");
-
-    var plot = $.plot(placeholder, [
+var data = [
        {
             data: d1,
+series: {
+                   lines: { show: true },
+                   points: { show: true }
+               },
             bars: { show: true }
         },
-    ],
-        {
-
+       {
+            data: d2,
+series: {
+                   lines: { show: true },
+                   points: { show: true }
+               },
+            bars: { show: true }
+        },
+    ];
+    var options = 
+    {
+series: {
+                stack: true,
+            },
             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 +502,4 @@
 }
 
 ?>
+