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:
Complete the Quick start guide. Your code should look similar to the following example:
var pivot = new Flexmonster({
container: "pivotContainer",
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 React guide. Your code should look similar to the following example:
<FlexmonsterReact.Pivot
toolbar={true}
/>
Complete the Integration with Vue guide. Your code should look similar to the following example:
<Pivot
ref="pivot"
toolbar>
</Pivot>
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
filename
property to the report object: var pivot = new Flexmonster({If CSV fields in your file are separated by anything other than
container: "pivotContainer",
toolbar: true,
report: {
dataSource: {
filename: "data.csv"
}
}
});
,
or ;
, specify the fieldSeparator property in the report.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 you know how to build a report based on our sample CSV. The next step for you is to visualize your CSV data.
If you use an alphabet with special characters you must use UTF-8 encoding. There are two ways to do this:
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.
<script src="yourfile.js" charset="UTF-8"></script>
You may be interested in the following articles: