DC.js - axis margins

by DJ Martin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js"></script>
<div id="chart"></div>

JavaScript

var chartExample = {
    
     
    initChart: function (allCodes, data) {

        var ndx = crossfilter(data),
            runDimension = ndx.dimension(function (d) {
                return d.run;
            }),
            openActionCountGroup =  runDimension.group().reduceSum(function (d) {
                if(d.open)
                    return 1;
                else return 0;
            }),
            closedActionCountGroup =  runDimension.group().reduceSum(function (d) {
                if(!d.open)
                    return 1;
                else return 0;
            }),
            chart = dc.barChart("#chart");

        chart
    .x(d3.scale.ordinal().domain(allCodes))
    .height(300)
    .width(300)
    .margins({left: 50, right: 30, top: 0, bottom: 40})
    .xUnits(dc.units.ordinal)
    .yAxisLabel("Number of actions")
    .elasticY(true)
    .dimension(runDimension)
    .group(openActionCountGroup,)
    .legend(dc.legend().x(540).y(10))
    .title(function(d) { return d.key + ": " + d.value; });
        
        dc.renderAll();
    },
    initData: function () {
        var codes = ["MR001", "MR002", "MR003"];
        var allData = [];
        for(var i = 0; i < 4000; i++)
        {
           var datum = {run: "", open: true};
           var runHelp = Math.floor(Math.random() * 100);
           if(runHelp < 80)
               datum.run = codes[1];
           else if(runHelp < 95)
               datum.run = codes[2];
           else datum.run = codes[0];
           var openHelp = Math.floor(Math.random() * 100);
           if(openHelp < 2)
               datum.open = false;
           allData.push(datum); 
        }
        chartExample.initChart(codes, allData);
    }
};

chartExample.initData();