Sale
Aqua Prestige – Inspired By Aqu@ Di Gio + Titan Essence – Inspired By Ph@ntom
₹800.00 – ₹1,600.00
size
Choose an option
Add to cart
Buy Now
practical -3 : Develop following program using HTML5 and Javascript.
A. B. C. D. E. F. G. H. I. Develop the simple bar chart using HTML5 CANVAS
Read the data .txt file and draw Data Table
Read the data .txt file and draw Simple Bar Chart
Read the data .csv file and draw Data Table
Read the data .csv file and draw Column Bar Chart
Read the data XML file and draw Data Table
Read the data XML file and draw Simple Chart
Read JSON Data and draw Data Table
Read JSON Data and draw Simple Chart
3(A): Develop the simple bar chart using HTML5
CANVAS
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () { var chart = new
CanvasJS.Chart(“chartContainer”
, { animationEnabled: true,
title: {
text: “Fortune 500 Companies by Country”
},
axisX: {
interval: 1
},
axisY2: {
interlacedColor: “rgba(1,77,101,.2)”
,
gridColor: “rgba(1,77,101,.1)”
, title: “Number of Companies” },
data: [{
type: “bar”
,
name: “companies”
,
axisYType: “secondary”
, color: “#014D65”
,
dataPoints: [
{ y: 3, label: “Sweden” },
{ y: 7, label: “Taiwan” },
{ y: 5, label: “Russia” },
{ y: 9, label: “Spain” },
{ y: 7, label: “Brazil” },
{ y: 7, label: “India” },
{ y: 9, label: “Italy” },
{ y: 8, label: “Australia” },
{ y: 11, label: “Canada” },
6MEET GHELANI (ET21BTAI017)
{ y: 15, label: “South Korea” },
{ y: 12, label: “Netherlands” },
{ y: 15, label: “Switzerland” },
{ y: 25, label: “Britain” },
{ y: 28, label: “Germany” },
{ y: 29, label: “France” },
{ y: 52, label: “Japan” },
{ y: 103, label: “China” },
{ y: 134, label: “US” } ]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id=
“chartContainer” style=
“height: 300px; width: 100%;”></div>
<script src=
“https://canvasjs.com/assets/script/canvasjs. min.js”></script>
</body>
</html>
3(B): Read the data .txt file and draw Data
<!DOCTYPE html>
<html lang=”en-IN” dir=”ltr”>
<head>
<title>Read Text File to Data Table</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”/>
7MEET GHELANI (ET21BTAI017)
<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;
}
</style>
</head>
<body>
<h1>Get data from text file</h1> <table id=”mytable”>
</table>
</body>
<script>
var content = “”; $( document ).ready(function() { //just change the name of .txt file to load file
$.get(‘data/data.txt’, function(theData) {
theData = theData.replace(/r/g,”);
theData = theData.replace(/t/g,’ ‘);
theData = theData.split(‘n’);
totalRows = theData.length;
theHead = theData[0].split(‘ ‘); content += “<tr>”;
theHead.forEach(TH);
content += “</tr>”;
for(let i=1;i<totalRows;++i){
theTD = theData[i].split(‘ ‘); content += “<tr>”;
theTD.forEach(TD); content += “</tr>”;
}
$(‘#mytable’).html(content);
});
});
function TH(value){ content += “<th>” + value + “</th>”; }
function TD(value){ content += “<td>” + value + “</td>”; }
</script>
</html>
3(C): Read the data .txt file and draw Simple Bar Chart
<!DOCTYPE html>
<html lang=”en-IN” dir=”ltr”>
<head>
<title>Read Text File to Draw Simple 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 {
10MEET GHELANI (ET21BTAI017)
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: cornflowerblue; color: white;
}
legend {
float: right;
}
</style>
</head>
<body>
<h1>Get data from text file and draw 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>
<optionvalue=”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: #2e3340;”></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();
11MEET GHELANI (ET21BTAI017)
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”;
12MEET GHELANI (ET21BTAI017)
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.txt’, function (theData) { theData = theData.replace(/r/g, ”);
theData = theData.replace(/t/g,
‘ ‘); theData = theData.split(‘n’);
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: [“#a55ca5”, “#67b6c7”, “#bccd7a”, “#eb9743”, “#32a852”, “#a432a8”] });
myBarchart.draw();
});
});
function draw() {
theData = data;
month = parseInt(document.getElementById(‘month’).val ue);
theHead = theData[0].split(‘ ‘);
13MEET GHELANI (ET21BTAI017)
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: [“#a55ca5”, “#67b6c7”, “#bccd7a”, “#eb9743”, “#32a852”, “#a432a8”] });
myBarchart.draw();
}
</script>
</html>
3(D): Read the data .csv file and draw Data Table
<!DOCTYPE html>
<html lang=”en-IN” dir=”ltr”>
<head>
<title>Read CSV File to Data Table</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>
<script src=”js/jquery.csv.js”></script> <style>
#mytable {
font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;
width: 100%;
14MEET GHELANI (ET21BTAI017)
}
#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;
}
</style>
</head>
<body>
<h1>Get data from CSV file</h1> <table id=”mytable”>
</table>
</body>
<script>
var content = “”; $(document).ready(function () {
//just change the name of .csv file to load file
$.get(‘data/data.csv’, function (theData) { console.log(theData);
theData = theData.replace(/”/g, ”); console.log(theData);
theData = theData.split(/r?n|r/);
console.log(theData);
totalRows = theData.length;
theHead = theData[0].split(‘,’); content += “<tr>”;
theHead.forEach(TH);
content += “</tr>”;
for (let i = 1; i < totalRows; ++i) { theTD = theData[i].split(‘,’); content += “<tr>”;
theTD.forEach(TD);
content += “</tr>”;
}
$(‘#mytable’).html(content); });
});
function TH(value) {
content += “<th>” + value + “</th>”; }
function TD(value) {
content += “<td>” + value + “</td>”; }
</script>
</html>
15MEET GHELANI (ET21BTAI017)
3(E): Read the data .csv file and draw Column Bar Chart
<!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>
16MEET GHELANI (ET21BTAI017)
<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 grid Value = 0;
17MEET GHELANI (ET21BTAI017)
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
18MEET GHELANI (ET21BTAI017)
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”, “#30 BCED”, “#D9BA41”, “#7D001A”]
});
myBarchart.draw();
});
});
function draw() {
theData = data;
month = parseInt(document.getElementById(‘month’).val ue);
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”, “#30 BCED”, “#D9BA41”, “#7D001A”]
});
myBarchart.draw();
}
</script>
</html>
19MEET GHELANI (ET21BTAI017)
3(F): Read the data XML file and draw Data Table
<!DOCTYPE html>
<html lang=”en-IN” dir=”ltr”>
<head>
<title>Read XML File to Data Table</title>
<meta charset=”utf-8″>
<meta name=”author” content=”SidPro” />
<meta
name=”viewport”content=”width=device-widthinitial
-scale=1.0″ />
<meta name=”description” content=”Data
visualization using javaScript and HTML” />
<script src=”js/jquery-3.5.1.min.js”></script>
<script src=”js/jquery.csv.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;
}
20MEET GHELANI (ET21BTAI017)
#mytable tr:hover {
background-color: #ddd;
}
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: cornflowerblue; color: white;
}
</style>
</head>
<body>
<h1>Get data from XML file</h1>
<table id=”mytable”>
<tr>
<th>Territory</th>
<th>Employees</th>
<th>Sales</th>
<th>Year</th>
</tr>
</table>
<script>
$(document).ready(function () {
$.ajax({
type: “GET”,
url: “data/regional_sales.xml”,
dataType: “xml”,
success: xmlParser
});
});
function xmlParser(xml) {
$(xml).find(‘region’).each(function () {
var theTerritory = $(this).find(‘territory’).text();
var numEmployees = $(this).find(’employees’).text();
var theAmount = $(this).find(‘amount’).text();
$(‘#mytable’).append(‘<tr><td>’ + theTerritory +
‘</td><td>’ + numEmployees + ‘</td><td>$’ +
theAmount + ‘</td><td>’ + ‘2013’ + ‘</td></tr>’);
});
}
</script>
</html>
21MEET GHELANI (ET21BTAI017)
3(G): Read the data XML file and draw Simple Chart
<!DOCTYPE html>
<html lang=”en-IN” dir=”ltr”>
<head>
<title>Read XML File to Draw Simple 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%; }
body { background: cornflowerblue; }
#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;
}
22MEET GHELANI (ET21BTAI017)
legend {
float: right;
}
</style>
</head>
<body>
<h1>Get data from XML file and draw Simple Bar Chart</h1>
<canvas id=”myCanvas” style=”background: #2e3340;”></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;
23MEET GHELANI (ET21BTAI017)
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;
24MEET GHELANI (ET21BTAI017)
ul.append(li);
barIndex++;
}
}
}
var myVinyls = {};
var data; $(document).ready(function () {
$.ajax({
type: “GET”,
url: “data/regional_sales.xml”, dataType: “xml”,
success: xmlParser
});
});
function xmlParser(xml) {
$(xml).find(‘region’).each(function () { var theTerritory = $(this).find(‘territory’).text();
var numEmployees = $(this).find(’employees’).text();
var theAmount = $(this).find(‘amount’).text();
theAmount = theAmount.replace(/,/g, ”);
myVinyls[theTerritory] = parseInt(theAmount);
console.log(parseInt(theAmount)); console.log(theTerritory);
});
var myBarchart = new Barchart({ canvas: myCanvas,
seriesName: “Regional Sales Data”, padding: 50,
gridScale: 50000,
gridColor: “#eeeeee”,
data: myVinyls,
colors: [“#2A9D8F”, “#E9C46A”, “#F4A261”, “#30 BCED”, “#D9BA41”, “#7D001A”]
});
myBarchart.draw();
}
</script>
</html>
25MEET GHELANI (ET21BTAI017)
3(H): Read JSON Data and draw Data Table
<!DOCTYPE html>
<html lang=”en-IN” dir=”ltr”>
<head>
<title>Read JSON File to Data Table</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>
<script src=”js/jquery.csv.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;
}
</style>
26MEET GHELANI (ET21BTAI017)
</head>
<body>
<h1>Get data from JSON file</h1> <table id=”mytable”>
</table>
</body>
<script>
var content = “”; $(document).ready(function () { $.ajax({
type: “Get”,
url: “data/regional_sales.json”, dataType: “json”,
success: function (data) { var theData = data.sales.region;
var theHead = Object.keys(theData[0]);
content += “<tr>”;
theHead.forEach(TH); content += “</tr>”;
theData.forEach(function (v) { v = Object.values(v); content += “<tr>”;
v.forEach(TD);
content += “</tr>”; });
$(‘#mytable’).html(content); },
error: function () {
alert(“json not found”);
}
});
});
function TH(value) {
content += “<th>” + value.toUpperCase() + “</th>”;
}
function TD(value) {
content += “<td>” + value + “</td>”; }
</script>
</html>
3(I): Read JSON Data and draw Simple Chart
<!DOCTYPE html>
<html lang=”en-IN” dir=”ltr”>
<head>
<title>Read JSON File to Draw Simple Bar Chart</title>
27MEET GHELANI (ET21BTAI017)
<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 tr:hover {
background-color: #ddd;
}
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: cornflowerblue; color: white;
}
legend {
#mytable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse; width: 100%;
}
body {
background: #e4fde1; }
#mytable td,
#mytable th {
border: 1px solid #ddd; padding: 8px;
}
#table tr:nth-child(even) { background-color: #f2f2f2; }
float: right;
}
</style>
</head>
<body>
<h1>Get data from JSON file and draw Simple Bar Chart</h1>
<canvas id=”myCanvas” style=”background: #2e3340;”></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);
28MEET GHELANI (ET21BTAI017)
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 grid Value = 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,
29MEET GHELANI (ET21BTAI017)
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++;
}
}
}
var myVinyls = {};
var data; $(document).ready(function () {
$.ajax({
type: “GET”,
url: “data/regional_sales.json”, dataType: “json”,
success: jsonParser
});
});
function jsonParser(json) {
var theData = json.sales.region; theData.forEach(function (v) {
myVinyls[v.territory] = parseInt(v.employees);
});
var myBarchart = new Barchart({ canvas: myCanvas,
seriesName: “Regional Employees Data”,
padding: 50,
gridScale: 25,
gridColor: “#eeeeee”,
data: myVinyls,
colors: [“#ED553B”, “#20639B”, “#3CAEA3”, “#F6D55C”, “#173F5F”, “#7D001A”]
});
30MEET GHELANI (ET21BTAI017)
myBarchart.draw();
}
</script>
</html>
Related products
Aqua Prestige – Inspired by Aqu@ Di Gi0 | Muskbliss
Original price was: ₹1,600.00.₹1,200.00Current price is: ₹1,200.00.
Ocean Edge – Inspired by D@vid0ff Cool W@ter | MuskBliss
Original price was: ₹1,149.00.₹799.00Current price is: ₹799.00.Recently viewed products
You have no recently viewed item.
Reviews
There are no reviews yet.