/soc/2012/sanket/www-statscollector: f58677407988: Add color and...

[sanket]

Changeset: f586774079880e3f2a2f36b22dac5eb832ed669e
Author:	 sanket <sanket at soc.pidgin.im>
Date:	 2012-08-03 10:30 +0530
Branch:	 default
URL: http://hg.pidgin.im/soc/2012/sanket/www-statscollector/rev/f58677407988

Description:

Add color and tooltip for drill down/up

All columns which can be drilled down, will be shown in a color which is
different from the other un-drillable entities. This way the user will have
a better experience with browsing the charts.

The tooltips will show either "Drilldown" or "Return" in case of drilldowns,
in case a column does not show either drill down/up it'll not have any
suggestive text.

diffstat:

 pidgin_stats_collector/media/js/charts.js |  26 ++++++++++++++++++--------
 1 files changed, 18 insertions(+), 8 deletions(-)

diffs (83 lines):

diff --git a/pidgin_stats_collector/media/js/charts.js b/pidgin_stats_collector/media/js/charts.js
--- a/pidgin_stats_collector/media/js/charts.js
+++ b/pidgin_stats_collector/media/js/charts.js
@@ -33,7 +33,7 @@ function drawPie(dat, e, ttle){
             series: [{
                 type: 'pie',
                 name: 'OS Share',
-                data: dat,
+                data: dat
             }]
         });
     });
@@ -43,12 +43,23 @@ function drawPie(dat, e, ttle){
 function drawChart(cat, dat, e, title)
 	{
     var chart;
-
+    var drilled = false;
+    var drilled_color = '#7D0000';
+    var undirlled_color = '#666699';
+    
+       $.each(dat, function(key){
+        		if(dat[key]['drilldown']){
+        			dat[key]['color'] = drilled_color;
+                }
+                else dat[key]['color'] = undirlled_color;
+        });
+ 
     
         var colors = Highcharts.getOptions().colors,
             categories = cat,
             name = title,
             data = dat;
+        
     
         function setChart(name, categories, data, color) {
             chart.xAxis[0].setCategories(categories);
@@ -56,7 +67,7 @@ function drawChart(cat, dat, e, title)
             chart.addSeries({
                 name: name,
                 data: data,
-                color: color || '#4747FF'
+                color: color || undirlled_color
             });
         }
     
@@ -112,7 +123,7 @@ function drawChart(cat, dat, e, title)
                         s = this.x +':<b>'+ this.y + '</b><br/>';
                     if (point.drilldown) {
                         s += 'Click to view more';
-                    } else {
+                    } else if(chart.drilled) {
                         s += 'Click to return';
                     }
                     return s;
@@ -120,8 +131,7 @@ function drawChart(cat, dat, e, title)
             },
             series: [{
                 name: name,
-                data: data,
-                color: '#4747FF'
+                data: data
             }],
             exporting: {
                 enabled: false
@@ -139,7 +149,7 @@ function pluginDetailChart(cat, dat, e, 
                 type: 'bar',
                 margin: [ 100, 100, 200, 200],
              	 plotBackgroundColor: "#999966",
-             	 backgroundColor: "#000",
+             	 backgroundColor: "#000"
             },
             title: {
                 text: ttle
@@ -226,7 +236,7 @@ function bitChart(app_bit, os_bit, e) {
             plotOptions: {
                 bar: {
                     dataLabels: {
-                        enabled: true,
+                        enabled: true
                     },
                     stacking: 'percent'
                 }