Pivot does not render until clicked

Edit: the below issue is encountered when the component is part of a tab that is not visible until selected.
I am evaluating your product but have an issue that I have spent hours trying to resolve.  When setting report defaults, the component doesn’t render until you select an option.  In the code below I am trying to default to a column chart.  The column chart successfully renders after a menu option is clicked. 
 
function GetData() {
var jsonData = JSON.parse(jQuery(‘#timelineData’).val());
console.log(jsonData);
return jsonData;
}
var pivot = new Flexmonster({
container: “pivot-container”,
//componentFolder: “../js/flexmonster/”,
componentFolder: “https://cdn.flexmonster.com/”,
toolbar: true,
licenseKey: “Z7SQ-XDDB5B-5G705X-0X4P4C”,
report: {
dataSource: {
data: GetData()
},
options: {
viewType: “charts”,
chart: {
type: “column”
}
},
slice: {
rows: [
{
uniqueName: “n”
}
],
columns: [
{
uniqueName: “[Measures]”
}
],
measures: [
{
uniqueName: “events”,
aggregation: “sum”
}
]
}
}
});

jQuery(document).ready(function () {
pivot.showCharts();
pivot.refresh();
});
I tried the drawCharts() and refresh() calls to no avail.
If I can get over this obstacle then I think we would want to purchase flexmonster.

1 answer

Public
Vera Didenko Flexmonster April 4, 2019

Hello, Dan,

Thank you for writing to us.

For Flexmonster to render when it is part of a tab that is not visible until selected, the refresh() method needs to be called when this tab is opened:

pivot.refresh();

We have prepared an example of how to use Flexmonster in tabs
Also, here is a modified version of the demo where one of the pivots is set to column chart view.

Please let us know if this works for you and if you have further questions.

Best Regards,
Vera

Please login or Register to Submit Answer