Data types in JSON array of arrays
Data source
by Flexmonster Pivot Table
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="addDataTypes()">Add data types</button>
<div id="pivot-container"></div>
CSS
@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);
JavaScript
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
report: {
dataSource: {
data: getData()
},
slice: {
rows: [{
uniqueName: "Color"
},
{
uniqueName: "[Measures]"
}
],
columns: [{
uniqueName: "Country"
}],
measures: [{
uniqueName: "Price",
aggregation: "sum"
}]
},
options: {
configuratorActive: true
}
}
});
function addDataTypes() {
pivot.updateData({
data: getDataTyped()
});
pivot.runQuery({
rows: [{
uniqueName: "Color"
},
{
uniqueName: "[Measures]"
}
],
columns: [{
uniqueName: "Geography"
}],
measures: [{
uniqueName: "Price",
aggregation: "sum"
}]
});
}
function getData() {
return [
[
"Color",
"Country",
"State",
"City",
"Price",
"Quantity"
],
["green", "Canada", "Ontario", "Toronto", 174, 22],
["red", "USA", "California", "Los Angeles", 166, 19]
];
}
function getDataTyped() {
return [{
"Color": {
type: "string"
},
"Country": {
type: "string",
hierarchy: "Geography",
},
"State": {
type: "string",
hierarchy: "Geography",
parent: "Country"
},
"City": {
type: "string",
hierarchy: "Geography",
parent: "State"
},
"Price": {
type: "number"
},
"Quantity": {
type: "number"
}
},
["green", "Canada", "Ontario", "Toronto", 174, 22],
["red", "USA", "California", "Los Angeles", 166, 19]
]
}