barChart: individual labels for each value for each bar

Someone needed it. Done by changing a couple of lines.

Using $jit.version = '2.0.1';

Sample object for the barChart (taken from example1.js):

  var json = {
      'values': [
      {
        'label': 'date A',
        'labels': ['label A', 'label B', 'label C', 'label D'],
        'values': [40, 15, 5, 6]
      }, 
      {
        'label': 'date B',
        'labels': ['label E', 'label F', 'label G', 'label H'],
        'values': [30, 10, 45, 10]
      }, 
      {
        'label': 'date E',
        'labels': ['label I', 'label J', 'label K', 'label L'],
        'values': [38, 20, 35, 17]
      }, 
      {
        'label': 'date F',
        'labels': ['label M', 'label N', 'label O', 'label P'],
        'values': [58, 10, 35, 32]
      }, 
      {
        'label': 'date D',
        'labels': ['label Q', 'label R', 'label S', 'label T'],
        'values': [55, 60, 34, 38]
      }, 
      {
        'label': 'date C',
        'labels': ['label U', 'label V', 'label W', 'label X'],
        'values': [26, 40, 25, 40]
      }]
  };

just update loadJSON:

  loadJSON: function(json) {
    if(this.busy) return;
    this.busy = true;

    var prefix = $.time(), 
        ch = [], 
        delegate = this.delegate,
        //name = $.splat(json.label), 
        color = $.splat(json.color || this.colors),
        config = this.config,
        gradient = !!config.type.split(":")[1],
        animate = config.animate,
        horz = config.orientation == 'horizontal',
        that = this;

    for(var i=0, values=json.values, l=values.length; i<l; i++) {
      var val = values[i]
      var labelArray = $.splat(values[i].labels);
      var valArray = $.splat(values[i].values);
      var acum = 0;
      ch.push({
        'id': prefix + val.label,
        'name': val.label,
        'data': {
          'value': valArray,
          '$valueArray': valArray,
          '$colorArray': color,
          '$stringArray': labelArray,
          '$gradient': gradient,
          '$config': config
        },
        'children': []
      });
    }
    var root = {
      'id': prefix + '$root',
      'name': '',
      'data': {
        '$type': 'none',
        '$width': 1,
        '$height': 1
      },
      'children': ch
    };
    delegate.loadJSON(root);

    this.normalizeDims();
    delegate.compute();
    delegate.select(delegate.root);
    if(animate) {
      if(horz) {
        delegate.fx.animate({
          modes: ['node-property:width:dimArray'],
          duration:1500,
          onComplete: function() {
            that.busy = false;
          }
        });
      } else {
        delegate.fx.animate({
          modes: ['node-property:height:dimArray'],
          duration:1500,
          onComplete: function() {
            that.busy = false;
          }
        });
      }
    } else {
      this.busy = false;
    }
  },

and updateJSON:

  updateJSON: function(json, onComplete) {
    if(this.busy) return;
    this.busy = true;
    this.select(false, false, false);
    var delegate = this.delegate;
    var graph = delegate.graph;
    var values = json.values;
    var animate = this.config.animate;
    var that = this;
    var horz = this.config.orientation == 'horizontal';
    $.each(values, function(v) {
      var n = graph.getByName(v.label);
      if(n) {
        n.setData('valueArray', $.splat(v.values));
        n.setData('stringArray', $.splat(v.labels));
        // if(json.label) {
          // n.setData('stringArray', $.splat(json.label));
        // }
      }
    });
    this.normalizeDims();
    delegate.compute();
    delegate.select(delegate.root);
    if(animate) {
      if(horz) {
        delegate.fx.animate({
          modes: ['node-property:width:dimArray'],
          duration:1500,
          onComplete: function() {
            that.busy = false;
            onComplete && onComplete.onComplete();
          }
        });
      } else {
        delegate.fx.animate({
          modes: ['node-property:height:dimArray'],
          duration:1500,
          onComplete: function() {
            that.busy = false;
            onComplete && onComplete.onComplete();
          }
        });
      }
    }
  },

philogb / jit

barChart: individual labels for each value for each bar #83