Connecting to CSV

This article illustrates how to build a report based on a CSV data source. A CSV data source is commonly used to display data exported from other sources (for example from Excel). Alternatively, you can load CSV data from a file (see Connect > To local CSV in the Toolbar), refer to a remote CSV file, or add data generated by a server-side script.

To load big CSV files (more than 100 MB), we recommend using Flexmonster Data Server. This server-side tool was designed to handle large datasets. Learn more here: Connecting to CSV using Flexmonster Data Server.

Complete the following steps to use CSV data as a data source in the pivot table embedded in your project.

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:
```
let 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>
```

For this example, we will use a CSV file called data.csv. For simplicity, copy this file to the flexmonster/ folder.

Category,Size,Color,Destination,Business Type,Country,Price,Quantity,Discount
Accessories,262 oz,red,Australia,Specialty Bike Shop,Australia,174,225,23
Accessories,214 oz,yellow,Canada,Specialty Bike Shop,Canada,502,90,17
Accessories,147 oz,white,France,Specialty Bike Shop,France,242,855,37
Accessories,112 oz,yellow,Germany,Specialty Bike Shop,Germany,102,897,42

Add the dataSource.filename property to the ReportObject:

var pivot = new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    report: {
        dataSource: {
            filename: "data.csv"
        }
    }
});

If CSV fields in your file are separated by anything other than , or ;, specify the fieldSeparator property in the report.

Define a slice – fields that go to rows, go to columns and go to measures:

var pivot = new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    report: {
        dataSource: {
            filename: "data.csv"
        },
        slice: {
            rows: [
                { uniqueName: "Color" },
                { uniqueName: "[Measures]" }
            ],
            columns: [
                { uniqueName: "Country" }
            ],
            measures: [
                { uniqueName: "Price", aggregation: "sum" }
            ]
        }
    }
});

Now launch the page from a browser — there you go! A pivot table based on CSV data is embedded into your project. Open this example on JSFiddle.

Now you know how to build a report based on our sample CSV. The next step for you is to visualize your CSV data.

How to 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 CSV 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>
```

What’s next?

You may be interested in the following articles:

Connecting to CSV

In pure JavaScript

In Angular

In React

In Vue

How to display non-English characters correctly

What’s next?