Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
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 web page

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

In pure JavaScript

Complete the Quick start guide. Your code should look similar to the following example:

var pivot = new Flexmonster({
    container: "pivotContainer",
    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 React

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

<FlexmonsterReact.Pivot
toolbar={true}
/>

In Vue

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

<Pivot
ref="pivot"
toolbar>
</Pivot>

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 GitHub or 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 web page. Let’s create a minimal report for this (replace filename and other parameters with your specific values):

var pivot = new Flexmonster({
	container: "pivotContainer",
	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 web page from a browser — there you go! A pivot table is embedded into your project.

What’s next?