subtotal
Version:
Subtotal.js is a JavaScript plugin for PivotTable.js. It renders subtotals of rows and columns with the ability to expand and collapse rows.
137 lines (121 loc) • 5.01 kB
HTML
<html>
<head>
<title>Subtotal Demo</title>
<!-- external libs from cdnjs -->
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui.min.js"></script>
<!-- PivotTable.js libs from cdnjs -->
<script type="text/javascript" src="../lib/pivot.min.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/pivot.min.css">
<script type="text/javascript" src="../lib/d3/d3.v3.4.8.js"></script>
<script type="text/javascript" src="../lib/scrollgrid/scrollgrid.latest.js"></script>
<!-- subtotal.js libs from ../dist -->
<script type="text/javascript" src="../dist/subtotal.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/subtotal.css">
<!-- optional: mobile support with jqueryui-touch-punch -->
<script type="text/javascript" src="../lib/jquery.ui.touch-punch.min.js"></script>
<!-- for examples only! script to show code to user -->
<script type="text/javascript" src="js/show_code.js"></script>
</head>
<style>
body {
font-family: Verdana;
}
table.thead.tr {
background-color: #EFEFEF ;
}
table.pvtTable .pvtRowLabel {
vertical-align: top;
white-space: nowrap;
}
table.pvtTable .pvtColLabel {
white-space: nowrap;
}
table.pvtTable .pvtAxisLabel {
white-space: nowrap;
}
.pvtRowSubtotal {
background-color: #EFEFEF ;
font-weight:bold;
}
.pvtColSubtotal {
background-color: #EFEFEF ;
font-weight:bold;
}
th.pvtRowLabel.rowexpanded {
cursor: pointer
}
.sg-grid rect {
fill: white;
stroke: grey;
}
.sg-grid text {
fill: black;
font-family: sans-serif;
font-size: 12px;
}
rect.sg-resize-handle {
opacity: 0;
cursor: col-resize;
fill: grey;
stroke: none;
}
rect.sg-resize-handle:hover {
opacity: 0.5;
}
.test {
fill: blue ;
stroke: red ;
}
</style>
<body>
<script type="text/javascript">
// This example loads the fixureData for testing purposes
fixtureData = [
["name", "gender", "colour", "birthday", "trials", "successes"],
["Nick", "male", "blue", "1982-11-07", 103, 12],
["Jane", "female", "red", "1982-11-08", 95, 25],
["John", "male", "blue", "1982-12-08", 112, 30],
["Carol", "female", "yellow", "1983-11-11", 102, 14],
["Raj", "male", "blue", "1982-11-07", 103, 12],
["Rani", "female", "red", "1982-11-08", 95, 25],
["Joshi", "male", "blue", "1982-12-09", 112, 12],
["Vel", "male", "yellow", "1982-12-01", 112, 25],
["Sai", "male", "red", "1982-11-08", 112, 30],
["Geeth", "female", "blue", "1982-12-03", 112, 14],
["Malar", "male", "red", "1982-11-05", 112, 12],
["Nila", "male", "blue", "1982-12-07", 112, 25],
["Yaazhi", "male", "yellow", "1982-12-06", 112, 30],
["Mukhi", "male", "yellow", "1982-11-07", 112, 14]];
$(function(){
var dataClass = $.pivotUtilities.SubtotalPivotData;
var renderers = $.pivotUtilities.subtotal_renderers;
$("#output").pivotUI(fixtureData, {
dataClass: dataClass,
rows: ["colour", "birthday", "name"],
cols: ["trials", "gender", "successes"],
aggregators: $.pivotUtilities.subtotal_aggregators,
vals: ["successes"],
renderers: renderers,
rendererOptions: {
// collapseColsAt: 1
// rowSubtotalDisplay: {
// hideOnExpand: true
// },
// colSubtotalDisplay: {
// hideOnExpand: true
// }
}
});
});
</script>
<p><a href="index.html">« back to examples</a></p>
<p></p>
<p>To expand and collapse rows and columns, click on ▶ and ◢ arrows in the table. Scroll down to view the code.</p>
<p></p>
<div id="output" style="margin: 30px;" height="200px" max-height="200px" display="inline-block"></div>
<p></p>
<p><a href="index.html">« back to examples</a></p>
</body>
</html>