Pricing changes are coming in January. Contact our Sales team to secure the current price for your desired license.
Get Free Trial
Get Free Trial

Connecting to a database with Node.js

NOTE: Flexmonster Data Compressor is considered deprecated, so the approach described below is not recommended for connecting to SQL databases.
To see the relevant way of connecting to relational databases, refer to this article.

Requirements

  • Flexmonster Pivot version 2.6.0 or higher
  • Node.js version 8.x
  • A driver for the database

Supported databases

  • MySQL - driver
  • PostgreSQL - driver
  • JSON files/streams
  • CSV files/streams

Step 1: Embed the component into your webpage

If Flexmonster is not yet embedded, set up an empty component in your webpage:

In pure JavaScript

Complete the Integrating Flexmonster guide. Your code should look similar to the following example:

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

In React

Complete the Integration with React guide. Your code should look similar to the following example:

<FlexmonsterReact.Pivot
 toolbar={true}
/>

In Angular

Complete the Integration with Angular guide. Your code should look similar to the following example:

<fm-pivot
 [toolbar]="true">
</fm-pivot>

In Vue

Complete the Integration with Vue guide. Your code should look similar to the following example:

<Pivot
 toolbar
/>

Step 2: Setup Flexmonster Data Compressor on the server

Add the following dependencies to your project:

  • An appropriate database driver
  • Install the flexmonster-compressor dependency using NPM: 
    npm install flexmonster-compressor

Below is a connection and query sample for MongoDB:

const MongoClient = require('mongodb').MongoClient;
MongoClient.connect("mongodb://demo:p123456@ds121251.mlab.com:21251/flexmonster", 
    { useNewUrlParser: true }, (err, client) => {
    if (err) throw err;
    console.log("Connected successfully to MongoDB.");
    app.set("db", client.db("flexmonster"));
});
app.get('/data', (req, res) => {
    const db = req.app.get('db');
    const result = db.collection('sample_data').find({}, 
        { projection: { '_id': false } }).stream();
});

Then the following lines of code will convert result to the stream:

const compressor = require('flexmonster-compressor');
let stream = compressor.compressJsonStream(result);

Now, you can create a streaming response:

stream.on('data', data => {
  res.write(data);
});
stream.on('end', () => {
  res.end();
});

The full project is available at Pivot Table for Databases/server/nodejs/ inside the download package.

Step 3: Enable cross-origin resource sharing (CORS)

By default, the browser prevents JavaScript from making requests across domain boundaries. CORS allows web applications to make cross-domain requests. Here is a useful link explaining how to setup CORS on your server:

Step 4: Configure the report with your own data

Now it’s time to configure the pivot table on the webpage. Let’s create a minimal report for this (replace filename and other parameters with your specific values):

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "node_modules/flexmonster/",
  toolbar: true,
  report: {
    dataSource: {
      type: "csv",
      /* URL to the Data Compressor Node.js */
      filename: "http://localhost:3000/data"
    }
  },
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
});

Launch the webpage from a browser — there you go! A pivot table is embedded into your project.

What's next?

You may be interested in the following articles: