Migrating from WebDataRocks to Flexmonster

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:

Step 1. Install Flexmonster Pivot

All the possible ways of getting Flexmonster are described here: Get Flexmonster.

Step 2. Import flexmonster.js

Import flexmonster.js depending on how you have downloaded Flexmonster:

Flexmonster CLI or npm

If you are using a module bundler, import Flexmonster in the way your bundler supports. For example:
```
import Flexmonster from "flexmonster";
```
Alternatively, you can also import flexmonster.js in HTML using the <script> tag:
```
<script src="node_modules/flexmonster/flexmonster.js"></script>
```

CDN

The flexmonster.js file was imported in step 1.

ZIP package

<script src="flexmonster/flexmonster.js"></script>

Step 3. Replace the init API call

Replace the new WebDataRocks() API call with the new Flexmonster() API call depending on how you have downloaded Flexmonster:

Flexmonster CLI or npm

WebDataRocks

const pivot = new WebDataRocks({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Your report
  }
});

Flexmonster

const pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "node_modules/flexmonster/",
  toolbar: true,
  report: {
    // Your report
  }
});

CDN

WebDataRocks

const pivot = new WebDataRocks({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Your report
  }
});

Flexmonster

const pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    // Your report
  }
});

ZIP package

WebDataRocks

const pivot = new WebDataRocks({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Your report
  }
});

Flexmonster

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.

Step 4. Replace WebDataRocks API with Flexmonster API

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.

Step 4.1. Update methods and events

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:

Step 4.2. Update objects

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.

Step 5. Replace the localization file

If your WebDataRocks component was localized, replace the WebDataRocks localization file with the corresponding Flexmonster localization file:

WebDatarocks

report: {
  // Other report configurations
  localization: "https://cdn.webdatarocks.com/loc/es.json",
}

Flexmonster

report: {
  // Other report configurations
  localization: "https://cdn.flexmonster.com/loc/es.json",
}

Learn more about setting localization in Flexmonster: Localizing the component.

Step 6. Update your reports

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:

WebDataRocks

"slice": {
  "rows": [
    {
      // ...
    },
    {
      "uniqueName": "Measures"
    }
  ],
  // Other properties
}

Flexmonster

"slice": {
  "rows": [
    {
      // ...
    },
    {
      "uniqueName": "[Measures]"
    }
  ],
  // Other properties
}

Step 7. Remove WebDataRocks

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 you were using one of WebDataRocks’ predefined themes, replace it with a corresponding Flexmonster theme.

If WebDataRocks was installed from npm, run the following command to uninstall WebDataRocks:

npm uninstall webdatarocks

Step 8. See the result

Open the page with the pivot table in the browser and see that Flexmonster is used instead of WebDataRocks.

The migration is complete.

What's next?

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: