I’m trying to configure the following code in order to format the PROFIT column (which is the first one) as a currency.
Right now the values in that column are getting shown as:
1243898
1538192
1921982
But I want them to get shown as:
$1,243,898
$1,538,192
$1,921,982
Here you have a preview…
And below is the code, where you can see I introduced a new format: currency which I tried to use for that first column: PROFIT, but had no success.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script>
$(function() {
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: false,
report: {
data: [
{
"Profit": "1243898",
"Following": 81,
"Followers": 242,
},
{
"Profit": "1538192",
"Following": 728,
"Followers": 2178,
},
{
"Profit": "1921982",
"Following": 4423,
"Followers": 12387,
},
{
"Profit": "1243898",
"Following": 63,
"Followers": 189,
},
{
"Profit": "1538192",
"Following": 342,
"Followers": 931,
},
{
"Profit": "1538192",
"Following": 487,
"Followers": 1242,
},
{
"Profit": "1921982",
"Following": 3827,
"Followers": 15281,
},
{
"Profit": "1243898",
"Following": 97,
"Followers": 279,
},
{
"Profit": "1538192",
"Following": 242,
"Followers": 728,
},
{
"Profit": "1921982",
"Following": 4921,
"Followers": 12489,
},
{
"Profit": "1243898",
"Following": 69,
"Followers": 182,
},
],
formats: [
{
name: "",
thousandsSeparator: " ",
decimalSeparator: ".",
decimalPlaces: -1,
maxDecimalPlaces: -1,
maxSymbols: 20,
currencySymbol: "",
negativeCurrencyFormat: "-$1",
positiveCurrencyFormat: "$1",
isPercent: "false",
nullValue: "",
infinityValue: "Infinity",
divideByZeroValue: "Infinity",
textAlign: "right",
beautifyFloatingPoint: true,
},
{
name: "currency",
currencySymbol: "$",
},
],
slice: {
rows: [{
uniqueName: "Profit",
format: "currency",
}],
columns: [{
uniqueName: "[Measures]",
}],
measures: [{
uniqueName: "Following",
},
{
uniqueName: "Followers",
},
],
},
},
});
});
</script>
</head>
<body>
<div id="pivot-container"></div>
</body>
</html>
Do you have any idea on how can I make this to work?
Here you have a JSFiddle with the code above:
https://jsfiddle.net/tlg265/eo1bkjwy/
Thanks!