index.html
6.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<title>PivotTable.js</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46914903-2', 'auto');
ga('send', 'pageview');
</script>
<!-- START COPYING HERE -->
<link rel="stylesheet" href="gh-fork-ribbon.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="gh-fork-ribbon.ie.css">
<![endif]-->
<!-- END COPYING HERE -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<style>
* {-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
body {font-family: "Open Sans"; font-size: 18px; }
h1, h2, h3, h4 {font-family: "Roboto Slab"; }
li a {text-decoration: none; line-height: 1.5}
</style>
</head>
<body style="margin: 10px;">
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/nicolaskruchten/pivottable">Clone me on GitHub</a>
</div>
</div>
<div align="center">
<h2>PivotTable.js Examples</h2>
<p style="width: 600px; margin: 10px auto;"><a href="https://github.com/nicolaskruchten/pivottable">PivotTable.js</a> is an open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop functionality written by <a href="http://nicolas.kruchten.com/">Nicolas Kruchten</a>.</p>
<p style="width: 600px; margin: 10px auto;">To see what it can do and how, browse the examples below or check out the <a href="https://github.com/nicolaskruchten/pivottable/wiki">documentation wiki</a> for full details.</p>
<p align="center">
<a href="https://www.npmjs.com/package/pivottable"><img src="../images/npm.svg"></a>
<a href="https://cdnjs.com/libraries/pivottable"><img src="../images/cdnjs.svg"></a>
<a href="../tests/"><img src="../images/tests.svg"></a>
<a href="https://github.com/nicolaskruchten/pivottable/blob/master/LICENSE.md"><img src="../images/license.svg"></a>
</p>
<p><strong>Are you using React? Check out the React port: <a href="https://react-pivottable.js.org/">react-pivottable</a>!</strong></p>
</div>
<div style="max-width: 1200px; margin: 0 auto; ">
<a href="../images/animation.gif"><img src="../images/animation.gif" style="float: left; width: 45%; min-width: 400px; max-width: 728px; margin: 20px; clear: both; "></a>
<div style="display: inline-block; width: 45%; min-width: 400px; max-width: 600px; ">
<h3 align="center">Fully Loaded Examples</h3>
<ul>
<li><a href="rcsvs.html">pivotUI() with the 700+ datasets that ship with R</a></li>
<li><a href="local.html">pivotUI() with local CSV input: bring your own dataset</a></li>
</ul>
<h3 align="center">Editable JSFiddles with Tips Dataset (<a href="http://nicolas.kruchten.com/Rdatasets/doc/reshape2/tips.html">docs</a>)</h3>
<ul>
<li><a href="https://jsfiddle.net/nicolaskruchten/kn381h7s/" target="_blank">pivot() demo</a></li>
<li><a href="https://jsfiddle.net/nicolaskruchten/w86bgq9o/" target="_blank">pivotUI() demo</a></li>
<li><a href="https://jsfiddle.net/nicolaskruchten/gq6w05j8/" target="_blank">pivotUI() demo with C3 charts</a></li>
</ul>
<h3 align="center">Basic examples</h3>
<ul>
<li><a href="simple.html">pivot()</a></li>
<li><a href="simple_agg.html">pivot() with non-count aggregator</a></li>
<li><a href="simple_function.html">pivot() with function input</a></li>
<li><a href="scatter.html">pivot() with CSV input and chart output</a></li>
<li><a href="simple_ui.html">pivotUI() with "array of objects" input</a></li>
<li><a href="simple_ui_from_table.html">pivotUI() with table element input</a></li>
</ul>
<h3 align="center">Canadian Parliament 2012 Dataset <small>(<a href="mps.csv">CSV</a> or <a href="mps.json">JSON</a>)</small></h3>
<ul>
<li><a href="mps.html">pivotUI() with derived attributes</a></li>
<li><a href="mps_prepop.html">pivotUI() prepopulated with click callback</a></li>
<li><a href="mps_agg.html">pivotUI() with custom aggregators and sort order</a></li>
<li><a href="save_restore.html">pivotUI() with configuration saving/restoring</a></li>
<li><a href="text_config.html">pivotUI() with serialized configuration</a></li>
<li><a href="onrefresh.html">pivotUI() with configuration access on refresh</a></li>
<li><a href="mps_csv.html">pivotUI() loaded from CSV</a></li>
<li><a href="mps_fr.html">pivotUI() French UI localization</a></li>
<li><a href="plotly.html">pivotUI() with Plotly chart renderers</a></li>
<li><a href="c3.html">pivotUI() with C3 chart renderers</a></li>
<li><a href="d3.html">pivotUI() with D3 renderers</a></li>
<li><a href="mps_export.html">pivotUI() with export renderers</a></li>
<li><a href="gchart.html">pivotUI() with Google Charts renderers</a></li>
<li><a href="fully_loaded.html">pivotUI() mobile-enabled and with all renderers</a></li>
</ul>
<h3 align="center">Montreal Weather 2014 Dataset <small>(<a href="montreal_2014.csv">CSV</a>)</small></h3>
<ul>
<li><a href="montreal_2014.html">pivotUI() with date derivers, sort overriding and custom heatmap colours</a></li>
</ul>
</div>
</div>
</body>
</html>