JSFiddle - React, Tailwind, and code Playground
by Flexmonster Pivot Table
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 600,
toolbar: true,
report: {
dataSource: {
data: getData()
},
"slice": {
"rows": [{
"uniqueName": "date"
}],
"columns": [{
"uniqueName": "[Measures]"
}],
"measures": [{
"uniqueName": "count",
"aggregation": "runningtotals"
}]
},
"options": {
"viewType": "charts",
"chart": {
"type": "line"
},
"datePattern": "YYYY MMM"
}
}
});
function getData() {
return [{
"date": {
"type": "date string"
},
"count": {
"type": "number"
}
},
{
"date": "2019-11-14T11:53:02.231Z",
"count": 1
},
{
"date": "2018-04-01T06:52:33.070Z",
"count": 1
},
{
"date": "2019-06-27T15:51:09.578Z",
"count": 1
},
{
"date": "2019-02-10T02:57:55.377Z",
"count": 1
},
{
"date": "2019-07-31T03:32:30.114Z",
"count": 1
},
{
"date": "2018-12-28T05:04:11.667Z",
"count": 1
},
{
"date": "2019-04-29T15:13:52.391Z",
"count": 1
},
{
"date": "2019-04-02T14:12:37.631Z",
"count": 1
},
{
"date": "2019-09-15T03:05:43.090Z",
"count": 1
},
{
"date": "2018-07-23T18:34:12.301Z",
"count": 1
},
{
"date": "2018-10-24T14:01:56.825Z",
"count": 1
},
{
"date": "2019-07-07T06:50:11.587Z",
"count": 1
},
{
"date": "2019-08-15T02:09:12.586Z",
"count": 1
},
{
"date": "2019-05-14T06:29:58.017Z",
"count": 1
},
{
"date": "2018-10-27T15:18:56.545Z",
"count": 1
},
{
"date": "2019-07-04T00:36:49.390Z",
"count": 1
},
{
"date": "2018-09-08T03:55:55.736Z",
"count": 1
},
{
"date":...