Need a special offer?Find out if your project fits.
+
  1. API reference
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Table of contents

    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:

    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: