This guide will help you migrate from WebDataRocks to Flexmonster in your project.
The migration process is simple. Flexmonster is embedded in a JavaScript application similarly to WebDataRocks. In addition, the code you’ve created around the WebDataRocks component will require only minor changes.
If you are using a front-end framework, see how to migrate from WebDataRocks in a framework of your choice:
All the possible ways of getting Flexmonster are described here: Get Flexmonster.
Import flexmonster.js
depending on how you have downloaded Flexmonster:
import Flexmonster from "flexmonster";
flexmonster.js
in HTML using the <script>
tag:<script src="node_modules/flexmonster/flexmonster.js"></script>
The flexmonster.js
file was imported in step 1.
<script src="flexmonster/flexmonster.js"></script>
Replace the new WebDataRocks()
API call with the new Flexmonster()
API call depending on how you have downloaded Flexmonster:
const pivot = new WebDataRocks({
container: "pivotContainer",
toolbar: true,
report: {
// Your report
}
});
const pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
toolbar: true,
report: {
// Your report
}
});
const pivot = new WebDataRocks({
container: "pivotContainer",
toolbar: true,
report: {
// Your report
}
});
const pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
// Your report
}
});
const pivot = new WebDataRocks({
container: "pivotContainer",
toolbar: true,
report: {
// Your report
}
});
const pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "flexmonster/",
toolbar: true,
report: {
// Your report
}
});
new Flexmonster()
has more parameters than new WebDataRocks()
. For example, notice the componentFolder
parameter — it should point to the flexmonster/
folder with all Flexmonster files. Learn more about Flexmonster initialization parameters.
Flexmonster includes WebDataRocks API, so you can continue using the methods and events you’ve used in your project. Follow the steps below to migrate to Flexmonster API.
Flexmonster supports all methods and events available in WebDataRocks and provides additional ones.
Since all WebDataRocks methods are available in Flexmonster, there is no need to update method names. However, some Flexmonster methods and events have slightly different signatures. Check them out in API Reference:
Objects are passed as parameters to methods and event handlers. All WebDataRocks objects are available in Flexmonster.
However, some Flexmonster objects have slightly different properties. Check them out in API Reference.
If your WebDataRocks component was localized, replace the WebDataRocks localization file with the corresponding Flexmonster localization file:
report: { // Other report configurations localization: "https://cdn.webdatarocks.com/loc/es.json", }
report: { // Other report configurations localization: "https://cdn.flexmonster.com/loc/es.json", }
Learn more about setting localization in Flexmonster: Localizing the component.
To use a WebDataRocks report in Flexmonster, you need to make one minor change manually. The rest of the report will be converted automatically upon loading it in Flexmonster.
To update your report, change "uniqueName": "Measures"
to "uniqueName": "[Measures]"
in the slice:
"slice": { "rows": [ { // ... }, { "uniqueName": "Measures" } ], // Other properties }
"slice": { "rows": [ { // ... }, { "uniqueName": "[Measures]" } ], // Other properties }
Remove all WebDataRocks files used in your project:
webdatarocks.js
webdatarocks.toolbar.js
or webdatarocks.toolbar.min.js
webdatarocks.css
or webdatarocks.min.css
If WebDataRocks was installed from npm, run the following command to uninstall WebDataRocks:
npm uninstall webdatarocks
Open the page with the pivot table in the browser and see that Flexmonster is used instead of WebDataRocks.
The migration is complete.
With Flexmonster, you can connect to JSON/CSV files, SQL and MongoDB databases, Elasticsearch, and Microsoft Analysis Services. See the full list: Supported data sources.
Flexmonster also offers features that are not available in WebDataRocks: