How to Create Angular Chart from CSV Data
Tags: angular, chart, csv, datavisualization
Published: 2022-07-29 08:01:36

---
title: How to Create Angular Chart from CSV Data
published: true
description: Create Angular Chart from CSV Data using HTTPClient Module
tags: angular, chart, csv, datavisualization
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy27pbtdsu4xihjms3sq.png
 
 
# Use a ratio of 100:42 for best results.
---
In the last [article](https://dev.to/manoj_004d/create-chart-with-data-from-api-using-httpclient-module-in-angular-2gn5), I have created chart with data from API using HTTPClient module in Angular. Similarly in this article, I will be using same [HTTPClient](https://angular.io/api/common/http/HttpClient) modules and [CanvasJS angular chart component](https://canvasjs.com/angular-charts/) 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](https://angular.io/start)
* [Installed CanvasJS Angular Chart Component](https://canvasjs.com/docs/charts/integration/angular/)

## Step by Step Instructions
1\. You can refer my [previous article](https://dev.to/manoj_004d/create-chart-with-data-from-api-using-httpclient-module-in-angular-2gn5) 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.
```typescript
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.
```typescript
	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 }
```typescript
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](https://angular.io/api/common/NgIf).
```typescript
/*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;
  });
  .
}
```
{% embed https://stackblitz.com/edit/angular-chart-data-csv-file?file=src%2Fapp%2Fapp.component.ts %}