How to Create Angular Chart from CSV Data

In the last article, I have created chart with data from API using HTTPClient module in Angular. Similarly in this article, I will be using same HTTPClient modules and CanvasJS angular chart component to plot chart with data from CSV files.

CSV (Comma Separated Values) files are text files separated by comma and are used generally for sharing data between applications. Many applications like Microsoft Excel, Google Analytics, Database Tools etc. provides data to be exported as CSV file which can be easily imported in other applications. Many times, data from CSV files can be used to plot chart for understanding and analyzing data with ease. For e.g., sales data from website's database can be exported as CSV file and pass it on data analyst team to analyze and make an estimate of impact of various campaigns on sales. Now, let's get started with instructions on how to create chart in angular from CSV data.

Prerequisites

• Basic Angular App
• Installed CanvasJS Angular Chart Component

Step by Step Instructions

1. You can refer my previous article for registering and importing HTTPClient module and chart component.
2. Save CSV file in assets folder (sample.csv)

Name,Marks
Sonia,89
Rajat,75
Chandran,80
Vishal,90
Raghu,65

3. Request for CSV file using get method of httpclient module and use subscribe method to get the CSV data in callback function.

this.http.get('/assets/sample.csv', { responseType: 'text' }).subscribe((response: any) => {});

4. After getting response, we will split CSV data by line and each line of csv data with comma and put it an array for plotting the chart.

    this.http.get('/assets/sample.csv', { responseType: 'text' }).subscribe((response: any) => {
        let csvRowData = response.split(/[\r?\n|\r|\n]+/);
        csvRowData.forEach((rowData: any, index: number) => {
            var data = rowData.split(',');
        });    
});

5. Next, we will parse the data obtained from the above step to the format accept by CanvasJS i.e. { label: string, y: value }

this.http.get('/assets/sample.csv', { responseType: 'text' }).subscribe((response: any) => {
    let csvRowData = response.split(/[\r?\n|\r|\n]+/);
    csvRowData.forEach((rowData: any, index: number) => {
        // since the first line in CSV contains names of columns, we will skip it
        if (index === 0) return;
        var data = rowData.split(',');
        this.dataPoints.push({ label: data[0], y: parseInt(data[1]) });
    });
    this.chart.render(); 
});

Thus, we have implemented chart from CSV data in Angular. It was quite easy right. Similarly based on CSV data, you can plot data in different chart types like line, bar, pie, etc. as well as can create dashboard with all the related data together for analysis.

Improvements

Instead of showing chart with no data in initial stage. We can hide the chart till the data is retrieved from the CSV file by using attribute directive ngIf.

/*app.component.html*/
<div *ngIf="showChart">
  <canvasjs-chart [options]="chartOptions" (chartInstance)="getChartInstance($event)"[styles]="{ width: '100%', 
height: '360px' }"></canvasjs-chart>
</div>

/*app.component.ts*/
export class AppComponent {
  showChart: Boolean = false;
  .
  .

  this.http.get('/assets/sample.csv', { responseType: 'text' }).subscribe((response: any) => {
    let csvRowData = response.split(/[\r?\n|\r|\n]+/);
    csvRowData.forEach((rowData: any, index: number) => {
        // since the first line in CSV contains names of columns, we will skip it
        if (index === 0) return;
        var data = rowData.split(',');
        this.dataPoints.push({ label: data[0], y: parseInt(data[1]) });
    });
    this.showChart = true;
  });
  .
}