Skip to content

Instantly share code, notes, and snippets.

@renauld94

renauld94/.block

Last active November 7, 2018 08:19
Show Gist options
  • Save renauld94/f24131bc19b5b7b87f104d4ebf7f96b7 to your computer and use it in GitHub Desktop.
Save renauld94/f24131bc19b5b7b87f104d4ebf7f96b7 to your computer and use it in GitHub Desktop.
Download ZIP
stacked bar
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="utf-8">
<title>StackedBar Chart</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />
</head>
<body>
<h1>StackedBart Chart:By Type and Quantity</h1>
<div id="stackedBarChart"></div>
<script type="text/javascript">
var paymentsRecord = [
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 3, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];
var facts = crossfilter(paymentsRecord);
var dimensionByType = facts.dimension(function(d){ return d.type; });
var groupByType = dimensionByType.group().reduce(reduceAdd,reduceRemove,reduceInitial);
function reduceAdd(p, v){
p[v.quantity] = (p[v.quantity]||0) + v.total; return p;
}
function reduceRemove(p, v){
p[v.quantity] = (p[v.quantity]||0) - v.total; return p;
}
function reduceInitial(){
return {};
}
var barChart = dc.barChart("#stackedBarChart")
.width(1024)
.height(200)
.dimension(dimensionByType)
.group(groupByType,"Quantity: 1",function(d){ return d.value[1] || 0; })
.stack(groupByType,"Quantity: 2",function(d){ return d.value[2]; })
.stack(groupByType,"Quantity: 3",function(d){ return d.value[3]; })
.x(d3.scale.ordinal().domain(['tab','visa','cash']))
.xUnits(dc.units.ordinal)
.legend(dc.legend().x(500).y(1).itemHeight(15).gap(5));
barChart.yAxis().ticks(5);
barChart.xAxis().ticks(4);
dc.renderAll();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment