Flexmonster - Load JSON
Demos
by Sundarapandiyan_pa
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="onOpenLocal()">Open local</button>
<button onclick="onLoadRemote()">Load remote</button>
<div id="pivot-container"></div>
JavaScript
function onOpenLocal() {
pivot.connectTo({
type: "json",
browseForFile: true
});
}
function onLoadRemote() {
var filename = prompt("Open remote JSON", "https://cdn.flexmonster.com/data/data.json");
if (filename != null) {
pivot.connectTo({
type: "json",
filename: filename
});
}
}
var customizeCell = function(cell, data) {
debugger;
if(cell.attr['data-r']==2){
/* cell.style['min-height'] = "5px";
cell.style['max-height'] = "5px";
cell.style['height'] = "5px"; */
cell.style.color="#FFFFFF00;"
}
}
var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
customizeCell:customizeCell,
report: {
dataSource: {
type: "json",
data: getData()
},
slice: {
rows: [{
uniqueName: "Category"
}],
measures: [ {
uniqueName: "[Measures]"
},{
uniqueName: "Price"
}, {
uniqueName: "Quantity"
}],
},
options: {
configuratorActive: false
}
},
width: "100%",
height: 370
});
function getData() {
return [{
"Category": "Accessories",
"Size": "262 oz",
"Color": "red",
"Destination": "Australia",
"Business Type": "Specialty Bike Shop",
"Country": "Australia",
"Price": 174,
"Quantity": 225,
"Discount": 23
}, {
"Category": "EMPTY",
"Size": "235 oz",
"Color": "green",
"Destination": "Australia",
"Business Type": "Warehouse",
"Country": "Australia",
"Price": null,
"Quantity": null,
"Discount": null
},{
"Category": "Bikes",
"Size": "334 oz",
"Color": "red",
"Destination": "United States",
"Business Type": "Value Added Reseller",
"Country": "Canada",
"Price": 738,
"Quantity": 35,
"Discount": 28
}, {
"Category": "Cars",
"Size": "121 oz",
"Color": "white",
"Destination": "United States",
"Business Type": "Specialty Bike Shop",
...