CSV Data Sources in Blazor Pivot Table: A Groundbreaking Feature

In our 2020 Volume 2 release, the Blazor Pivot Table component has added support for comma-separated value (CSV) data sources. CSV is one of the most popular data sharing formats, primarily used in business and science applications. It is also considered a more compact format than JSON, as it is just half the size of JSON. As such, it helps reduce bandwidth usage while transferring data through a browser.

In the Blazor Pivot Table component, a CSV data source can be set as input in the following ways:

• As a file from local storage.
• As a file from remote storage.
• From a web service using the “text/csv” MIME type.

Let’s learn about them!

As a file from local storage

A CSV file can be retrieved from local storage using the File Uploader component. Once the file is uploaded, the contents will be converted to the format accepted by the Pivot Table and set as its data source.

Refer to the following code example.

[*.ts]

import { PivotView } from '@syncfusion/ej2-pivotview';
import { Uploader } from '@syncfusion/ej2-inputs';

// Step 1: Initiate the File Uploader.
let uploadObj: Uploader = new Uploader();
uploadObj.appendTo('#fileupload');
let input = document.querySelector('input[type="file"]');
// Step 2: Add the event listener which fires when the *.CSV file is uploaded.
input.addEventListener('change', function (e: Event) {
    // Step 3: Initiate the file reader.
    let reader: FileReader = new FileReader();
    reader.onload = function () {
        // Step 4: Getting the string output which is to be converted as string[][].
        let result: string[][] = (reader.result as string).split('\n').map(function (line) {
            return line.split(',');
        });
        let pivotObj: PivotView = new PivotView({
            dataSourceSettings: {
                // Step 5: The string[][] result to be bound as data source.
                dataSource: result,
                // Step 6: Set data source type as “CSV”.
                type: 'CSV',
                // Step 7: The appropriate report needs to be provided here.
            },
        });
        pivotObj.appendTo('#PivotTable');
    };
    reader.readAsText((input as any).files[0]);
});

As a file from remote storage

A CSV file can be uploaded to any server, and its HTTP or HTTPS link can then be set for the Pivot Table. Then, the Pivot Table will internally retrieve and convert the data to the required format for future processing.

Refer to the following code example.

[*.ts]

let pivotObj: PivotView = new PivotView({
    dataSourceSettings: {
        // URL for file hosted on remote server  needs to be placed here.
        url: 'https://cdn.syncfusion.com/data/sales-analysis.csv',
        // Set data source type as “CSV”.
        type: 'CSV',  
        // The appropriate report needs to be provided here.
    },
});

From a web service using “text/csv” MIME type

CSV data can be transferred from any web service to the Pivot Table component. Users just need to add the service URL to the Pivot Table, and the component will internally retrieve and convert the data to the format needed for future processing.

[*.ts]

let pivotObj: PivotView = new PivotView({
    dataSourceSettings: {
        // URL for file hosted on service  needs to be placed here.
        url: 'https://bi.syncfusion.com/productservice/api/sales',   
        // Set data source type as “CSV”.
        type: 'CSV',  
        // The appropriate report needs to be provided here.
    },
});

CSV: A robust format

As stated previously, the compact size of CSV is a great advantage when transferring large sets of data to the Pivot Table for quick processing and rendering. In the metrics given below, you can see the bandwidth timing of CSV compared to JSON while receiving data from a source.

Records count	Time taken to retrieve data from source
	JSON	CSV
1k rows * 10 columns	0.02s	0.01s
5k rows * 10 columns	0.06s	0.03s
10k rows * 10 columns	0.12s	0.05s
100k rows * 10 columns	0.6s	0.3s

NOTE:

1. The values might be different depending on network speed.
2. The above estimates were made by retrieving data from a server through a downloadable link (either HTTP or HTTPS).
3. After the data retrieval, the component rendering time is the same for both the CSV and JSON file types, which are 0.5 second, 1 second, 1.2 seconds, and 2.5 seconds respectively for the above-mentioned metrics. The virtual scrolling option was also enabled in this sample.

Conclusion

In this blog, we have seen the merits of the new CSV data source support in the Syncfusion Blazor Pivot Table. This groundbreaking support is available in our 2020 Volume 2 release. You can check out all the new features in our release notes and on the What’s New page.

Use this CSV support and increase your productivity!

For existing customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features. Also, try our samples from this GitHub location.

If you wish to send us feedback, please use the comments section below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!