JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container">The component will appear here</div>
JavaScript
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
height: 600,
report: {
"dataSource": {
"type": "json",
"data": [
{
"Day Date": {
"type": "string"
},
"Response Id": {
"type": "string"
},
"Site name": {
"type": "string"
},
"Site objective": {
"type": "number",
"visible": true
}
},
[
"2024-12-01",
"a",
"Site 1",
"2"
],
[
"2024-12-01",
"b",
"Site 1",
"2"
],
[
"2024-12-02",
"c",
"Site 1",
"2"
],
[
"2024-12-02",
"d",
"Site 2",
"3"
],
[
"2024-12-03",
"e",
"Site 2",
"3"
],
[
"2024-12-04",
"f",
"Site 3",
"2"
]
]
},
"slice": {
"rows": [
{
"uniqueName": "Site name"
}
],
"columns": [
{
"uniqueName": "Day Date"
},
{
"uniqueName": "Site objective"
},
{
"uniqueName": "[Measures]"
}
],
"measures": [
{
"uniqueName": "respCount",
"formula": "if( count(\"Response Id\") , count(\"Response Id\"), 0)",
"caption": "Response count"
},
...