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 in the file contains field names.
Each record is located on a separate line.
Fields in records are separated by the same character: comma, semicolon, etc.
To specify which character separates fields in your CSV file, use the dataSource.fieldSeparator property.
Fields may be enclosed in double quotes if needed.
Fields containing line breaks or field separators (e.g., commas) should be enclosed in double quotes.
Note If your CSV file has fields with line breaks, set the dataSource.ignoreQuotedLineBreaks property to false.
A double quote inside a field should be escaped using another double quote. For instance, Field "2" should be specified as Field ""2"" in CSV.

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>"
  }
}

See a live demo on JSFiddle.

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:
```
flexmonster.connectTo({
  filename: "<url-to-remote-csv-data>"
});
```
Check out an example on JSFiddle.

To load the data without clearing the report, use the updateData() API call:
```
flexmonster.updateData({
  filename: "<url-to-remote-csv-data>"
});
```
Check out an example on JSFiddle.

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.

See a live demo on JSFiddle.

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:
```
flexmonster.connectTo({
  type: "csv",
  browseForFile: true
});
```
Note The type property must be defined explicitly.

Try this example on JSFiddle.

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

Check out an example on JSFiddle.

Display non-English characters correctly

If you use an alphabet with special characters you must use UTF-8 encoding. There are two ways to do this:

Specify the encoding for your HTML page to UTF-8 using the content-type HTTP header or the corresponding meta tag:
```
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
```
Content from a database and static JSON files also must be encoded as UTF-8.
If you are not able to change the content of your HTML file, you can embed Flexmonster Pivot in a separate JS file with specified UTF-8 encoding.
```
<script src="yourfile.js" charset="UTF-8"></script>
```

Troubleshooting

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

What's next?

You may be interested in the following articles: