Grouped Bar chart dc.js

Question

I need to show a grouped bar chart with filtering capabilities. I'm using dc with cross-filter in my project.

The chart exist with d3 js http://bl.ocks.org/mbostock/3887051; any help to implement with dc.js will great. I have gone through Multi-series bar chart in DC-js and https://github.com/dc-js/dc.js/issues/558, but they are not complete.

My requirement is date will be the group, systems will be the X axis and hit points will be the Y axis.

My Data is as below.

I wanted to make group by process_date with apo_loc as X axis and hit_percentage as Y axis, but I'm not able to achieve it. I have done for hit_count, miss_count and total with date. Please help me to do this with hit_percentage, system with date.

    var dim = this.ndx.dimension(dimFun);
    var grp = dim.group().reduce(
            function (p, v) {
                p.hit_count += +v.hit_count;
                p.miss_count += +v.miss_count;
                p.total += +v.total;
                return p;
            },
            function (p, v) {
                p.hit_count -= +v.hit_count;
                p.miss_count -= +v.miss_count;
                p.total -= +v.total;
                return p;
            },
            function () {
                return {
                    hit_count: 0,
                    miss_count: 0,
                    total:0
                };
            }
      );

    bar.margins({
        top: 20,
        left: 30,
        right: 10,
        bottom: 20
    })
    .width(barWidth)
    .height(barHeight)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .brushOn(false)
    .dimension(dim)
    .renderLabel(true)
    .renderType("group")
     .group(grp, "Hit Point")
    .valueAccessor(function (d) {
        return d.value.hit_count;
    })
    .stack(grp, "Miss Point", function (d) {
        return d.value.miss_count;
    })  .stack(grp, "Total", function (d) {
        return d.value.total;
    });