Flexmonster installation

This tutorial describes how to start using Flexmonster in your project.

Step 1. Get Flexmonster

Step 1.1. Download a package with Flexmonster from our Download page.

Step 1.2. Unarchive the package and check out what's inside.

Step 1.3. Copy the flexmonster/ folder from the package into your project.

Step 2. Install the Flexmonster Pivot server

Install the Flexmoster server by running the FlexmonsterPivotServer installer file. When the installation begins, follow instructions from the wizard. Besides the server itself, the server's GUI tool Flexmonster Admin Panel will also be installed.

Flexmonster Admin Panel should be opened automatically and you should see the Flexmonster server running. Otherwise, launch the Admin Panel and run the server from it manually.

The server contains two preconfigured data sources, which you can check out in the Data sources tab of the Admin Panel:

SampleData — a simple dataset with retail data.
StateNames — a 150MB dataset with 5.6M records.

We will connect the Flexmonster UI to the SampleData data source in this guide. If you want to try out Flexmonster with a large dataset, connect to the StateNames data source.

Step 3. Embed the Flexmonster Pivot UI

Step 3.1. Import flexmonster.js:

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

Alternatively, you can add Flexmonster by including the JS file directly from our CDN:

<script src="https://cdn.flexmonster.com/3.0/latest/flexmonster.js"></script>

Step 3.2. Import Flexmonster's CSS:

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

Flexmonster's styles are also avaialble on CDN:

<link rel="stylesheet" href="https://cdn.flexmonster.com/3.0/latest/flexmonster.css" type="text/css" />

Step 3.3. Create a Flexmonster instance. You can create it by calling the fm3.Controls.Flexmonster() method in JavaScript code or using the <fm-flexmonster> tag in your HTML:

Step 4. Connect Flexmonster UI to the sample data source

Step 4.1. Create a state object with connection parameters for the sample data source:

const state = {
  id: "fm-state",
  dataset: {
    dataSource: {
      url: "ws://localhost:9501/",
      name: "SampleData"
    }
  }
};

The url contains the server’s URL, and the name is the data source’s name. You can check out the data source name in the Admin Panel’s Data sources tab.

Learn more about the state object’s structure.

Step 4.2. Pass the state object to the Flexmonster instance, depending on how the instance is created:

Step 5. Run the application

Open your webpage in the browser to see Flexmonster with the data from the Flexmonster server.

What is inside the Flexmonster package

flexmonster/ — the folder with the component files.
- flexmonster.css — Flexmonster’s styles.
- flexmonster.js — Flexmonster’s JavaScript.
FlexmonsterPivotServer — an installer file to install the Flexmonster Pivot server.
index.html — a sample page with Flexmonster UI connected to data from our demo server.
license.txt — license information.

Trying out Flexmonster with a large dataset

The Flexmonster server contains a preconfigured StateNames data source, which loads a 150MB file with 5.6M records of US kids' naming trends (1910-2014). You may connect to this data source to test performance of your local Flexmonster server.

Here's how to connect to StateNames:

In the Admin Panel, go to the Data sources tab and enable the StateNames data source. Once it is loaded, it will be available from the client side.
Set the dataset.dataSource.name property to StateNames in your state object.

Alternatively, you can try out StateNames from the index.html demo located in the Flexmonster package. This demo is already connected to the StateNames data source on our server, so you only need to change a few lines of code:
- Uncomment the line with the URL to the local server.
- Comment the line with the URL to our server.
```
"dataSource": {
  // Step 4.a. Specify the URL of your Flexmonster server
  // "url": "wss://demo-server.flexmonster.com:9500",
  // Uncomment the line below to connect to your local Flexmonster server
  "url": "ws://localhost:9501",
  // Step 4.b. Specify the name of your data source
  "name": "StateNames"
}
```

Now open the page with Flexmonster in the browser and see the StateNames dataset displayed.