This is related to this question
I tried the example in the answer & it worked. But if I put it inside a function it will throw TypeError.
Here are my codes, the only different from the example is that it calls setupTable() function:
<meta charset=”ISO-8859-1″>
<link href=”https://cdn.webdatarocks.com/latest/webdatarocks.min.css” rel=”stylesheet” />
<script src=”https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js”></script>
<script src=”https://cdn.webdatarocks.com/latest/webdatarocks.js”></script>
</head>
<body>
<div id=”wrap”>
<div id=”output”>
</div>
<script type=”text/javascript”>
setupTable();
function setupTable() {
var pivot = new WebDataRocks({
container: “#output”,
width: “100%”,
height: “100%”,
report: {
dataSource: {
filename: “https://cdn.webdatarocks.com/data/data.csv”
},
slice: {
rows: [{ uniqueName: “Color” }],
columns: [{ uniqueName: “Category” }, { uniqueName: “Country” }],
measures: [{ uniqueName: “Price” }]
},
options: {
grid: {
showTotals: “off”
}
}
}
});
webdatarocks.on(“reportchange”, ‘redraw’);
webdatarocks.on(“reportcomplete”, ‘redraw’);
function redraw() {
let col = 0, row = 0;
webdatarocks.customizeCell(function(cellBuilder, cellData) {
if (cellData.columnIndex > col) col = cellData.columnIndex;
if (cellData.rowIndex > row) row = cellData.rowIndex;
});
webdatarocks.on(“aftergriddraw”, function() {
webdatarocks.off(“aftergriddraw”);
document.querySelector(“#wrap”).style.width = 100 * (col + 2) + ‘px’;
document.querySelector(“#wrap”).style.height = 30 * ++row + 27 + ‘px’;
});
}
}
</script>
</body>
</html>
The details of the error is:
webdatarocks.js:11 Uncaught TypeError: Cannot read property ‘call’ of undefined
at b.e.dispatch (webdatarocks.js:11)
at webdatarocks.js:1849
How to resolve this issue?
Hello, Ien,
Thank you for your question.
We suggest subscribing to the reportcomplete and reportchange events within the Flexmonster constructor to avoid the described issue:
var pivot = new WebDataRocks({
container: "#output",
width: "100%",
height: "100%",
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
slice: {
rows: [{ uniqueName: "Color" }],
columns: [{ uniqueName: "Category" }, { uniqueName: "Country" }],
measures: [{ uniqueName: "Price" }]
},
options: {
grid: {
showTotals: "off"
}
}
},
reportcomplete: redraw,
reportchange: redraw
});
We have modified the initial example to demonstrate this approach.
Our team hopes it works for your case.
Kind regards,
WebDataRocks Team