Handle showLabels(...) like showAggregates(...) like the documentation says.

Author: ralphbean

Source/Visualizations/AreaChart.js

@@ -89,8 +89,9 @@ $jit.ST.Plot.NodeTypes.implement({
           if(aggValue !== false) {
             ctx.fillText(aggValue !== true? aggValue : valAcum, x, y - acumLeft - config.labelOffset - label.size/2, width);
           }
-          if(showLabels(node.name, valLeft, valRight, node)) {
-            ctx.fillText(node.name, x, y + label.size/2 + config.labelOffset);
+          var labValue = showLabels(node.name, valLeft, valRight, node)
+          if(labValue !== false) {
+            ctx.fillText(labValue !== true? labValue : node.name, x, y + label.size/2 + config.labelOffset);
           }
           ctx.restore();
         }

Source/Visualizations/BarChart.js

@@ -235,15 +235,17 @@ $jit.ST.Plot.NodeTypes.implement({
               ctx.fillText(aggValue, x + width/2, y - Math.max.apply(null, dimArray) - label.size/2 - config.labelOffset);
             }
           }
-          if(showLabels(node.name, valAcum, node)) {
+          var labValue = showLabels(node.name, valAcum, node);
+          if(labValue !== false) {
+            labValue = labValue !== true? labValue : node.name;
             if(horz) {
               ctx.textAlign = 'center';
               ctx.translate(x - config.labelOffset - label.size/2, y + height/2);
               ctx.rotate(Math.PI / 2);
-              ctx.fillText(node.name, 0, 0);
+              ctx.fillText(labValue, 0, 0);
             } else {
               ctx.textAlign = 'center';
-              ctx.fillText(node.name, x + width/2, y + label.size/2 + config.labelOffset);
+              ctx.fillText(labValue, x + width/2, y + label.size/2 + config.labelOffset);
             }
           }
           ctx.restore();

Templates/AreaChart/test3.html

@@ -0,0 +1,3 @@
+$def with (model)
+
+<div id="inner-details"></div>

Tests/AreaChart/test3.js

@@ -0,0 +1,124 @@
+function init(){
+    //init data
+    var json = {
+        'label': ['label A', 'label B', 'label C', 'label D'],
+        'values': [
+        {
+          'label': 'date A',
+          'values': [20, 40, 15, 5]
+        }, 
+        {
+          'label': 'date B',
+          'values': [30, 10, 45, 10]
+        }, 
+        {
+          'label': 'date E',
+          'values': [38, 20, 35, 17]
+        }, 
+        {
+          'label': 'date F',
+          'values': [58, 10, 35, 32]
+        }, 
+        {
+          'label': 'date D',
+          'values': [55, 60, 34, 38]
+        }, 
+        {
+          'label': 'date C',
+          'values': [26, 40, 25, 40]
+        }]
+        
+    };
+    var json2 = {
+        'values': [
+        {
+          'label': 'date A',
+          'values': [10, 40, 15, 7]
+        }, 
+        {
+          'label': 'date B',
+          'values': [30, 40, 45, 9]
+        }, 
+        {
+          'label': 'date D',
+          'values': [55, 30, 34, 26]
+        }, 
+        {
+          'label': 'date C',
+          'values': [26, 40, 85, 28]
+        }]
+        
+    };
+    //end
+    var infovis = document.getElementById('infovis');
+    //init AreaChart
+    var areaChart = new $jit.AreaChart({
+      //id of the visualization container
+      injectInto: 'infovis',
+      //add animations
+      animate: true,
+      //separation offsets
+      Margin: {
+        top: 5,
+        left: 5,
+        right: 5,
+        bottom: 5
+      },
+      labelOffset: 10,
+      // function to modify sums
+      showAggregates: function(name, left, right, node, acum) {
+        if ( acum > 120 ) { return acum; }
+        return false;
+      },
+      // function to modify labels
+      showLabels: function(name, left, right, node) {
+        if ( name.indexOf('B') != -1 ) { return name; }
+        return false;
+      },
+      //could also be 'stacked'
+      type: useGradients? 'stacked:gradient' : 'stacked',
+      //label styling
+      Label: {
+        type: labelType, //can be 'Native' or 'HTML'
+        size: 13,
+        family: 'Arial',
+        color: 'white'
+      },
+      //enable tips
+      Tips: {
+        enable: true,
+        onShow: function(tip, elem) {
+          tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
+        }
+      },
+      //add left and right click handlers
+      filterOnClick: true,
+      restoreOnRightClick:true
+    });
+    //load JSON data.
+    areaChart.loadJSON(json);
+    //end
+    var list = $jit.id('id-list'),
+        button = $jit.id('update'),
+        restoreButton = $jit.id('restore');
+    //update json on click
+    $jit.util.addEvent(button, 'click', function() {
+      var util = $jit.util;
+      if(util.hasClass(button, 'gray')) return;
+      util.removeClass(button, 'white');
+      util.addClass(button, 'gray');
+      areaChart.updateJSON(json2);
+    });
+    //restore graph on click
+    $jit.util.addEvent(restoreButton, 'click', function() {
+      areaChart.restore();
+    });
+    //dynamically add legend to list
+    var legend = areaChart.getLegend(),
+        listItems = [];
+    for(var name in legend) {
+      listItems.push('<div class=\'query-color\' style=\'background-color:'
+          + legend[name] +'\'>&nbsp;</div>' + name);
+    }
+    list.innerHTML = '<li>' + listItems.join('</li><li>') + '</li>';
+}

tests.py

@@ -741,7 +741,19 @@
             """,
             'Extras': ['excanvas.js'],
             'Example': False
-        }
+        },
+        {
+            'Title': 'Area Chart Example overridden aggregate values and labels',
+            'Description': 
+            """
+            A static Area Chart example with gradients that displays tooltips when hovering the stacks.<br /><br />
+            Left-click a Stack to apply a filter to it.<br /><br />
+            Right-click to restore all stacks.<br /><br />
+            Click the Update button to update the JSON data.
+            """,
+            'Extras': ['excanvas.js'],
+            'Example': False
+        },
     ],
 
    'BarChart': [