CODEWITHSUNDEEP
javascriptdc.jscrossfilter
Somnath Pal
Somnath Pal

Reputation: 1512

Crossfilter for DC chart not working properly

I am new to DC chart. I am trying to show pie, bar and row chart of patients for specific regions using static array. I am using the example as showing here. The issue is when I select a single bar from bar chart, pie and row chart gets updated with the selected slice highlighted and rest greyed out. But when I select another bar (it has now 2 bars) as filter. The pie and row chart highlights the latest slide and removes the previous one. Any help in this regard will be much appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DC.js Crossfilter Dashboard</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.0/dc.min.css" />
</head>
<body>

<div id="chart-container">
  <div id="bar-chart"></div>
  <div id="row-chart"></div>
  <div id="pie-chart"></div>
</div>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.0/dc.min.js"></script>

<script>
  var myarr = [
    {site: 'New Haven', patients: 2000},
    {site: 'New York', patients: 5000},
    {site: 'Trenton', patients: 7000},
    {site: 'Philadelphia', patients: 3000},
    {site: 'Wilmington', patients: 1200}
  ];

  var ndx = crossfilter(myarr);

  var siteDim = ndx.dimension(function(d) { return d.site; });
  var patientsGroup = siteDim.group().reduceSum(function(d) { return d.patients; });

  var barChart = dc.barChart("#bar-chart");

  barChart
    .width(400)
    .height(200)
    .dimension(siteDim)
    .group(patientsGroup)
    .x(d3.scaleBand().domain(myarr.map(function(d) { return d.site; })))
    .xUnits(dc.units.ordinal)
    .barPadding(0.1);

  var rowChart = dc.rowChart("#row-chart");

  rowChart
    .width(400)
    .height(200)
    .dimension(siteDim)
    .group(patientsGroup);

  var pieChart = dc.pieChart("#pie-chart");

  pieChart
    .width(200)
    .height(200)
    .dimension(siteDim)
    .group(patientsGroup);

  dc.renderAll();

  var isFiltering = false;

  dc.chartRegistry.list().forEach(function(chart) {
    chart.on('filtered', function() {
      if (!isFiltering) {
        isFiltering = true;

        var filters = chart.filters();
        console.log('filters: ',filters)
        dc.chartRegistry.list().forEach(function(otherChart) {
          console.log(otherChart == chart)
          if (otherChart !== chart) {
            if (filters.length > 0) {
              console.log('has filters: ',filters)
              otherChart.filter([filters]);
            } else {
              console.log('has no filters: ',filters)
              otherChart.filterAll();
            }
          }
        });

        dc.redrawAll();

        isFiltering = false;
      }
    });
  });
</script>

</body>
</html>

enter image description here

Upvotes: 0

Views: 57

Answers (1)

Somnath Pal
Somnath Pal

Reputation: 1512

 dc.chartRegistry.list().forEach(function(chart) {
    chart.on('filtered', function() {
      if (!isFiltering) {
        isFiltering = true;

        var filters = chart.filters();
        dc.chartRegistry.list().forEach(function(otherChart) {
          console.log(otherChart == chart)
          if (otherChart !== chart) {
            if (filters.length > 0) {
              console.log('has filters: ',filters)
              otherChart.filter(null) //This resolved the issue
              otherChart.filter([filters]);
            } else {
              otherChart.filterAll();
            }
          }
        });

        dc.redrawAll();

        isFiltering = false;
      }
    });
  });

Upvotes: 0

Related Questions