Published
Edited
Aug 19, 2020
1 fork
6 stars
md`# Pivot Table Data Visualization`
import {importjs, importcss} from "@chomtana/import-external-library"
Flexmonster = importjs("https://cdn.flexmonster.com/flexmonster.js", "window.Flexmonster")
html`<div id="pivot-container"></div>`
html`<div id="flat-grid-container"></div>`
{
var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
licenseKey: "Z7XT-XJG9A7-210855-6I482V-0Q4U65-2X4X5D-5Z3Q2P-642K2X-0Z1U43-423S22",
width: '100%',
height: 600,
toolbar: true,
report: {
dataSource: {
filename: "data/sales.csv"
},
slice: {
rows: [{
uniqueName: "Month"
}, {
uniqueName: "[Measures]"
}],
columns: [{
uniqueName: "Category",
levelName: "Product Name",
filter: {
members: [
"category.[condiments].[bbq sauce]",
"category.[breakfast cereals].[corn flakes]",
"category.[confectionery]",
"category.[bakery].[chocolate biscuits]",
"category.[fruit preserves].[apple jam]",
"category.[bakery].[apple cake]",
"category.[soups].[tomato soup]"
]
}
}],
measures: [{
"uniqueName": "Revenue",
"aggregation": "sum",
"format": "2sfou03a"
}]
},
conditions: [{
formula: "#value < 2500",
measure: "Revenue",
format: {
backgroundColor: "#df3800",
color: "#FFFFFF"
},
isTotal: false
}, {
formula: "#value > 20000",
measure: "Revenue",
format: {
backgroundColor: "#00A45A",
color: "#FFFFFF"
},
isTotal: false
}],
formats: [{
name: "2sfou03a",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
currencySymbolAlign: "left",
nullValue: "",
textAlign: "right",
isPercent: false
}],
options: {
showFieldListSearch: true,
filter: {
liveSearch: true
}
}
}
});
return pivot;
}
{
var grid = new Flexmonster({
container: "#flat-grid-container",
componentFolder: "https://cdn.flexmonster.com/",
licenseKey: "Z7XT-XJG9A7-210855-6I482V-0Q4U65-2X4X5D-5Z3Q2P-642K2X-0Z1U43-423S22",
width: '100%',
height: 600,
//toolbar: true,
report: {
dataSource: {
filename: "data/sales.csv"
},
slice: {
rows: [{
uniqueName: "Month"
}, {
uniqueName: "[Measures]"
}],
columns: [{
uniqueName: "Category",
levelName: "Product Name",
filter: {
members: [
"category.[condiments].[bbq sauce]",
"category.[breakfast cereals].[corn flakes]",
"category.[confectionery]",
"category.[bakery].[chocolate biscuits]",
"category.[fruit preserves].[apple jam]",
"category.[bakery].[apple cake]",
"category.[soups].[tomato soup]"
]
}
}],
measures: [{
"uniqueName": "Revenue",
"aggregation": "sum",
"format": "2sfou03a"
}]
},
conditions: [{
formula: "#value < 2500",
measure: "Revenue",
format: {
backgroundColor: "#df3800",
color: "#FFFFFF"
},
isTotal: false
}, {
formula: "#value > 20000",
measure: "Revenue",
format: {
backgroundColor: "#00A45A",
color: "#FFFFFF"
},
isTotal: false
}],
formats: [{
name: "2sfou03a",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
currencySymbolAlign: "left",
nullValue: "",
textAlign: "right",
isPercent: false
}],
options: {
showFieldListSearch: true,
grid: {
type: "flat"
},
filter: {
liveSearch: true
}
}
}
});
return grid;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
