jdarling/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Really this is a hack that would be better off if it were
in the base of crossfilter.  As it is it will filter the data
up properly but for some reason does not filter the data down
properly.
What I mean is if you select something on the Inbound/Outbound
chart the Inbound/Outbound Sums charts do not update accordingly
but if you select data on any of the Inbound/Outbound Sums charts
the other charts update accordingly.
View live at: https://rawgit.com/jdarling/fb701fcaead21168cb7a/raw/index.html

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>dc.js - Dimensional Charting Javascript Library</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
    <style>
      body, html{
        margin: 0;
        padding: 0;
      }
      #monthly-volume-chart g.y {
        display: none;
      }
      .chart-container{
        display: block;
        height: 220px;
        width: 240px;
        float: left;
        border: 1px dotted silver;
        margin: 2px;
        text-align: center;
      }
      .chart{
        margin: 0 30px;
      }
      .chart-container h2{
        margin: 0;
        padding: 0 5px;
        border-bottom: 1px solid silver;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <p>From <a href="https://gist.github.com/jdarling/fb701fcaead21168cb7a">https://gist.github.com/jdarling/fb701fcaead21168cb7a</a></p>
    <p>Really this is a hack that would be better off if it were
in the base of crossfilter.  As it is it will filter the data
up properly but for some reason does not filter the data down
properly.</p>

<p>What I mean is if you select something on the Inbound/Outbound
chart the Inbound/Outbound Sums charts do not update accordingly
but if you select data on any of the Inbound/Outbound Sums charts
the other charts update accordingly.</p>
    <div class="chart-container">
      <h2>Inbound/Outbound</h2>
      <div class="chart" id="inboundToOutboundChart"></div>
    </div>
    <div class="chart-container">
      <h2>Group</h2>
      <div class="chart" id="groupChart"></div>
    </div>
    <div class="chart-container">
      <h2>Sums</h2>
      <div class="chart" id="inboundAndOutboundSums"></div>
    </div>
    <div class="chart-container">
      <h2>Inbound Sums</h2>
      <div class="chart" id="inboundSums"></div>
    </div>
    <div class="chart-container">
      <h2>Outbound Sums</h2>
      <div class="chart" id="outboundSums"></div>
    </div>
    <div class="chart-container">
      <h2>Sums (Pie)</h2>
      <div class="chart" id="inboundAndOutboundSumsPie"></div>
    </div>
    <div class="chart-container">
      <h2>Inbound Sums (Pie)</h2>
      <div class="chart" id="inboundSumsPie"></div>
    </div>
    <div class="chart-container">
      <h2>Outbound Sums (Pie)</h2>
      <div class="chart" id="outboundSumsPie"></div>
    </div>

    <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
    <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
    <script type="text/javascript">
      var gainOrLossChart = dc.pieChart('#inboundToOutboundChart');
      var groupChart = dc.pieChart('#groupChart');
      var inboundAndOutboundSums = dc.rowChart('#inboundAndOutboundSums');
      var inboundSumsChart = dc.rowChart('#inboundSums');
      var outboundSumsChart = dc.rowChart('#outboundSums');
      var inboundAndOutboundSumsPie = dc.pieChart('#inboundAndOutboundSumsPie');
      var inboundSumsPie = dc.pieChart('#inboundSumsPie');
      var outboundSumsPie = dc.pieChart('#outboundSumsPie');

      // This is the magic override method
      var filterGroup = function(group, k){
        var _all = group.all;
        group.all = function(){
          var all = _all();
          return all.filter(k);
        };
        return group;
      };

      var ndx = new crossfilter([
            {
              duration: 123.000,
              direction: 'inbound',
              group: 1,
              name: 'item 1'
            },
            {
              duration: 53.253,
              direction: 'outbound',
              group: 2,
              name: 'item 2'
            },
            {
              name: 'foobar'
            },
            {
              duration: 198.000,
              direction: 'inbound',
              group: 1,
              name: 'item 3'
            },
            {
              duration: 202.789,
              direction: 'inbound',
              group: 2,
              name: 'item 4'
            },
          ].filter(function(d){
            return !!d.duration;
          }));

      var nameDimension = ndx.dimension(function(d){
        return d.name + '-' + d.direction.substr(0, 1);
      });

      var nameGroup = nameDimension.group().reduceSum(function(d){
        return d.duration;
      });

      var groupDimension = ndx.dimension(function(d){
        return 'Group '+d.group;
      });

      var groupGroup = groupDimension.group().reduceSum(function(d){
        return d.duration;
      });

      var directionDimension = ndx.dimension(function(d){
        return d.direction;
      });

      var directionGroup = directionDimension.group().reduceSum(function(d){
        return d.duration;
      });

      var addDirection = function(direction){
        return function(p, v){
          if(v.direction===direction){
            return p+v.duration;
          }
          return 0;
        };
      };
      var removeDirection = function(direction){
        return function(p, v){
          if(v.direction===direction){
            return p-v.duration;
          }
          return 0;
        };
      };

      // Create a custom dimension that retains the information
      // to be kept so we can filter the view later on
      var seperateDirectionDimension = ndx.dimension(function(d){
        return {
          name: d.name,
          direction: d.direction,
          duration: d.duration,
          valueOf: function(){
            return this.name + '-' + this.direction.substr(0, 1);
          }
        };
      });

      var inboundDimension = seperateDirectionDimension;
      // Now create a filtered group based on the direction using our overrider
      var inboundGroup = filterGroup(seperateDirectionDimension.group(), function(d){
        return d.key.direction === 'inbound';
      });

      var outboundDimension = seperateDirectionDimension;
      // Now create a filtered group based on the direction using our overrider
      var outboundGroup = filterGroup(seperateDirectionDimension.group(), function(d){
        return d.key.direction === 'inbound';
      });

      gainOrLossChart
        .width(180) // (optional) define chart width, :default = 200
        .height(180) // (optional) define chart height, :default = 200
        .radius(80) // define pie radius
        .dimension(directionDimension) // set dimension
        .group(directionGroup) // set group
        ;

      groupChart
        .width(180) // (optional) define chart width, :default = 200
        .height(180) // (optional) define chart height, :default = 200
        .radius(80) // define pie radius
        .dimension(groupDimension) // set dimension
        .group(groupGroup) // set group
        ;

      inboundAndOutboundSums.width(180)
        .height(180)
        .margins({top: 20, left: 10, right: 10, bottom: 20})
        .group(nameGroup)
        .dimension(nameDimension)
        ;

      inboundSumsChart.width(180)
        .height(180)
        .margins({top: 20, left: 10, right: 10, bottom: 20})
        .group(inboundGroup)
        .dimension(inboundDimension)
        .label(function(d){
          return d.key.name;
        })
        .valueAccessor(function(d){
          return d.key.duration;
        })
        ;

      outboundSumsChart.width(180)
        .height(180)
        .margins({top: 20, left: 10, right: 10, bottom: 20})
        .group(outboundGroup)
        .dimension(outboundDimension)
        .label(function(d){
          return d.key.name;
        })
        .valueAccessor(function(d){
          return d.key.duration;
        })
        ;

      inboundAndOutboundSumsPie
        .width(180) // (optional) define chart width, :default = 200
        .height(180) // (optional) define chart height, :default = 200
        .radius(80) // define pie radius
        .dimension(nameDimension) // set dimension
        .group(nameGroup) // set group
        ;

      inboundSumsPie
        .width(180) // (optional) define chart width, :default = 200
        .height(180) // (optional) define chart height, :default = 200
        .radius(80) // define pie radius
        .dimension(inboundDimension) // set dimension
        .group(inboundGroup) // set group
        .label(function(d){
          return d&&d.key?d.key.name:null;
        })
        .valueAccessor(function(d){
          return d&&d.key?d.key.duration:null;
        })
        ;

      outboundSumsPie
        .width(180) // (optional) define chart width, :default = 200
        .height(180) // (optional) define chart height, :default = 200
        .radius(80) // define pie radius
        .dimension(outboundDimension) // set dimension
        .group(outboundGroup) // set group
        .label(function(d){
          return d&&d.key?d.key.name:null;
        })
        .valueAccessor(function(d){
          return d&&d.key?d.key.duration:null;
        })
        ;

      dc.renderAll();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>dc.js - Dimensional Charting Javascript Library</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
	<style>
	body, html{
	margin: 0;
	padding: 0;
	}
	#monthly-volume-chart g.y {
	display: none;
	}
	.chart-container{
	display: block;
	height: 220px;
	width: 240px;
	float: left;
	border: 1px dotted silver;
	margin: 2px;
	text-align: center;
	}
	.chart{
	margin: 0 30px;
	}
	.chart-container h2{
	margin: 0;
	padding: 0 5px;
	border-bottom: 1px solid silver;
	text-align: left;
	}
	</style>
	</head>
	<body>
	<p>From <a href="https://gist.github.com/jdarling/fb701fcaead21168cb7a">https://gist.github.com/jdarling/fb701fcaead21168cb7a</a></p>
	<p>Really this is a hack that would be better off if it were
	in the base of crossfilter. As it is it will filter the data
	up properly but for some reason does not filter the data down
	properly.</p>

	<p>What I mean is if you select something on the Inbound/Outbound
	chart the Inbound/Outbound Sums charts do not update accordingly
	but if you select data on any of the Inbound/Outbound Sums charts
	the other charts update accordingly.</p>
	<div class="chart-container">
	<h2>Inbound/Outbound</h2>
	<div class="chart" id="inboundToOutboundChart"></div>
	</div>
	<div class="chart-container">
	<h2>Group</h2>
	<div class="chart" id="groupChart"></div>
	</div>
	<div class="chart-container">
	<h2>Sums</h2>
	<div class="chart" id="inboundAndOutboundSums"></div>
	</div>
	<div class="chart-container">
	<h2>Inbound Sums</h2>
	<div class="chart" id="inboundSums"></div>
	</div>
	<div class="chart-container">
	<h2>Outbound Sums</h2>
	<div class="chart" id="outboundSums"></div>
	</div>
	<div class="chart-container">
	<h2>Sums (Pie)</h2>
	<div class="chart" id="inboundAndOutboundSumsPie"></div>
	</div>
	<div class="chart-container">
	<h2>Inbound Sums (Pie)</h2>
	<div class="chart" id="inboundSumsPie"></div>
	</div>
	<div class="chart-container">
	<h2>Outbound Sums (Pie)</h2>
	<div class="chart" id="outboundSumsPie"></div>
	</div>

	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
	<script type="text/javascript">
	var gainOrLossChart = dc.pieChart('#inboundToOutboundChart');
	var groupChart = dc.pieChart('#groupChart');
	var inboundAndOutboundSums = dc.rowChart('#inboundAndOutboundSums');
	var inboundSumsChart = dc.rowChart('#inboundSums');
	var outboundSumsChart = dc.rowChart('#outboundSums');
	var inboundAndOutboundSumsPie = dc.pieChart('#inboundAndOutboundSumsPie');
	var inboundSumsPie = dc.pieChart('#inboundSumsPie');
	var outboundSumsPie = dc.pieChart('#outboundSumsPie');

	// This is the magic override method
	var filterGroup = function(group, k){
	var _all = group.all;
	group.all = function(){
	var all = _all();
	return all.filter(k);
	};
	return group;
	};

	var ndx = new crossfilter([
	{
	duration: 123.000,
	direction: 'inbound',
	group: 1,
	name: 'item 1'
	},
	{
	duration: 53.253,
	direction: 'outbound',
	group: 2,
	name: 'item 2'
	},
	{
	name: 'foobar'
	},
	{
	duration: 198.000,
	direction: 'inbound',
	group: 1,
	name: 'item 3'
	},
	{
	duration: 202.789,
	direction: 'inbound',
	group: 2,
	name: 'item 4'
	},
	].filter(function(d){
	return !!d.duration;
	}));

	var nameDimension = ndx.dimension(function(d){
	return d.name + '-' + d.direction.substr(0, 1);
	});

	var nameGroup = nameDimension.group().reduceSum(function(d){
	return d.duration;
	});

	var groupDimension = ndx.dimension(function(d){
	return 'Group '+d.group;
	});

	var groupGroup = groupDimension.group().reduceSum(function(d){
	return d.duration;
	});

	var directionDimension = ndx.dimension(function(d){
	return d.direction;
	});

	var directionGroup = directionDimension.group().reduceSum(function(d){
	return d.duration;
	});

	var addDirection = function(direction){
	return function(p, v){
	if(v.direction===direction){
	return p+v.duration;
	}
	return 0;
	};
	};
	var removeDirection = function(direction){
	return function(p, v){
	if(v.direction===direction){
	return p-v.duration;
	}
	return 0;
	};
	};

	// Create a custom dimension that retains the information
	// to be kept so we can filter the view later on
	var seperateDirectionDimension = ndx.dimension(function(d){
	return {
	name: d.name,
	direction: d.direction,
	duration: d.duration,
	valueOf: function(){
	return this.name + '-' + this.direction.substr(0, 1);
	}
	};
	});

	var inboundDimension = seperateDirectionDimension;
	// Now create a filtered group based on the direction using our overrider
	var inboundGroup = filterGroup(seperateDirectionDimension.group(), function(d){
	return d.key.direction === 'inbound';
	});

	var outboundDimension = seperateDirectionDimension;
	// Now create a filtered group based on the direction using our overrider
	var outboundGroup = filterGroup(seperateDirectionDimension.group(), function(d){
	return d.key.direction === 'inbound';
	});

	gainOrLossChart
	.width(180) // (optional) define chart width, :default = 200
	.height(180) // (optional) define chart height, :default = 200
	.radius(80) // define pie radius
	.dimension(directionDimension) // set dimension
	.group(directionGroup) // set group
	;

	groupChart
	.width(180) // (optional) define chart width, :default = 200
	.height(180) // (optional) define chart height, :default = 200
	.radius(80) // define pie radius
	.dimension(groupDimension) // set dimension
	.group(groupGroup) // set group
	;

	inboundAndOutboundSums.width(180)
	.height(180)
	.margins({top: 20, left: 10, right: 10, bottom: 20})
	.group(nameGroup)
	.dimension(nameDimension)
	;

	inboundSumsChart.width(180)
	.height(180)
	.margins({top: 20, left: 10, right: 10, bottom: 20})
	.group(inboundGroup)
	.dimension(inboundDimension)
	.label(function(d){
	return d.key.name;
	})
	.valueAccessor(function(d){
	return d.key.duration;
	})
	;

	outboundSumsChart.width(180)
	.height(180)
	.margins({top: 20, left: 10, right: 10, bottom: 20})
	.group(outboundGroup)
	.dimension(outboundDimension)
	.label(function(d){
	return d.key.name;
	})
	.valueAccessor(function(d){
	return d.key.duration;
	})
	;

	inboundAndOutboundSumsPie
	.width(180) // (optional) define chart width, :default = 200
	.height(180) // (optional) define chart height, :default = 200
	.radius(80) // define pie radius
	.dimension(nameDimension) // set dimension
	.group(nameGroup) // set group
	;

	inboundSumsPie
	.width(180) // (optional) define chart width, :default = 200
	.height(180) // (optional) define chart height, :default = 200
	.radius(80) // define pie radius
	.dimension(inboundDimension) // set dimension
	.group(inboundGroup) // set group
	.label(function(d){
	return d&&d.key?d.key.name:null;
	})
	.valueAccessor(function(d){
	return d&&d.key?d.key.duration:null;
	})
	;

	outboundSumsPie
	.width(180) // (optional) define chart width, :default = 200
	.height(180) // (optional) define chart height, :default = 200
	.radius(80) // define pie radius
	.dimension(outboundDimension) // set dimension
	.group(outboundGroup) // set group
	.label(function(d){
	return d&&d.key?d.key.name:null;
	})
	.valueAccessor(function(d){
	return d&&d.key?d.key.duration:null;
	})
	;

	dc.renderAll();
	</script>
	</body>
	</html>