CODEWITHSUNDEEP
dc.js
Kreedz Zhen
Kreedz Zhen

Reputation: 398

Is there any way to retrieve the chart object by its id in dc.js

I am add rowcharts according the user input, append needed div elements, then add rowchart to this element, but I do not know how to retrieve this chart when when handle the label, when I use dc.rowChart("#rowchart_" + checkedValues[i]), it worked but it will throw me error, about the dimisions, and also I cannot set the reset link for the chart. My question is that: Is there ant way to retrieve the chart object?

Appreciate any help!!! Thanks!

    for(var i = 0; i < checkedValues.length; i++){
    $(".rowCharts").append("<div id='rowchart_" + checkedValues[i] + "' class='col-sm-12 col-md-12 col-lg-5'></div>");
    dc.rowChart("#rowchart_" + checkedValues[i])
        .width(400)
        .height(300)
        .margins({ top: 20, left: 10, right: 10, bottom: 20 })
        .dimension(ndx.dimension(function (d) { return d[checkedValues[i]]; }))
        .group(ndx.dimension(function (d) { return d[checkedValues[i]]; }).group())
        // .label(function (d) { 
        //     if (dc.rowChart("#rowchart_" + checkedValues[i]).hasFilter() && !dc.rowChart("#rowchart_" + checkedValues[i]).hasFilter(d.key)) { 
        //         return d.key + '(0%)'; 
        //     }
        //     var label = d.key;
        //     if (all.value()) { 
        //         label += '(' + (d.value / all.value() * 100).toFixed(2) + '%)'; 
        //     }
        //     return label;
        //  })
        .title(function (d) { return d.value; })
        .on('filtered.monitor', chartFilteredCallback)
        .elasticX(true)
        .rowsCap(10)
        .ordering(function (d) { return -d.value })
        .xAxis().ticks(5);
}

Upvotes: 2

Views: 289

Answers (1)

Kreedz Zhen
Kreedz Zhen

Reputation: 398

I found the answer. I made an array to store the charts.

 rowCharts = [];
for(var i = 0; i < checkedValues.length; i++){
    var chartId = "rowchart_" + checkedValues[i];
    $(".rowCharts").append("<div id='" + chartId + "' class='col-sm-12 col-md-12 col-lg-5'></div>");
    var chart = dc.rowChart("#" + chartId);
    var dimension = ndx.dimension(function (d) { return d[checkedValues[i]]; });
    var group = dimension.group();

    rowCharts.push(chart);

    chart
        .width(400)
        .height(300)
        .margins({ top: 20, left: 10, right: 10, bottom: 20 })
        .dimension(dimension)
        .group(group)
        .label(function (d) { 
            if (chart.hasFilter() && !chart.hasFilter(d.key)) { 
                return d.key + '(0%)'; 
            }
            var label = d.key;
            if (all.value()) { 
                label += '(' + (d.value / all.value() * 100).toFixed(2) + '%)'; 
            }
            return label;
         })
        .title(function (d) { return d.value; })
        .on('filtered.monitor', chartFilteredCallback)
        .elasticX(true)
        .rowsCap(10)
        .ordering(function (d) { return -d.value })
        .xAxis().ticks(5);            
        $("#" + chartId).html('<strong>' + checkedValues[i] + '</strong><span class="reset" style="display: none;">Selected: <span class="filter"></span></span><a class="reset" href="javascript:redrawAll(rowCharts[' + i + ']);" style="display: none;"> reset</a>');
}

Upvotes: 2

Related Questions