soc.2012.www-statscollector: 7eb160cb: Add HTML/CSS for the various statistics ..

[sanket at soc.pidgin.im]

----------------------------------------------------------------------
Revision: 7eb160cbf39fd9cadd2e696bb236cce304a4ff39
Parent:   4342784e1c27d4ebfa207abc5967ea8e30e7db33
Author:   sanket at soc.pidgin.im
Date:     05/31/12 00:47:38
Branch:   im.pidgin.soc.2012.www-statscollector
URL: http://d.pidgin.im/viewmtn/revision/info/7eb160cbf39fd9cadd2e696bb236cce304a4ff39

Changelog: 

Add HTML/CSS for the various statistics displayed

Changes against parent 4342784e1c27d4ebfa207abc5967ea8e30e7db33

  patched  pidgin_stats_collector/templates/display/index.html

-------------- next part --------------
============================================================
--- pidgin_stats_collector/templates/display/index.html	3e236eeb308e2d300e80afbcac1a4cae8e876189
+++ pidgin_stats_collector/templates/display/index.html	8da29dd8054b471c62b29741ba23c341f852e6c8
@@ -77,10 +77,11 @@
 		<div id="app-bit" style="min-width: 400px; height: 200px; margin: 0 auto"></div>
 		
 		<h2>Hardware architecture</h2>
-		<div id="arch-bar" style="min-width: 400px; height: 200px; margin: 0 auto"></div>
-
 		<div id="arch-pie" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
 		
+		<h2>Purple Version</h2>
+		<div id="purple-version" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+	
 	</div>
     <div id="altlinks">
       <h3>Download in other formats:</h3>
@@ -253,78 +254,43 @@ $(function () {
 });
 </script>
 
-<script type="text/javascript"> <!-- Architecture type information -->
+<script type="text/javascript"> <!-- Arch name, pie chart -->
 $(function () {
     var chart;
     $(document).ready(function() {
         chart = new Highcharts.Chart({
             chart: {
-                renderTo: 'arch-bar',
-                type: 'bar'
+                renderTo: 'arch-pie',
+                plotBackgroundColor: null,
+                plotBorderWidth: null,
+                plotShadow: true
             },
             title: {
-                text: 'Types of architecture'
+                text: 'OS Info'
             },
-
-            xAxis: {
-                categories: ['Architectures'],
-                title: {
-                    text: null
-                }
-            },
-            yAxis: {
-                min: 0,
-                title: {
-                    text: 'Various Architectures',
-                    align: 'high'
-                }
-            }, 
             tooltip: {
                 formatter: function() {
-                    return ''+
-                        this.series.name +': '+ this.y +' %';
+                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                 }
             },
             plotOptions: {
-                bar: {
+                pie: {
+                    allowPointSelect: true,
+                    cursor: 'pointer',
                     dataLabels: {
                         enabled: true,
-                    },
-                    stacking: 'percent'
+                        color: '#000000',
+                        connectorColor: '#000000',
+                        formatter: function() {
+                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
+                        }
+                    }
                 }
             },
-            legend: {
-                layout: 'vertical',
-                align: 'right',
-                verticalAlign: 'top',
-                x: -100,
-                y: 100,
-                floating: true,
-                borderWidth: 1,
-                backgroundColor: '#FFFFFF',
-                shadow: true
-            },
-            credits: {
-                enabled: false
-            },
             series: [{
-                name: 'x86',
-                data: [{{ arch_name.0 }}]
-            }, {
-                name: 'x86_64',
-                data: [{{ arch_name.1 }}]
-            }, {
-                name: 'ppc',
-                data: [{{ arch_name.2 }}]
-            }, {
-                name: 'ppc64',
-                data: [{{ arch_name.3 }}]
-            }, {
-                name: 'ia64',
-                data: [{{ arch_name.4 }}]
-            }, {
-                name: 'unknown',
-                data: [{{ arch_name.5 }}]
+                type: 'pie',
+                name: 'OS Share',
+                data: {{ arch_pie|safe }},
             }]
         });
     });
@@ -332,48 +298,58 @@ $(function () {
 });
 </script>
 
-<script type="text/javascript"> <!-- Arch name, pie chart -->
+
+<script type="text/javascript"> <!-- Purple version information -->
 $(function () {
     var chart;
     $(document).ready(function() {
         chart = new Highcharts.Chart({
             chart: {
-                renderTo: 'arch-pie',
-                plotBackgroundColor: null,
-                plotBorderWidth: null,
-                plotShadow: true
+                renderTo: 'purple-version',
+                type: 'column'
             },
             title: {
-                text: 'OS Info'
+                text: 'Purple Version'
             },
+
+            xAxis: {
+                categories: {{ purple_v_cat|safe }},
+                title: {
+                	text: 'Categories'
+                }
+            },
+            yAxis: {
+                min: 0,
+                title: {
+                    text: 'Count'
+                }
+            },
+            legend: {
+                layout: 'vertical',
+                backgroundColor: '#FFFFFF',
+                align: 'left',
+                verticalAlign: 'top',
+                x: 100,
+                y: 70,
+                floating: true,
+                shadow: true
+            },
             tooltip: {
                 formatter: function() {
-                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
+                    return ''+
+                        this.x +': '+ this.y;
                 }
             },
             plotOptions: {
-                pie: {
-                    allowPointSelect: true,
-                    cursor: 'pointer',
-                    dataLabels: {
-                        enabled: true,
-                        color: '#000000',
-                        connectorColor: '#000000',
-                        formatter: function() {
-                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
-                        }
-                    }
+                column: {
+                    pointPadding: 0.2,
+                    borderWidth: 0
                 }
             },
-            series: [{
-                type: 'pie',
-                name: 'OS Share',
-                data: {{ arch_pie|safe }},
-            }]
+                series: [{{ purple_v_dat|safe }}]
         });
     });
     
 });
-</script>
-
+		</script>
 </body></html>
\ No newline at end of file