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.
Your CSV data should be specified in the following format:
, or ;.false.Speciality "Bike" Shop must be specified as "Speciality ""Bike"" Shop".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.
If Flexmonster is not yet embedded, set up an empty component in your webpage:
Complete the Integrating Flexmonster guide. Your code should look similar to the following example:
const pivot = new Flexmonster({
container: "pivotContainer",
toolbar: true
});
Complete the Integration with React guide. Your code should look similar to the following example:
<FlexmonsterReact.Pivot
toolbar={true}
/>
Complete the Integration with Angular guide. Your code should look similar to the following example:
<fm-pivot [toolbar]="true"> </fm-pivot>
Complete the Integration with Vue guide. Your code should look similar to the following example:
<Pivot toolbar />
You can connect Flexmonster to remote or local CSV data.
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:
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.
To connect to remote CSV data in the report, use the dataSource.filename property:
report: {
dataSource: {
filename: "<url-to-remote-csv-data>"
}
}
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:
connectTo() API call: pivot.connectTo({
filename: "<url-to-remote-csv-data>"
});
Live exampleupdateData() API call: pivot.updateData({
filename: "<url-to-remote-csv-data>"
});
Live exampleThe pivot table can be connected to a CSV file from your computer in one of the following ways:
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.
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.
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:
connectTo() API call: pivot.connectTo({
type: "csv",
browseForFile: true
}); Note The type property must be defined explicitly.
updateData() API call: pivot.updateData({
type: "csv",
browseForFile: true
}); Note The type property must be defined explicitly.
When connecting to CSV data, you can use the following properties of the DataSourceObject:
| Property/Type | Description |
|---|---|
| type String | The data source type. When connecting to CSV data, set the type to "csv". |
| browseForFile Boolean | optional Set browseForFile to true to load a file from the local file system. This property opens the file manager, where you can select the necessary file with the data
Live example.Default value: false. |
| filename String | The URL to a CSV file or to a server-side script that generates CSV data. |
| fieldSeparator String | optional Defines the specific fields separator to split each CSV row. There is no need to define it if the CSV fields are separated by , or ;. This property is required only if another character separates fields.For example, if you use TSV, where a tab character is used to separate fields, then the fieldSeparator parameter should be set to "\t".Alternatively, you can specify the field separator in the CSV file's first row using the sep prefix. Supported prefix formats are the following: sep=fieldSep and "sep=fieldSep". For example:sep=| |
| thousandsSeparator String | optional If commas separate groups of digits in numbers (e.g., 1,000 for one thousand) in your CSV file, set the thousandsSeparator to ",". |
| ignoreQuotedLineBreaks Boolean | optional Indicates whether line breaks in quotes should be ignored (true) or not (false). When set to true, CSV parsing is faster. Set this property to false only if your data source has important line breaks in quotes. Note that this might slow down CSV parsing a little bit.Default value: true. |
| mapping MappingObject | String | optional Defines how fields from the data source are treated and presented within the component. For example, you can specify the field’s captions, define a type for a field, configure multilevel hierarchies, etc. Read more in the Mapping guide. Can be either an inline MappingObject or a URL to a JSON file with the mapping Live example. |
| requestHeaders Object | optional Adds custom request headers. Consists of "key": "value" pairs, where "key" is a header name and "value" is its value
Live example.Note The requestHeaders property is not saved when obtaining the report via save() and getReport() API calls. |
| withCredentials Boolean | optional Indicates whether cross-site Access-Control requests should be made using credentials such as authorization headers (true) or not (false). For more details, refer to MDN web docs.Setting the withCredentials flag to true is recommended when using Windows authentication and other types of server authentication. When set to false, the browser does not ask for credentials and does not include them in outgoing requests.Default value: false. |
You can define how fields from the data source are treated and presented within the component using the mapping. For example, you can:
Note If you are using column prefixes to set data types in CSV, we recommend migrating from CSV prefixes to the mapping.
For easy migration of field types from CSV prefixes to the mapping, see the table below.
| 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. |
If your data contains non-Latin characters, ensure you have set UTF-8 encoding for your data and page. This is required to display the data correctly in the component.
If you run into any issues, visit our troubleshooting page.