I am working on build Charts and Data Tables using DC JS . I have added Date filters separately above code so that I can select Date Ranges. However when I select Date ranges . Everything get's removed from Data Tables and sometimes it only shows data from highest date only.
Any help would be much appreciated !
`//Html Code for Date Button
<div class="col-sm-6">
<span style="font-size: 12px;">DATE<input type="text" class="form-control date_filter txt_bxe_height cstm_txt_width" id="fromdate">
</div></span>
<div style="margin-left: -4%;" class="col-sm-6"><span style="font-size: 12px;">TO
<input type="text" class="form-control date_filter txt_bxe_height" id="todate">
<h5 class="" id="daterange"></h5></span>
</div>
//For Data Table
<div class="col-sm-4">
<h4 class="titles">PLAN FOR TOMORROW</h4>
<div class="chart_custom tabel_height">
<table class="table table-bordered" id="tabel_plan"></table>
</div>
</div>
----------------------------------------------Javascript Code for both
d3.select('#daterange').on('click', function(){
var todate=$('#todate').val();
var fromdate=$('#fromdate').val();
exptDimension_recom.filterRange([fromdate,todate]);
dc.renderAll();
dc.redrawAll();
});
d3.select('#daterange2').on('click', function(){
var todate2=$('#todate2').val();
var fromdate2=$('#fromdate2').val();
exptDimension_recom.filterRange([fromdate2,todate2]);
dc.renderAll();
dc.redrawAll();
tabel_task
.width(768)
.height(480)
.size(10)
.dimension(exptDimension_task)
.group(rank2)
.columns([function (d) { return d.Date },
function (d) { return d["Tasks Performed"] }])
.sortBy(function (d) { return d.Date })
.order(d3.descending)`