1.Connecting to a PostgreSQL database using Flexmonster Data Server

This tutorial describes how to connect to a PostgreSQL database using Flexmonster Data Server – a special server developed by Flexmonster. This server communicates with the client using the custom data source API – our custom communication protocol allowing you to retrieve already aggregated data from a server to Flexmonster Pivot.

Step 1. Download Flexmonster Data Server

Get Flexmonster Data Server on a special download page. You can also find a detailed step-by-step guide on how to install the Data Server there.

Flexmonster Data Server can be configured in the flexmonster-config.json file. To learn more about all the available configurations, see the configurations reference. To set configurations needed for the database data source, follow the steps below.

Step 2. Embed the component into your web page

Set up an empty component in your HTML page. If Flexmonster is not yet embedded – return to Quick start. Your code should look similar to the following example:

<div id="pivotContainer">The component will appear here</div>
<script src="flexmonster/flexmonster.js"></script>
<script>
    var pivot = new Flexmonster({
        container: "pivotContainer",
        toolbar: true,
        licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    });
</script>

Step 3. Configure the data source type

Previous step demonstrated how to set up Flexmonster Pivot. Now it’s time to configure Flexmonster Data Server.

Set the "Type" property in flexmonster-config.json to "database". It should be done as follows:

"DataSources": [
    {
        "Type": "database"
    }
],

Step 4. Configure the database type

Specify the name of the database you want to use by adding the "DatabaseType" configuration to the flexmonster-config.json file. In this case, the configuration value should be "postgresql":

"DataSources": [
    {
        "Type": "database",
        "DatabaseType": "postgresql"
    }
]

Step 5. Configure the connection with the database

To enable the server to fetch data from your database, you have to provide the connection string to the database. The connection string should be added to flexmonster-config.json as follows:

"DataSources": [
    {
        "Type": "database",
        "DatabaseType": "postgresql",
        "ConnectionString": "Server=localhost;Port=5432;Uid=root;Pwd=password;Database=database_name"
    }
]

Step 6. Define the data subset

In the flexmonster-config.json file, create an index for the subset of data you want Flexmonster Pivot to visualize. "Query" is an SQL query for the data. For example:

"DataSources": [
    {
        "Type": "database",
        "DatabaseType": "postgresql",
        "ConnectionString": "Server=localhost;Port=5432;Uid=root;Pwd=password;Database=database_name",
        "Indexes": {
            "index_database": {
                "Query": "SELECT * FROM tablename"
            }
        }
    }
]

Note: "index_database" is a dataset identifier. It will be used to configure the data source on the client side.

In a similar way, more indexes can be specified:

"Indexes": {
    "index_database": {
        "Query": "SELECT * FROM tablename"
    },
    "another_index_database": {
        "Query": "SELECT column FROM tablename"
    }
}

Step 7. Configure the report

On the client side, the report should be configured as follows:

<div id="pivotContainer">The component will appear here</div>
<script src="flexmonster/flexmonster.js"></script>
<script>
    var pivot = new Flexmonster({
        container: "pivotContainer",
        toolbar: true,
        report: {
            dataSource: {
                type: "api",
                url: "http://localhost:9500",
                index: "index-database"
            }
        },
        licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    });
</script>

Note 1: index must match the name of the index defined in step 5 (e.g., "index_database").

Note 2: when Flexmonster Pivot requests the data, Flexmonster Data Server server sends the response and then caches it. In case the component sends the same request once again, the server responds with the data from its cache. The cache is cleared only when the server is restarted, though the cache has a memory limit: when the limit is reached, and the new response can’t be cached, Flexmonster Data Server server deletes one of the previously cached responses from the cache.

Step 8. Run the server

To start the Data Server, run the following commands in a console:

flexmonster-data-server.exe

As soon as you start Flexmonster Data Server, it automatically preloads the data specified in the "Indexes" property. Thus, when Flexmonster Pivot requests the data, the server responds with already preloaded data.

Note that the preloaded data is kept in the server’s RAM, so the number of indexes you can specify is limited by the amount of RAM available to the server.

What’s next?

You may be interested in the following articles: