Data Visualization
(
3160717 )
Practical and Source Codes
<!DOCTYPE html>
<html lang="en-IN" dir="ltr">
<head>
<title>Read CSV File to Draw Simple Column Bar Chart</title>
<meta charset="utf-8">
<meta name="author" content="SidPro" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Data visualization using javaScript and HTML" />
<script src="js/jquery-3.5.1.min.js"></script>
<style>
#mytable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#mytable td,
#mytable th {
border: 1px solid #ddd;
padding: 8px;
}
#mytable tr:nth-child(even) {
background-color: #f2f2f2;
}
#mytable tr:hover {
background-color: #ddd;
}
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: cornflowerblue;
color: white;
}
legend {
float: right;
}
</style>
</head>
<body>
<h1>Get data from CSV file and draw Column Simple Bar Chart</h1>
<label style="font-size:18px" for="month"><b>Choose a Month: </b></label>
<select id="month" onchange="draw()">
<option value="1">January</option>
<option value="2" selected>February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select><br><br>
<canvas id="myCanvas" style="background: #86A09E;"></canvas>
<legend for="myCanvas"></legend>
</body>
<script>
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth - 200;
myCanvas.height = window.innerHeight - 120;
var ctx = myCanvas.getContext("2d");
function drawLine(ctx, startX, startY, endX, endY, color) {
ctx.save();
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
ctx.restore();
}
function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height, color) {
ctx.save();
ctx.fillStyle = color;
ctx.fillRect(upperLeftCornerX, upperLeftCornerY, width, height);
ctx.restore();
}
var Barchart = function (options) {
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;
this.draw = function () {
var maxValue = 0;
for (var categ in this.options.data) {
maxValue = Math.max(maxValue, this.options.data[categ]);
}
var canvasActualHeight = this.canvas.height - this.options.padding * 2;
var canvasActualWidth = this.canvas.width - this.options.padding * 2;
//drawing the grid lines
var gridValue = 0;
while (gridValue <= maxValue) {
var gridY = canvasActualHeight * (1 - gridValue / maxValue) + this.options.padding;
drawLine(
this.ctx,
0,
gridY,
this.canvas.width,
gridY,
this.options.gridColor
);
//writing grid markers
this.ctx.save();
this.ctx.fillStyle = this.options.gridColor;
this.ctx.textBaseline = "bottom";
this.ctx.font = "bold 10px Arial";
this.ctx.fillText(gridValue, 10, gridY - 2);
this.ctx.restore();
gridValue += this.options.gridScale;
}
//drawing the bars
var barIndex = 0;
var numberOfBars = Object.keys(this.options.data).length;
var barSize = (canvasActualWidth) / numberOfBars;
for (categ in this.options.data) {
var val = this.options.data[categ];
var barHeight = Math.round(canvasActualHeight * val / maxValue);
drawBar(
this.ctx,
this.options.padding + barIndex * barSize,
this.canvas.height - barHeight - this.options.padding,
barSize,
barHeight,
this.colors[barIndex % this.colors.length]
);
barIndex++;
}
//drawing series name
this.ctx.save();
this.ctx.textBaseline = "bottom";
this.ctx.textAlign = "center";
this.ctx.fillStyle = "#fff";
this.ctx.font = "bold 24px Arial";
this.ctx.fillText(this.options.seriesName, this.canvas.width / 2, this.canvas.height);
this.ctx.restore();
//draw legend
barIndex = 0;
var legend = document.querySelector("legend[for='myCanvas']");
var ul = document.createElement("ul");
legend.append(ul);
for (categ in this.options.data) {
var li = document.createElement("li");
li.style.listStyle = "none";
li.style.borderLeft = "20px solid " + this.colors[barIndex % this.colors.length];
li.style.padding = "5px";
li.textContent = categ;
ul.append(li);
barIndex++;
}
}
}
//just change month number
var month = parseInt(document.getElementById('month').value);
var myVinyls = {};
var data;
var months = document.getElementById('month');
$(document).ready(function () {
//just change the name of .txt file to load file
$.get('data/data.csv', function (theData) {
theData = theData.replace(/"/g, '');
theData = theData.split(/\r?\n|\r/);
console.log(theData);
totalRows = theData.length;
data = theData;
totalRows = theData.length;
theHead = theData[0].split(',');
theRow = theData[month].split(',');
for (let i = 1; i < theHead.length - 2; ++i)
myVinyls[theHead[i]] = theRow[i];
var myBarchart = new Barchart({
canvas: myCanvas,
seriesName: "Sales Data of " + months.options[months.selectedIndex].text,
padding: 40,
gridScale: 500,
gridColor: "#eeeeee",
data: myVinyls,
colors: ["#2A9D8F", "#E9C46A", "#F4A261", "#30BCED", "#D9BA41", "#7D001A"]
});
myBarchart.draw();
});
});
function draw() {
theData = data;
month = parseInt(document.getElementById('month').value);
theHead = theData[0].split(',');
theRow = theData[month].split(',');
for (let i = 1; i < theHead.length - 2; ++i)
myVinyls[theHead[i]] = theRow[i];
var legend = document.querySelector("legend[for='myCanvas']");
legend.remove();
var x = document.createElement("LEGEND");
x.setAttribute("for", "myCanvas");
document.body.appendChild(x);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
var myBarchart = new Barchart({
canvas: myCanvas,
seriesName: "Sales Data of " + months.options[months.selectedIndex].text,
padding: 40,
gridScale: 500,
gridColor: "#eeeeee",
data: myVinyls,
colors: ["#2A9D8F", "#E9C46A", "#F4A261", "#30BCED", "#D9BA41", "#7D001A"]
});
myBarchart.draw();
}
</script>
</html>
No comments:
Post a Comment