CSV File Visualizer with Charts | HTML CSS JavaScript

CSV File Visualizer with Charts with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #21

Project Overview

The CSV File Visualizer with Charts is a beginner-friendly web application built with HTML, CSS, and JavaScript. It allows users to upload a CSV file and visualize its data through a chart. Once the file is selected, JavaScript reads the CSV content, processes the rows, and extracts the required values for visualization.

The project uses the FileReader API to read the uploaded file and Chart.js to create the chart. As a result, users can turn simple CSV data into a visual representation without manually creating a chart. This project is useful for learning file handling, CSV parsing, array manipulation, DOM interaction, and basic data visualization.

Key Features

CSV File Upload: Users can select a CSV file directly from their device using the file input. Once a file is selected, JavaScript starts processing it automatically.
File Reading: This project uses the FileReader API to read the contents of the uploaded CSV file as text. Therefore, the browser can process the file without sending it to a server.
CSV Data Parsing: JavaScript separates the CSV content into rows and then splits each row into individual values. This makes the raw file data easier to process.
Data Extraction: It extracts labels from the first column and numeric values from the second column. It then stores these values in separate arrays for chart creation.
Automatic Chart Generation: After processing the CSV data, JavaScript passes the labels and values to the chart function. As a result, the application automatically creates a bar chart from the uploaded data.
Chart.js Integration: It uses Chart.js to create and display the visualization. The library handles the chart structure and makes it possible to render the CSV data as a responsive bar chart.
Dynamic Visualization: The chart is generated after the user uploads a file. Therefore, users can visualize different CSV datasets without changing the HTML structure.
Responsive Chart: The Chart.js configuration enables responsive behavior. In addition, the CSS limits the canvas width so the chart can fit inside the main container.
Simple User Interface: The interface contains a heading, file upload control, and chart area. Consequently, users can understand the purpose of the application immediately.
Quick Data Analysis: Converting CSV values into a chart makes basic data comparisons easier to understand. Instead of viewing only rows and numbers, users can see the values visually.

What You'll Learn

How to build a CSV file visualizer using HTML, CSS, and JavaScript.
How to read uploaded files using the FileReader API.
How to split and process CSV data using JavaScript.
How to work with arrays and numeric values.
How to use parseFloat() to convert CSV values into numbers.
How to integrate Chart.js into a frontend project.
How to create a dynamic bar chart from uploaded data.
How to make charts responsive using Chart.js.

HTML Code

HTML creates the basic structure of the CSV File Visualizer. The .container holds the project heading, CSV file input, and chart canvas. The file input uses the #csvFile ID so JavaScript can detect when the user selects a file.

Next, the <canvas> element with the #chartCanvas ID provides the space where Chart.js renders the visualization. The page also loads the Chart.js library from its CDN before loading the project’s JavaScript file.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSV File Visualizer</title>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>CSV File Visualizer</h1>

<input type="file" id="csvFile">

<canvas id="chartCanvas"></canvas>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

CSS controls the appearance and layout of the CSV visualizer. First, the universal selector removes the default margin and padding and applies box-sizing: border-box. It also sets Arial as the main font.

The body uses Flexbox to center the application on the page and applies a dark blue background. Meanwhile, the .container creates a white card with padding, rounded corners, a fixed width, centered text, and a subtle shadow, file input receives bottom spacing so that it does not sit directly against the chart. Finally, the canvas uses max-width: 100%, which helps the chart remain inside the container on smaller screens.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:700px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

h1{
margin-bottom:20px;
}

input{
margin-bottom:20px;
}

canvas{
max-width:100%;
}

Javascript Code

JavaScript manages file selection, CSV processing, and chart generation. First, an event listener watches the #csvFile input and calls handleFile() when the user selects a CSV file. Next, handleFile() retrieves the selected file and creates a FileReader object. The reader converts the file into text and passes the result to the parseCSV() function.

The parseCSV() function splits the text into rows and separates each row into columns. It then stores the first column as labels and converts the second column into numbers using parseFloat(). Finally, the drawChart() function uses Chart.js to create a bar chart. It receives the labels and values, adds them to a dataset, and enables responsive chart behavior. As a result, the uploaded CSV data appears as a visual chart directly on the page.

document.getElementById("csvFile").addEventListener("change", handleFile)

function handleFile(event){

const file = event.target.files[0]

if(!file) return

const reader = new FileReader()

reader.onload = function(e){

const text = e.target.result

parseCSV(text)

}

reader.readAsText(file)

}

function parseCSV(data){

const rows = data.split("\n").map(row => row.split(","))

const labels = []
const values = []

for(let i=1;i<rows.length;i++){

labels.push(rows[i][0])
values.push(parseFloat(rows[i][1]))

}

drawChart(labels, values)

}

function drawChart(labels, values){

const ctx = document.getElementById("chartCanvas")

new Chart(ctx,{

type:"bar",

data:{
labels:labels,
datasets:[{
label:"CSV Data",
data:values,
backgroundColor:"#2563eb"
}]
},

options:{
responsive:true
}

})

}