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.

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

1. Set up an empty component in your HTML page. If Flexmonster is not yet embedded – return to Quick start. Your code should look similar to the following example:

   <div id="pivotContainer">The component will appear here</div>
   <script src="flexmonster/flexmonster.js"></script>
   <script>
   	var pivot = new Flexmonster({
   		container: "pivotContainer",
   		toolbar: true,
   		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
   	});
   </script>
   

2. 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

3. Add the filename property to the report object:

   <div id="pivotContainer">The component will appear here</div>
   <script src="flexmonster/flexmonster.js"></script>
   
   <script>
   	var pivot = new Flexmonster({
   		container: "pivotContainer",
   		toolbar: true,
   		report: {
   			dataSource: {
   				filename: "data.csv"
   			}
   		},
   		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
   	});
   </script>

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

   <div id="pivotContainer">The component will appear here</div>
   <script src="flexmonster/flexmonster.js"></script>
   
   <script>
   	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" }
   				]
   			}
   		},
   		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
   	});
   </script>

5. Now launch the page from the 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:

1. 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.
2. 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:
• How to increase data loading speed
• How to define data types in CSV
• How to configure which data subset is shown
• How to specify functionality available to customers
• How to define number formatting
• How to define conditional formatting
• How to define a format for date and time