Skip to content

Instantly share code, notes, and snippets.

@jorgeehernandez

jorgeehernandez/.block

Last active April 23, 2018 03:57
Show Gist options
  • Save jorgeehernandez/6fabebe9ad597469ec538897379f98f5 to your computer and use it in GitHub Desktop.
Save jorgeehernandez/6fabebe9ad597469ec538897379f98f5 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.10/dc.min.js' type='text/javascript'>
</script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div id="alarmtypesPie"> </div>
<div id="bar-chart"> </div>
<script>
// Feel free to change or delete any of the code you see in this editor!
var data = crossfilter([
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 250, 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: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 200, type: "cash"},
{date: "2011-11-14T17:02: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: 100, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}]);
var total_dimension = data.dimension(function(d) { return d.type; });
var dateDimention = data.dimension(function(d) { return new Date(d.date).getTime(); });
var groupGroup = total_dimension.group().reduceSum(function(d){
return d.total;
});
var groupGroup2 = total_dimension.group().reduceSum(function(d){
return d.tip;
});
var alarmtypesPie = dc.pieChart('#alarmtypesPie');
alarmtypesPie.width(250)
.height(250)
.radius(125)
.innerRadius(50)
.group(groupGroup)
.dimension(total_dimension)
.renderTitle(true);
//.label(function(d) { return d.value})
var bar1 = dc.barChart("#bar-chart")
.width(768)
.height(380)
.xUnits(dc.units.ordinal)
.brushOn(false)
.x(d3.scale.ordinal())
.xAxisLabel('Fruit')
.yAxisLabel('Quantity Sold')
.dimension(dateDimention)
.barPadding(0.1)
.outerPadding(0.05)
.group(groupGroup);
dc.renderAll();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment