dc.js - Brush & Multiple Charts

When enabling a brush to show in one chart on page load, the other charts become disabled.

by Denys Biliaiev

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.css">
<script src=" //cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<body>

    <div style='clear:both'></div>
    <div style='clear:both'></div>
    <div id="barChartTemp"></div>

 
</body>

CSS

body {
    background-color: white;
    zoom: 50%;
}
/* layout of charts */
 #oceanRowChart {
    float:left;
}
#oceanRowChart .axis {
    visibility:hidden;
}
#barChartDate {
    float: left;
    margin-top:44px;
}
#reset {
    float: left;
    margin-left: 35px;
}
#barChartTemp {
    float: left;
    width:25%;
}
#barChartPsal {
    float: left;
    width:25%;
}
#barChartDepth {
    float: left;
    width:25%;
}
#barChartPH {
    float: left;
    width:25%;
}
#middleRow {
    float:left;
}
.dc-chart.axis y {
    visibility:hidden;
}
.dc-table-label {
    font-weight:bold;
}
/* overwrite bootstrap table */
 .container .row {
    margin-left: -150px;
}