now as kick ass histogram to represent the numeric fields!

client/coffee/controllers/keyStatCtrl.coffee

@@ -1,5 +1,6 @@
 root = this;
 
+
 humanValueOfStatisticalAbreviation =
     mean: "mean"
     std: "standard deviation"
@@ -8,6 +9,11 @@ humanValueOfStatisticalAbreviation =
     max: "maximum"
     n: "number of documents"
 
+findHistogramMin = (stats) ->
+    return Math.max(stats.min, stats.mean - 3 * stats.std)
+
+findHistogramMax = (stats) ->
+    return Math.min(stats.max, stats.mean + 3 * stats.std)
 
 
 getAxisLabel = (min, stepSize, numberOfBins) ->
@@ -17,13 +23,9 @@ root.controllers.controller('keyStatCtrl', ['$scope', '$routeParams', 'util', ($
     $scope.name = $routeParams.key
     $scope.stats = []
     
-    url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
-    url = "#{ url }/stats/#{$routeParams.key}"
+    base_url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
+    stat_url = "#{ base_url }/stats/#{$routeParams.key}"
 
-    util.get(url).then((res) ->
-        for key, val of res.data
-            $scope.stats.push({name: humanValueOfStatisticalAbreviation[key], value: val })
-    )
     
     $scope.chartConfig =
         options:
@@ -34,16 +36,30 @@ root.controllers.controller('keyStatCtrl', ['$scope', '$routeParams', 'util', ($
                     groupPadding: 0
                     pointPadding: 0
                     borderWidth: 0
-         xAxis:
-            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        xAxis:
+            categories: []
         title:
             text: 'Distribution'
         loading: false
         series: [{
-            data: [10, 15, 12, 8, 7, 4, 12, 12, 9, 11],
+            data: [],
             name: $routeParams.key
             color: '#008CBA'
         }]
+            
+    
+    util.get(stat_url).then((res) ->
+        for key, val of res.data
+            $scope.stats.push({name: humanValueOfStatisticalAbreviation[key], value: val })
+        numberOfBins = 50
+        min = findHistogramMin(res.data)
+        max = findHistogramMax(res.data)
+        histogram_url = "#{ base_url }/histogram/#{$routeParams.key}/#{min}/#{max}/#{numberOfBins}"
+        return util.get(histogram_url)
+    ).then((res) ->
+        $scope.chartConfig.series[0].data = res.data.values
+        $scope.chartConfig.xAxis.categories = getAxisLabel(res.data.min, res.data.step_size, res.values.length)
+    )
     
 ])