Survey Result Dashboard | HTML CSS JavaScript

Survey Result Dashboard with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #26

Project Overview

The Survey Result Dashboard is a clean and interactive web dashboard built using HTML, CSS, and JavaScript. It helps users understand survey responses by presenting important results through summary cards and a visual chart. Instead of viewing survey data as plain numbers, the dashboard organizes the information into an easy-to-read format.

First, the dashboard stores different survey response categories in JavaScript and uses them to calculate the total number of responses. Next, it calculates the average rating based on the response levels, from Very Satisfied to Very Unsatisfied. Finally, Chart.js turns the survey data into an interactive pie chart, making it easier to compare the response distribution and understand the overall survey results.

Key Features

Survey Response Visualization: The dashboard presents survey responses in a clear visual format. A pie chart makes it easier to compare different response categories.
Total Response Counter: A summary card displays the total number of survey responses. JavaScript calculates this value automatically from the stored survey data.
Average Rating Calculation: The dashboard calculates the average survey rating using weighted values from 1 to 5. The result is displayed with one decimal place.
Interactive Pie Chart: Chart.js creates a pie chart that represents the distribution of survey responses. Each response category gets its own section in the chart.
Dynamic Statistics: The dashboard updates its statistics when the survey data changes. Therefore, the displayed numbers always come from the current data.
Clean Dashboard Layout: The interface uses a centered white container with simple statistic cards and a chart area. This keeps the information organized and easy to read.
Responsive Design: The layout adapts to smaller screens using CSS media queries. On mobile devices, the statistic cards are arranged vertically.
Interactive Stat Cards: The statistic cards include a small hover effect that moves them upward and adds a shadow. This gives the dashboard a more interactive feel.
Chart.js Integration: The project loads Chart.js from a CDN and uses it to create the survey chart. This makes chart creation easier without building the visualization from scratch.
User-Friendly Interface: The dashboard uses simple labels such as Total Responses and Average Rating. As a result, users can understand the main survey results quickly.

What You'll Learn

How to structure a dashboard using HTML
How to create statistic cards for displaying data
How to use CSS Flexbox for dashboard layouts
How to make a dashboard responsive with media queries
How to store survey data using JavaScript objects
How to calculate totals using reduce()
How to calculate weighted average ratings
How to create pie charts using Chart.js

HTML Code

The HTML creates the main structure of the Survey Result Dashboard. First, it adds a heading for the project and then creates a statistics section containing two cards. The first card displays the Total Responses value using the totalResponses element. The second card displays the Average Rating using the avgRating element. JavaScript later updates these values dynamically.

After that, a <canvas> element with the ID surveyChart provides the area where Chart.js draws the pie chart. The Chart.js library is loaded before the JavaScript file so that the chart can be created successfully.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Survey Result Dashboard</title>
<link rel="stylesheet" href="style.css">

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

</head>

<body>

<div class="container">

<h1>Survey Result Dashboard</h1>

<div class="stats">

<div class="card">
<h3>Total Responses</h3>
<p id="totalResponses">0</p>
</div>

<div class="card">
<h3>Average Rating</h3>
<p id="avgRating">0</p>
</div>

</div>

<canvas id="surveyChart"></canvas>

</div>

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

</body>
</html>

CSS Code

The CSS creates a clean dashboard with a dark blue page background and a white main container. The container uses padding, rounded corners, a fixed width, and a soft shadow to separate it from the background. Next, Flexbox arranges the statistic cards side by side on larger screens. Each card has a light background, rounded corners, centered text, and a hover effect that slightly moves the card upward.

The chart uses the full available width and has a maximum height to keep the dashboard balanced. Finally, a media query changes the statistic cards to a vertical layout on screens smaller than 600px, making the dashboard easier to use on mobile devices.

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

/* PAGE */

body{
background:#042354;
display:flex;
justify-content:center;
align-items:flex-start;
padding:40px 20px;
min-height:100vh;
overflow-y:auto;
}

/* MAIN CONTAINER */

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

/* TITLE */

h1{
text-align:center;
margin-bottom:25px;
}

/* STATS CARDS */

.stats{
display:flex;
gap:20px;
margin-bottom:25px;
flex-wrap:wrap;
}

.card{
flex:1;
min-width:200px;
background:#f1f5f9;
padding:20px;
border-radius:10px;
text-align:center;
transition:0.3s;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 6px 15px rgba(0,0,0,0.08);
}

.card h3{
font-size:18px;
margin-bottom:8px;
}

.card p{
font-size:22px;
font-weight:bold;
color:#2563eb;
}

/* CHART */

canvas{
width:100% !important;
max-height:420px;
margin-top:10px;
}

/* MOBILE RESPONSIVE */

@media(max-width:600px){

.stats{
flex-direction:column;
}

.container{
padding:20px;
}

h1{
font-size:22px;
}

}

Javascript Code

JavaScript controls the survey calculations and chart generation. First, the surveyData object stores the survey labels and their response values, ranging from Very Satisfied to Very Unsatisfied. Next, the loadDashboard() function uses reduce() to calculate the total number of responses. It then calculates a weighted rating by multiplying each response count by its rating value and divides the result by the total responses.

After that, JavaScript updates the Total Responses and Average Rating cards in the DOM. Finally, the drawChart() function uses Chart.js to create a responsive pie chart from the survey data. The dashboard calls loadDashboard() when the page loads, so the statistics and chart appear automatically.

const surveyData = {

labels:[
"Very Satisfied",
"Satisfied",
"Neutral",
"Unsatisfied",
"Very Unsatisfied"
],

values:[45,30,15,7,3]

}

function loadDashboard(){

const total = surveyData.values.reduce((a,b)=>a+b,0)

document.getElementById("totalResponses").innerText = total

let ratingScore = (
surveyData.values[0]*5 +
surveyData.values[1]*4 +
surveyData.values[2]*3 +
surveyData.values[3]*2 +
surveyData.values[4]*1
)

let avg = (ratingScore / total).toFixed(1)

document.getElementById("avgRating").innerText = avg

drawChart()

}

function drawChart(){

const ctx = document.getElementById("surveyChart")

new Chart(ctx,{

type:"pie",

data:{

labels:surveyData.labels,

datasets:[{

data:surveyData.values,

backgroundColor:[
"#22c55e",
"#3b82f6",
"#facc15",
"#f97316",
"#ef4444"
]

}]

},

options:{
responsive:true
}

})

}

loadDashboard()