Connecting to CSV using the Flexmonster server
This guide describes how to connect Flexmonster UI to your CSV data.
Prerequisites
-
The Flexmonster server installed and running.
-
An application with Flexmonster embedded into it.
See the installation guide to install the Flexmonster server and embed Flexmonster UI into your application.
Step 1. Creating a data source on the Flexmonster server
Step 1.1. Open Flexmonster Admin Panel and go to Data sources > Add data source.
Step 1.2. Configure connection parameters for your CSV data:
- Specify the data source name.
- Specify the source of your CSV data: local file system (File system) or the URL to the data (URL).
- Set the delimiter and the decimal separator, if necessary.
Step 1.3. Select Create data source.
The data source with your CSV data is now available for use on the client side.
The Has header toggle button
By default, the Flexmonster server considers that the first data record in a CSV file contains field names. This may lead to incorrect parsing of data without field names. For example:
Accessories,red,Australia,174
Components,blue,France,768
Clothing,green,Canada,512
Here, Accessories, red, Australia, and 174 will be treated as field names, while other data records will be parsed as field values.
To parse such data correctly, disable the Has header config when creating a data source.
The server will now treat all data records in the file as field values. In this case, field unique names in the component will be field 0, field 1, etc.
Step 2. Configuring the connection on the Flexmonster UI
On the client side, connect to your data source in the state object using the dataset.dataSource.url and dataset.dataSource.name properties:
const state = {
id: "fm-state",
dataset: {
dataSource: {
url: "ws://localhost:9501/",
name: "sales"
}
}
};
const flexmonster = fm3.Controls.Flexmonster("#pivot-container", {
state: state
});
Notice that the name matches the name of the data source created in step 1.
Specify the delimiter used in the file
In addition to comma (","), Flexmonster supports the following delimiters: ";", "|", and "\t".
If one of these delimiters is used in your CSV data, specify the delimiter on the server or in the embedded metadata inside the CSV file:
If the delimiter is specified both on the server and in the metadata, Flexmonster will use the delimiter from the server config.
Specify the decimal separator used in the file
By default, Flexmonster considers that "." is a decimal separator in CSV data.
If a comma is used as a decimal separator in your file, specify this on the server or in the embedded metadata inside the CSV file:
If the decimal separator is specified both on the server and in the metadata, Flexmonster will use the separator from the server configs.