This article illustrates how to build a report based on CSV data source. CSV data source is good to display data which is exported from other sources (for instance, from Excel). Also, you can load CSV data from a file (please see Connect > To local CSV in the toolbar), refer remote CSV file or add data generated by the server-side script.

You need to accomplish the following steps to use CSV data as a data source in pivot table embedded into your project.

1. You already have an empty component in your HTML page. If Flexmonster Component is not embedded – return to Quickstart. Your code should look like 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. Let’s say you have the following CSV file called data.csv. To make it simple, 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 filename property to 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 browser — here 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 the alphabet with special characters it is necessary to set 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 the database or static CSV files also must be encoded as UTF-8.
2. In case you are not able to change the content of your HTML file, you can embed Flexmonster Component in a separate JS file with specified UTF-8 encoding.

   <script src="yourfile.js" charset="UTF-8"></script>