Connecting to CSV data

This guide illustrates how to connect Flexmonster to a CSV data source.

You can connect to your CSV data using the client-side or the server-side approach. To connect to a CSV file smaller than 100 MB, use the client-side approach, which is described in this guide.
To connect to a CSV file larger than 100 MB, we recommend using Flexmonster Data Server — our server-side solution for processing large datasets. For more details, refer to the Connecting to CSV using Flexmonster Data Server guide.

Prerequisites

Your CSV data should be specified in the following format:

The first record contains field names.
Each record is located on a separate line.
Fields in records are separated by , or ;.
To specify another character that separates fields in your CSV file, use the dataSource.fieldSeparator property.
Fields can be enclosed in double quotation marks.
Fields containing line breaks or field separators (e.g., commas) must be enclosed in double quotation marks.
Note If your CSV file has fields with line breaks, set the dataSource.ignoreQuotedLineBreaks property to false.
If a field member is enclosed in double quotation marks, the double quotes inside the field member must be represented by two double quotation marks. For instance, Speciality "Bike" Shop must be specified as "Speciality ""Bike"" Shop".

Example of a valid CSV file

Category,Color,Country,Price
Accessories,red,Australia,174
Components,blue,France,768
Clothing,green,Canada,512

Other CSV formats aren’t officially supported and may have unexpected results.

Note Ensure that dates are also specified in a supported format.

Step 1. Embed Flexmonster 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. Connect to your CSV data

You can connect Flexmonster to remote or local CSV data.

Connect to remote CSV data (from a file or a server-side script)

Remote CSV data can be a remote CSV file or data generated by a server-side script. Flexmonster can be connected to remote CSV data in one of the following ways:

Via UI
In the report
Using API calls

Via UI

To connect to remote СSV data via UI, use the Toolbar:

Step 1. On the Toolbar, select Connect > To remote CSV. As a result, the Open remote CSV pop-up window will appear.

Step 2. Enter the URL to your CSV data in the input field and click Open.

In the report

To connect to remote CSV data in the report, use the dataSource.filename property:

report: {
  dataSource: {
    filename: "<url-to-remote-csv-data>"
  }
}

Live example

Using API calls

To connect to remote CSV data at runtime, use the connectTo() or updateData() API call with the DataSourceObject input parameter. For details on data source configurations, go to the In the report tab:

To load the data and clear the report, use the connectTo() API call:
```
pivot.connectTo({
  filename: "<url-to-remote-csv-data>"
});
```
Live example

To load the data without clearing the report, use the updateData() API call:
```
pivot.updateData({
  filename: "<url-to-remote-csv-data>"
});
```
Live example

Connect to a CSV file from your computer

The pivot table can be connected to a CSV file from your computer in one of the following ways:

Via UI
In the report
Using API calls

Via UI

To connect to a local СSV file via UI, use the Toolbar:

Step 1. On the Toolbar, select Connect > To local CSV. As a result, the file manager will appear.

Step 2. Select the file via the file manager.

In the report

To connect to a local CSV file in the report, use the dataSource.browseForFile property:

report: {
  dataSource: {
    type: "csv",
    browseForFile: true
  }
}

Note The type property must be defined explicitly.

Live example

Using API calls

To connect to a local CSV file at runtime, use the connectTo() or updateData() API call with the DataSourceObject input parameter. For details on data source configurations, go to the In the report tab:

To load the file and clear the report, use the connectTo() API call:
```
pivot.connectTo({
  type: "csv",
  browseForFile: true
});
```
Note The type property must be defined explicitly.
Live example

To load the file without clearing the report, use the updateData() API call:
```
pivot.updateData({
  type: "csv",
  browseForFile: true
});
```
Note The type property must be defined explicitly.
Live example

Configure the data source

You can define how fields from the data source are treated and presented within the component using the mapping. For example, you can:

Specify a caption for a field.
Hide a field.
Define available aggregations for a field.
Configure multilevel hierarchies.

Note If you are using column prefixes to set data types in CSV, we recommend migrating from CSV prefixes to the mapping.

Migrate from CSV prefixes to the MappingObject

For easy migration from CSV prefixes to the mapping, see the table below.

Migration table

CSV prefix	Mapping type	Description
`+`	`"string"`	The field is a dimension.
`-`	`"number"`	The field is a value.
`m+`	`"month"`	The field stores months.
`w+`	`"weekday"`	The field stores days of the week.
`d+`	`"date"`	The field stores a date. The field of this type is split into 3 different fields: Year, Month, and Day.
`D+`	`"year/month/day"`	The field stores a date. It’s displayed as a multilevel hierarchy with the following levels: Year > Month > Day.
`D4+`	`"year/quarter/month/day"`	The field is a date. It’s displayed as a multilevel hierarchy with the following levels: Year > Quarter > Month > Day.
`ds+`	`"date string"`	The field stores a date. It can be formatted using the `datePattern` option (default is `"dd/MM/yyyy"`).
`t+`	`"time"`	The field stores time.
`dt+`	`"datetime"`	The field stores a date. It can be formatted using the `dateTimePattern` option (default is `"dd/MM/yyyy HH:mm:ss"`).
`id+`	`"id"`	The field is an id. The field of this type can be used for editing data. It’s not shown in the Field List.

Display non-English characters correctly

If your data contains non-Latin characters, ensure you have set UTF-8 encoding for your data and page so the data is displayed correctly in the component.

Troubleshooting

If you run into any issues, visit our troubleshooting page.

What's next?

You may be interested in the following articles:

Changes to Flexmonster Software License Agreement

Connecting to CSV data

Prerequisites

Step 1. Embed Flexmonster into your webpage

In pure JavaScript

In React

In Angular

In Vue

Step 2. Connect to your CSV data

Connect to remote CSV data (from a file or a server-side script)

Via UI

In the report

Using API calls

Connect to a CSV file from your computer

Via UI

In the report

Using API calls

Configure the data source

Migrate from CSV prefixes to the MappingObject

Display non-English characters correctly

Troubleshooting

What's next?