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, so 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. Get Flexmonster Pivot

All possible ways to include Flexmonster in your project are described here: Get Flexmonster.

Step 2. Import Flexmonster

Import Flexmonster depending on how you have downloaded it:

Flexmonster CLI or npm

Import Flexmonster in the way your bundler supports. For example:

import Flexmonster from "flexmonster";
import "flexmonster/flexmonster.css";

Note If you were using one of WebDataRocks’ predefined themes, replace it with a corresponding Flexmonster theme:

WebDataRocks:

import "@webdatarocks/webdatarocks/theme/green/webdatarocks.css";

Flexmonster:

import "flexmonster/theme/green/flexmonster.min.css";

CDN

Flexmonster was imported in step 1.

Note If you were using one of WebDataRocks’ predefined themes, replace it with a corresponding Flexmonster theme:

WebDataRocks:

<link rel="stylesheet" type="text/css"
href="https://cdn.webdatarocks.com/latest/theme/green/webdatarocks.css" />

Flexmonster:

<link rel="stylesheet" type="text/css"
href="https://cdn.flexmonster.com/theme/green/flexmonster.min.css" />

ZIP package

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

Note If you were using one of WebDataRocks’ predefined themes, replace it with a corresponding Flexmonster theme:

WebDataRocks:

<link rel="stylesheet" type="text/css"
href="theme/green/webdatarocks.min.css" />

Flexmonster:

<link rel="stylesheet" type="text/css"
href="flexmonster/theme/green/flexmonster.min.css" />

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",
  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
  }
});

Notice the componentFolder parameter in new Flexmonster() — it should point to the folder with Flexmonster files. Since Flexmonster is included from our CDN, the componentFolder should be defined as https://cdn.flexmonster.com/ (or https://cdn.flexmonster.com/<version>/ if you are using a specific Flexmonster version).

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
  }
});

Notice the componentFolder parameter in new Flexmonster() — it should point to the folder with Flexmonster files. If this folder is in the root of your project, the componentFolder should be set to "flexmonster/". Otherwise, adjust the componentFolder according to the flexmonster/ folder's location in your project.

Note To use a trial version of Flexmonster from the ZIP package, you need to set a trial key. It can be found in the flexmonster/TrialKey.txt file. Copy the contents of the file and set the trial key using the licenseKey initialization parameter:

const pivot = new Flexmonster({
  container: "pivotContainer",
  // ...
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
});

new Flexmonster() has more initialization parameters than new WebDataRocks(). See the full list of available parameters in the API reference: Flexmonster().

Step 4. Replace WebDataRocks API with Flexmonster API

Flexmonster supports all methods and events available in WebDataRocks and provides additional ones. See the full list of Flexmonster methods and events.

To start using Flexmonster API, you need to:

Change the WebDataRocks instance to the Flexmonster instance in method calls.
You can skip this if you were referencing WebDataRocks through a custom variable (e.g., pivot, like in step 3), and now you will reuse that variable to reference Flexmonster. Otherwise, if you were referencing WebDataRocks through webdatarocks, replace webdatarocks with flexmonster:
WebDataRocks
```
webdatarocks.setReport(report);
```
Flexmonster
```
flexmonster.setReport(report);
```
Update methods and events themselves if needed.
Since all WebDataRocks methods and events are available in Flexmonster, there is no need to update their names. However, some Flexmonster methods and events have slightly different signatures. Check them out in the API Reference:
- Methods
- Events

Step 5. Replace the localization file

If your WebDataRocks component was translated into a different language, replace the WebDataRocks localization file with the corresponding Flexmonster 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 localizing Flexmonster.

Step 6. Replace the Connector for a charting library

If you integrated with a 3rd party charting library, replace WebDataRocks Connector with the corresponding Flexmonster Connector. You can find the needed Connector in the integration guide for your charting library. For example:

WebDataRocks

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.amcharts.js"></script>

Flexmonster

<script src="https://cdn.flexmonster.com/lib/flexmonster.amcharts.js"></script>

If you are evaluating Flexmonster, you need a special trial license key to integrate with a 3rd party charting library. Contact our team to request the trial key.

Step 7. Update your reports

To use a WebDataRocks report in Flexmonster, you need to make one minor change. 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 8. 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 WebDataRocks was installed from npm, run the following command to uninstall WebDataRocks:

npm uninstall @webdatarocks/webdatarocks

Step 9. See the result

Open the page with the pivot table in the browser, then click on the grid and press Ctrl + Alt + i (Option + Control + i on macOS). You should see Flexmonster's licensing pop-up window; this would mean that WebDataRocks is successfully replaced by Flexmonster.

The migration is complete.

Troubleshooting

If you run into any issues during the migration, visit our troubleshooting page.

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 of supported data sources.

Flexmonster also offers features that are not available in WebDataRocks: