dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
67 lines (58 loc) • 2.05 kB
HTML
<html lang="en">
<head>
<title>dc.js - Composite Chart Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/dc.css"/>
</head>
<body>
<div class="container">
<script type="text/javascript" src="header.js"></script>
<div id="test_composed"></div>
<script type="text/javascript" src="../js/promise-polyfill.js"></script>
<script type="text/javascript" src="../js/fetch.umd.js"></script>
<script type="text/javascript" src="../js/d3.js"></script>
<script type="text/javascript" src="../js/crossfilter.js"></script>
<script type="text/javascript" src="../js/dc.js"></script>
<script type="text/javascript">
var composite = dc.compositeChart("#test_composed");
Promise.all([d3.csv("morley.csv"), d3.csv("morley2.csv")]).then(function(results) {
var exp1 = results[0],
exp2 = results[1];
var ndx = crossfilter();
ndx.add(exp1.map(function(d) {
return {x: +d.Run, y2:0, y1: d.Speed * d.Run / 1000};
}));
ndx.add(exp2.map(function(d) {
return {x: +d.Run, y1:0, y2: d.Speed * d.Run / 1000};
}));
var dim = ndx.dimension(dc.pluck('x')),
grp1 = dim.group().reduceSum(dc.pluck('y1')),
grp2 = dim.group().reduceSum(dc.pluck('y2'));
composite
.width(768)
.height(480)
.x(d3.scaleLinear().domain([0,20]))
.yAxisLabel("The Y Axis")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose([
dc.lineChart(composite)
.dimension(dim)
.colors('red')
.group(grp1, "Top Line")
.dashStyle([2,2]),
dc.lineChart(composite)
.dimension(dim)
.colors('blue')
.group(grp2, "Bottom Line")
.dashStyle([5,5])
])
.brushOn(false)
.render();
});
</script>
</div>
</body>
</html>