dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
96 lines (82 loc) • 3.19 kB
HTML
<html lang="en">
<head>
<title>dc.js - HTML Legend 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"/>
<link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
</head>
<body>
<div class="container">
<script type="text/javascript" src="header.js"></script>
<p>This page demonstrates the usage of the html legend.
It shows example of scrollbars for the vertical menu and setting up a horizontal menu.
</p>
<p style="padding-bottom: 20px">
It also shows the selected legend highlighted
</p>
<div style="width:250px; height:150px;display: inline-block">
<div id="year"></div>
<div id="year-legend" class="dc-html-legend-container"></div>
</div>
<div style="width:250px; height:150px;display: inline-block;margin-left: 80px">
<div id="name"></div>
<div id="name-legend" class="dc-html-legend-container"></div>
</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 spendData = [
{ Name: 'Mr A', Spent: '$40', Year: 2010 },
{ Name: 'Mr B', Spent: '$10', Year: 2011 },
{ Name: 'Mr C', Spent: '$40', Year: 2012 },
{ Name: 'Mr D', Spent: '$70', Year: 2013 },
{ Name: 'Mr E', Spent: '$20', Year: 2014 },
{ Name: 'Mr F', Spent: '$50', Year: 2015 },
{ Name: 'Mr G', Spent: '$30', Year: 2016 },
{ Name: 'Mr D', Spent: '$70', Year: 2017 },
{ Name: 'Mr E', Spent: '$20', Year: 2018 },
{ Name: 'Mr F', Spent: '$50', Year: 2019 },
{ Name: 'Mr G', Spent: '$30', Year: 2020 }
];
// normalize/parse data
spendData.forEach(function (d) {
d.Spent = d.Spent.match(/\d+/)[0];
});
// set crossfilter
var ndx = crossfilter(spendData),
yearDim = ndx.dimension(function (d) {
return +d.Year;
}),
nameDim = ndx.dimension(function (d) {
return d.Name;
}),
spendPerYearGroup = yearDim.group().reduceSum(function (d) {
return +d.Spent;
}),
nameGroup = nameDim.group().reduceCount();
var yearChart = dc.pieChart("#year"),
nameChart = dc.pieChart("#name");
yearChart
.width(200)
.height(200)
.dimension(yearDim)
.group(spendPerYearGroup)
.turnOnControls(true)
.legend(dc.htmlLegend().container('#year-legend').horizontal(false).highlightSelected(true));
nameChart
.width(200)
.height(200)
.dimension(nameDim)
.group(nameGroup)
.legend(dc.htmlLegend().container('#name-legend').horizontal(true).highlightSelected(true));
yearChart.render();
nameChart.render();
</script>
</div>
</body>
</html>