Vislib: Percentage Bar Charts and Grouped Bar Charts

[stormpython]

Adds the ability to create percentage bar charts and grouped bar charts. These changes work for both time series and nominal (d3 ordinal) scales. See photos below.

To use them, you'll need to specify an offset string in the parameters passed into the Vis constructor.
There are 3 options available:

1. zero (default) - stacked bars
2. expand - percentage bars
3. group - grouped bars

For example:

var params = {

  type: 'vertical-bar',
  offset: 'expand'
};

var myVis = new Vis($el, params);

NOTE: There are still issues that need discussing before the pull request can be merged.

The first is regarding event data returned on by an event listener. Currently, it passes back the percentage value with the percentage bar charts, but in many cases, we will need both the percentage values and the original doc count, avg, min, max, etc.

The second issue is regarding buckets being cutoff on the left and right side of the charts, particularly on grouped bar charts. Some values in the group will appear while others will not.

Finally, there is the need for error handling with grouped bar charts on a time scale. Bars may become too thin to interact with.

[w33ble]

Should provide the vislib side of #1618

[rashidkpc]

1. zero (default) - stacked bars
2. expand - percentage bars
3. group - grouped bars

Why not call these what they are?

1. stacked (default)
2. percentage
3. grouped

Also, the "offset" parameter seems weird to me, is there a better name for that? View? Mode? Something better than either of those?

[stormpython]

@rashidkpc, there are several reasons.

1. Both zero (default, referring to zero-filled) and percentage are stacked.
2. These are the same terms which the d3 API uses to alias the functions - so, less work having to think about what stacked is an alias for. However, it does assume that someone has that particular d3 knowledge.

I am fine with changing offset to something else. Disregard the above comments, we can easily change the options to the 3 you listed.

[stormpython]

Ok, so, now the options are:

1. stacked (default) - stacked bars
2. percentage - percentage bars
3. grouped - grouped bars

For example:

var params = {

  type: 'vertical-bar',
  mode: 'percentage'
};

var myVis = new Vis($el, params);

[stormpython]

stormpython@fee0c73 adds formatted percentage values to tooltips, as well as displays the actual value. See picture below.

NOTE: This change should also work for area charts, pull request #1674.

[stormpython]

I am removing the discuss tag, since I've taken care of 2 of the major issues on my previous list in the initial pull request comment. I think this is ready for review.

[simianhacker]

This seems ready to go... just need to rebase against master so we can cleanly merge it.

[w33ble]

Single line here is fine

[stormpython]

Merged with master and made a correction in the y_axis.js file that @w33ble commented on.

[martinhynar]

Hi, in which version will this feature be present? I have CPU data from collectd that needs to be displayed as percentage and having the percentage being displayed when hovering over part of the bar would be great. I am running now Kibana4beta3 and when displaying max values, the percentage is not in the tooltip.

[simianhacker]

@martinhynar It's coming in the next release which will be a release candidate.

[martinhynar]

I just tried Kibana 4 RC1 and it seems that percentage values are not displayed in the tooltip.