Create barChart for indices

[KatiRG]

There will be a long list of indices so better to replace rowChart (horizontal bars) with a barChart (vertical bars).

[KatiRG]

Since the indices are categorical data, need to use .x(d3.scale.ordinal()).xUnits(dc.units.ordinal). Also, the average value is not automatically displayed when hovering over the bars. Use .title() as a workaround. The full code is:

                    .width(400).height(270)
                    .margins({ top: 10, right: 30, bottom: 30, left: 50 })
                    .dimension(indexDimension)                    
                    .group(avgIndexGroup) //avg count across all datasets
                    .valueAccessor(function(p) {                        
                        return p.value.average;                        
                    })
                    .elasticY(true)
                    .gap(1)
                    .title(function(d){    
                        return d.data.key
                                + " (" + indices[d.data.key] + ")" + ":\n" + d.data.value.average + " events";                       
                    })                    
                    .x(d3.scale.ordinal())                    
                    .xUnits(dc.units.ordinal); // Tell dc.js that we're using an ordinal x-axis;
                indexChart
                   .yAxis().tickFormat(d3.format("d"));

One last work-around to avoid overlapping x-axis labels: rotate the labels using css (see https://github.com/dc-js/dc.js/issues/731):

#chart-index .x.axis text {
    text-anchor: end !important;
    transform: rotate(-45deg);
}