Functional product stats

static/js/stats.js

@@ -1,40 +1,73 @@
 $(document).ready(function() {
     var charts = [];
-    var products_url = '/products';
+    var products_url = '/stats/products/';
+    var order_url = '/stats/orders/';
 
-    /* drink beer and... */
+    /* orders */
+    $.getJSON(order_url, function(data) {
+        var render_to = 'order_chart';
+
+        // define the options
+        var options =  {
+            credits: {
+                enabled: false
+            },
+            chart: {
+                renderTo: render_to,
+                plotBackgroundColor: null,
+                plotBorderWidth: null,
+                plotShadow: false
+            },
+            title: {
+                text: 'Fordeling av ordre på person'
+            },
+            tooltip: {
+                formatter: function() {
+                    return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +' %';
+                }
+            },
+            plotOptions: {
+                pie: {
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    dataLabels: {
+                        enabled: true,
+                        color: '#000000',
+                        connectorColor: '#000000',
+                        formatter: function() {
+                            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +' %';
+                        }
+                    }
+                }
+            },
+            series: [{
+                type: 'pie',
+                name: 'Orders',
+                data: data
+            }]
+        };
+        charts.push(new Highcharts.Chart(options));
+    });
+
+    /* products */
     $.getJSON(products_url, function(data) {
-        var graph_mappings = [
-        {
-            'url' : '/stats/orders',
-            'render_to' : 'order_chart'
-        }];
-        var products = data;
+        var products = data.response.products;
         for(i in products) {
-            var mapping = {
-                'url' : '/stats/product/' + products[i].id,
-                'info_url' : '/products/' + products[i].id,
-                'render_to' : 'product_chart' + products[i].id
-            };
-            graph_mappings.push(mapping);
-        }
-        for(i in graph_mappings) {
+            var render_to = 'product_chart' + products[i].product.id;
+            var series_data = products[i].counts;
             // define the options
             var options =  {
                 credits: {
                     enabled: false
                 },
                 chart: {
-                    /* TODO this is not updated right.
-                     * ie. how to get ajax-callback to update the right options-object?
-                     * */
-                    renderTo: graph_mappings[i].render_to,
+                    renderTo: render_to,
                     plotBackgroundColor: null,
                     plotBorderWidth: null,
                     plotShadow: false
                 },
                 title: {
-                    text: 'Antall ordre per bruker'
+                    text: products[i].product.name
                 },
                 tooltip: {
                     formatter: function() {
@@ -50,7 +83,7 @@ $(document).ready(function() {
                             color: '#000000',
                             connectorColor: '#000000',
                             formatter: function() {
-                                return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +' %';
+                                return '<b>'+ this.point.name +'</b>: ' + this.y;
                             }
                         }
                     }
@@ -58,14 +91,10 @@ $(document).ready(function() {
                 series: [{
                     type: 'pie',
                     name: 'Orders',
-                    data: []
+                    data: series_data
                 }]
             };
-            $.getJSON(graph_mappings[i].url, function(data) {
-                options.series[0].data = data,
-                charts.push(new Highcharts.Chart(options));
-            });
+            charts.push(new Highcharts.Chart(options));
         }
-        console.log(charts);
     });
 });