asked on November 21, 2023
I have such code:
me.flexpivot = new Flexmonster({
container: divid,
componentFolder: flexpath,
licenseKey: "..."
});
flexmonster.connectTo({
data: [{
"Country": "Canada",
"Product": "Bike",
"Price": 68450
}, {
"Country": "Britain",
"Product": "Bike",
"Price": 777777
}]
});
It finds the div with the specified ID but in it I see nothing or better to say some numbers that have nothing to do with the data that I am feeding into it and just an empty screen with the Flexmonster watermark and a writing that it's a trial version. I attached flexmonster.full.js to my project (by copy-pasting the internals into my custom.js file that is imported in my project) but flexpath is pointing to the other folder, not where the .js file is located due to the nature of the project I am working on: I wouldn't be able to use new Flexmonster otherwise. No errors are in the console except for one warning:
custom.js?_v=7.3.0.47010:5786 Flexmonster: CSS version mismatch.
Versions of Flexmonster specified in the CSS and JS files do not match.
The version of Javascript: 2.9.64, the version of CSS: .
To fix the issue, please try the following:
1. Clear your browser cache to make sure the latest files are loaded.
2. Check if the CSS file was updated correctly along with Flexmonster.
3. Ask the tech team for help (https://www.flexmonster.com/technical-support/).
I tried me.flexpivot.connectTo(), flexmonster.connectTo(), me.flexpivot.updateData(), flexmonster.updateData() - all are giving the same result. Removing chrome cache completely does not change the result. Any suggestions?
⋅ November 22, 2023
Hello, Nikita!
Thank you for reaching out to us.
From what we can gather, it seems that Flexmonster CSS styles are not attached to your project. Taking into account the specific nature of your project, you may need to attach the flexmonster.css file from our bundle separately in your project.
We also recommend the following approaches to connect data to Flexmonster:
1. Directly inside the new Flexmonster
me.flexpivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
report: {
dataSource: {
data: [{
"Country": "Canada",
"Product": "Bike",
"Price": 68450
}, {
"Country": "Britain",
"Product": "Bike",
"Price": 777777
}]
}
}
});
2. Wrapping the API call in the reportcomplete event, and using the me.flexpivot to call the connectTo()
me.flexpivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
});
me.flexpivot.on("reportcomplete",()=>{
me.flexpivot.off("reportcomplete");
me.flexpivot.connectTo({
data: [{
"Country": "Canada",
"Product": "Bike",
"Price": 68450
}, {
"Country": "Britain",
"Product": "Bike",
"Price": 777777
}]
});
});
Hope you will find our answer helpful. Feel free to contact us if any further questions arise.
Regards,
Solomiia