This article illustrates how to build a report based on a CSV data source.
In Flexmonster, you can:
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.
This guide contains the following sections:
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 webpage:
Complete the Quick start guide. Your code should look similar to the following example:
let 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>
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
dataSource.filename
property to the ReportObject: var pivot = new Flexmonster({If CSV fields in your file are separated by anything other than
container: "pivotContainer",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.flexmonster.com/data/data.csv"
}
}
});
,
or ;
, specify the dataSource.fieldSeparator property.rows
, go to columns
and go to measures
: var pivot = new Flexmonster({
container: "pivotContainer",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.flexmonster.com/data/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.
Flexmonster supports a standard CSV format. According to this format, your CSV files should be structured like this:
Field "2"
should be specified as Field ""2""
in CSV.Here is an example of a valid CSV file:
Category,Color,Country,Price Accessories,red,Australia,174 Components,blue,France,768 Clothing,green,Canada,512
Flexmonster supports the following input date formats:
"2021-04-25"
– Date."2021-04-25T21:30:05"
– Date and time."2021-04-25T21:30:05+03:00"
– Date and time with a time zone."2021-04-25"
is 1619298000000
when converted to a Unix timestamp in milliseconds.Other formats aren’t officially supported and may have unexpected results.
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: