JSFiddle - React, Tailwind, and code Playground
by Ian Sadovy
HTML
<script src="http://www.flexmonster.com/flexmonster/flexmonster.js"></script>
<div id="pivot-content"></div>
JavaScript
var jsonData = [{
"Color": {
"type": "string"
},
"M": {
"type": "month",
"dimensionUniqueName": "Days",
"dimensionCaption": "Days",
"caption": "Month"
},
"W": {
"type": "weekday",
"dimensionUniqueName": "Days",
"dimensionCaption": "Days",
"caption": "Week Day"
},
"country": {
"type": "level",
"hierarchy": "Geography",
"level": "Country"
},
"state": {
"type": "level",
"hierarchy": "Geography",
"level": "State",
"parent": "Country"
},
"city": {
"type": "level",
"hierarchy": "Geography",
"parent": "State"
},
"Price": 0,
"Quantity": {
"type": "number"
}
}, {
"Color": "green",
"M": "September",
"W": "Wed",
"country": "Canada",
"state": "Ontario",
"city": "Toronto",
"Price": 174,
"Quantity": 22
}, {
"Color": "red",
"M": "March",
"W": "Mon",
"Time": "1000",
"country": "USA",
"state": "California",
"city": "Los Angeles",
"Price": 1664,
"Quantity": 19
}, {
"Color": "red",
"M": "January",
"W": "Mon",
"country": "Canada",
"state": "Quebec",
"city": "Montreal",
"Price": 1190,
"Quantity": 292
}, {
"Color": "green",
"D": "04/08/2014",
"M": "August",
"W": "Fri",
"Time": "1000",
"country": "USA",
"state": "California",
"city": "Los Angeles",
"Price": 1222,
"Quantity": 730
}, {
"Color": "white",
"M": "March",
"W": "Wed",
"country": "USA",
"state": "California",
"city": "Los Angeles",
"Price": 7941,
"Quantity": 73
}, {
"Color": "red",
"M": "August",
"W": "Wed",
"country": "Canada",
"state": "Ontario",
"city": "Toronto",
"Price": 6829,
"Quantity": 19
}, {
"Color": "green",
"M": "January",
"W": "Wed",
"country": "Canada",
"state": "Quebec",
"city": "Montreal",
"Price": 2995,
"Quantity": 98
}, {
"Color": "white",
"M": "February",
"W": "Mon",
"country": "USA",
"state": "California",
"city": "Los Angeles",
"Price": 2471,
"Quantity": 93
}, {
...