--- a/charts.php
+++ b/charts.php
@@ -1,68 +1,131 @@
 <?php
 include_once('include/common.inc.php');
-include_header();
+include_header('Charts');
 $db = $server->get_db('disclosr-agencies');
- 
-
 ?>
 <div class="foundation-header">
     <h1><a href="about.php">Charts</a></h1>
     <h4 class="subheader">Lorem ipsum.</h4>
 </div>
-<div id="placeholder" style="width:900px;height:600px;"></div>
+<div id="scores" style="width:900px;height:500px;"></div>
+<div id="employees" style="width:1000px;height:900px;"></div>
 <script id="source">
-window.onload = function() {
-            $(document).ready(function() {
-    var d1 = [];
-    var labels = [];
+    window.onload = function() {
+        $(document).ready(function() {
+            var d1 = [];
+            var scorelabels = [];
     <?php
     try {
-    $rows = $db->get_view("app", "scoreHas?group=true", null, true)->rows;
+        $rows = $db->get_view("app", "scoreHas?group=true", null, true)->rows;
 
-    /*foreach ($rows as $key => $row) {
-        echo "       d1.push([$key, {$row->value}]);".PHP_EOL;
-        echo "        labels.push('{$row->key}');".PHP_EOL;
-    }*/
-    $dataValues = Array();
-    foreach ($rows as $row) {
-        $dataValues[$row->value] = $row->key;
+
+        $dataValues = Array();
+        foreach ($rows as $row) {
+            $dataValues[$row->value] = $row->key;
+        }
+        $i = 0;
+        ksort($dataValues);
+        foreach ($dataValues as $value => $key) {
+
+            echo "       d1.push([$i, $value]);" . PHP_EOL;
+            echo "        scorelabels.push('$key');" . PHP_EOL;
+            $i++;
+        }
+    } catch (SetteeRestClientException $e) {
+        setteErrorHandler($e);
     }
-    $i = 0;
-    ksort($dataValues);
-    foreach($dataValues as $value => $key) {
+    ?>
+                function scoretrackformatter(obj) {
+                    if (scorelabels[Math.floor(obj.x)]) {
+                        return (scorelabels[Math.floor(obj.x)])+"="+obj.y;
+                     
+                    } else {
+                        return "";
+                    }
+                }
+                function scoretickformatter(val, axis) {
+                    if (scorelabels[Math.floor(val)]) {
+                        return '<p style="margin-top:8em;-webkit-transform:rotate(-90deg);">'+(scorelabels[Math.floor(val)])+"</b>";
+                     
+                    } else {
+                        return "";
+                    }
+                }
+                Flotr.draw(document.getElementById("scores"), [ {data: d1}], {
+                    HtmlText: true,
+                    bars : {
+                        show : true
+                    },
+                    mouse : {
+                        track : true,
+                        relative : true,
+                        trackFormatter: scoretrackformatter
+                    },yaxis: {
+                        autoscaling: true
+                    },
+                    xaxis: {
+                    autoscaling: true,
+                        minorTickFreq: 0.6,
+                        noTicks : scorelabels.length,
+                        tickFormatter: scoretickformatter
+                    }
+                });
+                
+                
+                
+                
+                
+                
+                
+                
+var emplabels = [];
+function emptrackformatter(obj) {
+                   
+                        return (obj.series.label)+" = "+obj.y+" in "+emplabels[Math.floor(obj.x)];
+                     
+                }
+                function emptickformatter(val, axis) {
+                    if (emplabels[Math.floor(val)]) {
+                        return '<p style="margin-top:8em;-webkit-transform:rotate(-90deg);">'+(emplabels[Math.floor(val)])+"</b>";
+                     
+                    } else {
+                        return "";
+                    }
+                }
+function onDataReceived(series) {
+    emplabels = series.labels;
+                       Flotr.draw(document.getElementById("employees"), series.data, {
+                    mouse : {
+                        track : true,
+                        relative : true,
+                    trackFormatter: emptrackformatter
+                    },yaxis: {
+                        max: 10000,
+                        scaling: 'logarithmic'
+                    },
+                    xaxis: {
+                    minorTickFreq: 1,
+                    noTicks: emplabels.length,
+                    showMinorLabels: true,
+                        tickFormatter: emptickformatter
+                    },
+                    legend: {
+                        show: false
+                    }
+                });
+                }
         
-        echo "       d1.push([$i, $value]);".PHP_EOL;
-        echo "        labels.push('$key');".PHP_EOL;
-        $i++;
-    }
-} catch (SetteeRestClientException $e) {
-    setteErrorHandler($e);
-}
-?>
-    
-        $.plot($("#placeholder"), [ d1], {
-            series: {
-                bars: { show: true, barWidth: 0.6 }
-            },
-            xaxis: {
-                 tickFormatter: function formatter(val, axis) {
-                     if (labels[val]) {
-                         return(labels[val]);
-                     
-                 } else {
-                     return "";
-                 }
-           
-        },
-                labelAngle: 90
-            }
-        });
-    
+                $.ajax({
+                    url: "admin/exportEmployees.csv.php?format=json",
+                    method: 'GET',
+                    dataType: 'json',
+                    success: onDataReceived
+                });
 
     
-    
-});
-};
+            });
+        };
+ 
 </script>
 
 <?php