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 is a web application that allows users to upload CSV files and visualize the data through charts. Once a CSV file is uploaded, the application reads the data, processes it, and displays it in a chart format for better understanding and analysis. This project demonstrates frontend concepts such as file handling, CSV parsing, data visualization, and dynamic chart rendering using Chart.js.

Key Features

Upload CSV files from the device
Automatically parse CSV data
Generate charts from uploaded data
Interactive data visualization
Dynamic chart rendering using Chart.js
Clean and responsive interface
Supports quick data analysis
User-friendly UI

HTML Code

<!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

*{
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

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
}

})

}