DV Unit-2

Unit-2
Basics of Data Visualization – Tables:

JQuery:
 jQuery is a lightweight, "write less, do more", JavaScript library.
 The purpose of jQuery is to make it much easier to use JavaScript on your website.
 jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.
 jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.
 The jQuery library contains the following features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on
the element(s).
Basic syntax is: $(selector).action()
 A $ sign to define/access jQuery
 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
The Document Ready Event

$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
1|Page
AJAX :
AJAX = Asynchronous JavaScript and XML.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without
reloading the whole page.
In short; AJAX is about loading data in the background and display it on the webpage, without
reloading the whole page.
Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote
server using both HTTP Get and HTTP Post - And you can load the external data directly into the
selected HTML elements of your web page!
The key difference between Ajax and jQuery is that the jQuery is more like a Frame Work,
which is built using JavaScript while Ajax is a technique or a way of using JavaScript for
communicating with the server without reloading a web page. jQuery uses Ajax for many of its
functions
What is JQuery CDN?

JQuery CDN is a method to include jQuery into a website without actually downloading and
keeping it in the website’s folder.
JQuery CDN is a quick and concise JavaScript library that simplifies event handling, animation,
AJAX interactions, and HTML document traversing for fast website development. jQuery UI CDN
simplifies the client-side scripting of HTML; therefore, it simplifies the development of Web 2.0
applications.
The Document Object Model (DOM)

The Document Object Model (DOM) is a cross-platform and language-independent interface that
treats an XML or HTML document as a tree structure wherein each node is an object representing
a part of the document. The DOM represents a document with a logical tree. Each branch of the
tree ends in a node, and each node contains objects.
The Document Object Model (DOM) is a programming interface for web documents. It represents
the page so that programs can change the document structure, style, and content. The DOM
represents the document as nodes and objects; that way, programming languages can interact with
the page.
2|Page
Reading Text File_JQuary
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>contains demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Click the button to display the array values</p>
<button onclick="myFunction()">Try it</button>
<div id="container"></div>
<script>
function myFunction()
{
jQuery.get('http://127.0.0.1:8080/SampleText.txt', function(theData)
{
$('#container').html(theData.replace(/\n/g,'<br>')); // g is for global search.
});
}
</script>
</body>
</html>
SampleText.txt
Line 1
Line 2
Line 30
Line 40
Line 50
Line 60
3|Page
Reading CSV File_JQuary
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>contains demo</title>
</head>
<body>
<p>Click the button to display the array values</p>
<button onclick="myFunction()">Try it</button>
<div id="container"></div>
<script>
{
jQuery.get('http://127.0.0.1:8080/SampleCSV.csv', function(theData)
{
$('#container').html(theData.replace(/\n/g,'<br>').split(","));
});
}
</script>
</body>
</html>
SampleCSV.csv
A, B, C, D, E
F, G, H, I, J
K, L, M, N, O
P, Q, R, S, T
U, V, W, X, Y
4|Page
Reading XML File_Jquary
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<p>Click the button to display XML File Contant</p>
<button onclick="myFunction()">Data</button>
<div id="container"> </div>
<script>
{
jQuery.get('http://127.0.0.1:8080/Sample.xml', function(data)
{
$(data).find('list').each(function() {
// Append new data to the DIV element.
$('#container').append( '<div>' +
'<div><b>Name of Book: </b>' +
$(this).find('BookName').text() + '</div> ' +
'<div><b>Category: </b>' +
$(this).find('Cat').text() + '</div> ' +
'<div><b>Price: </b>' +
$(this).find('Price').text() + '</div> ' + '</div>');
});
});
}
</script>
</body>
</html>
SampleXML.xml
<?xml version='1.0' ?>
<books>
<list>
<BookName> Data Visualization </BookName>
<Cat> Programming </Cat>
<Price> 2100 </Price>
</list>
<list>
<BookName> DV </BookName>
<Cat> Programming </Cat>
<Price> 3100 </Price>
</list>
</books>
5|Page
Displaying JSON Content
JSON stands for JavaScript Object Notation.
JSON is a text format for storing and transporting data.
JSON is "self-describing" and easy to understand.
JSON is language independent.
The JSON syntax is derived from JavaScript object notation, but the JSON format is text only.
Why Use JSON?

The JSON format is syntactically similar to the code for creating JavaScript objects. Because of
this, a JavaScript program can easily convert JSON data into JavaScript objects. Since the format
is text only, JSON data can easily be sent between computers, and used by any programming
language.
JavaScript has a built in function for converting JSON strings into JavaScript objects:
JSON.parse()
JavaScript also has a built in function for converting an object into a JSON string:
JSON.stringify()
<!doctype html>
<html>
<body>
<script>
var jsonObj = { "sales": [
{"region": "Northeast", "employees":150, "amount":"115,000"},
{"region": "Southeast", "employees":125, "amount":"95,000"},
{"region": "West", "employees":325, "amount":"265,000"}
]
};
//Specify the index value inside the sales.
var theAmount = jsonObj.sales[2].amount;
var theRegion = jsonObj.sales[2].region;
var theEmployee = jsonObj.sales[2].employees;
//alert("The amount is : " + theAmount);
//document.write: Write some HTML elements directly to the HTML output
document.write("Region: "+theRegion+"<br/><br/>");
document.write("Number of Employees: "+theEmployee+"<br/><br/>");
document.write("Amount is: "+theAmount);
</script>
</body>
</html>
6|Page
Asynchronous JSON Example
Even though we can include JSON inline on the page, it is more mutual to deal with exterior JSON
resources that we access asynchronously. The getJSON() method is used to get JSON data using
an AJAX HTTP GET request.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Asynchronous JSON Example</title>
</head>
<body>
<script>
$.getJSON("http://127.0.0.1:8887//SampleJSON.json",function(data){
$.each(data.sales,function(k,v)
{
var theTerritory = v.region;
var numEmployees = v.employees;
var theAmount = v.amount;
document.write("Region: "+theTerritory+"<br/><br/>");
document.write("Number of Employees:"+numEmployees+"<br/><br/>");
document.write("Amount: "+theAmount+"<br/><br/>");
});
});
</script>
</body>
</html>
SampleJSON.json
{ "sales": [
{"region": "Northeast", "employees":150, "amount":"115,000"},
{"region": "Southeast", "employees":125, "amount":"95,000"},
{"region": "West", "employees":325, "amount":"265,000"}
]
}
7|Page
Building a Table
<!DOCTYPE html>
<html>
<head>
<title> Simple Table </title>
</head>
<body>
<table>
<tr>
<td> Region </td>
<td> Sales </td>
<td> Mean </td>
</tr>
<tr>
<td> North </td>
<td> 10,000 </td>
<td> 150 </td>
</tr>
<tr>
<td> South </td>
<td> 30,000 </td>
<td> 160 </td>
</tr>
<tr>
<td> West </td>
<td> 12,500 </td>
<td> 142 </td>
</tr>
<tr>
<td> East </td>
<td> 25,000 </td>
<td> 250 </td>
</tr>
<tr>
<td> Southwest </td>
<td> 35,000 </td>
<td> 300 </td>
</tr>
</table>
</body>
</html>
8|Page
Using Semantic Table
Why do we use semantic markup for table?
● There is an implication that the first (top) row contains cells that represent the headers for the
columns below each of them (title of the column).
● There is also an implication that the first cell in each row describes the subsequent row content
(Ex: sequence no. for data in table).
● For applying separate formatting to these headings, we have to use semantic markup.
● Basically, semantic markup means apply some style to the row/column heading so that those
can be viewed differently with compare to other table data.
● You can solve previous problem (separating data and heading), by better defining the
semantics, or meaning, of each piece of markup in the table.
● If the cells in the first row are meant to be the headers of the columns, then you can make that
content to heading explicitly by using the <th> element rather than the <td> element.
An HTML table has two kinds of cells:

Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.
The scope attribute specifies whether a header cell is a header for a column, row, or group of
columns or rows.
Attribute Values:
Value Description
col Specifies that the cell is a header for a column
row Specifies that the cell is a header for a row
colgroup Specifies that the cell is a header for a group of columns
rowgroup Specifies that the cell is a header for a group of rows
<!DOCTYPE html>
<html>
<head>
<title>Table With Semantic Markup</title>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col"> Region </th>
<th scope="col"> Sales </th>
<th scope="col"> Mean </th>
</tr>
</thead>
9|Page
<tfoot>
<tr>
<th scope="row"> Sum </th>
<td> 1,12,500 </td>
<td> </td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row"> North </th>
<td> 10,000 </td>
<td> 150 </td>
</tr>
<tr>
<th scope="row"> South </th>
<td> 30,000 </td>
<td> 160 </td>
</tr>
<tr>
<th scope="row"> West </th>
<td> 12,500 </td>
<td> 142 </td>
</tr>
<tr>
<th scope="row"> East </th>
<td> 25,000 </td>
<td> 250 </td>
</tr>
<tr>
<th scope="row"> Southwest </th>
<td> 35,000 </td>
<td> 300 </td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
10 | P a g e
Configuring the Columns:
We can configure table by including <style> tag in <head>.
<style type="text/css">
thead { color: red; }
tbody { color: gray; }
tfoot { color: blue; }
</style>
Styling The Table:

<!DOCTYPE html>
<html>
<head>
<title> Table With Alternating Row Highlight </title>
table { border: 1px solid black; }
th, td { border: 1px dotted black; }
th { background: #C2F0C2;
padding: 5px; }
thead th { background: pink; }
caption { background: gray;
padding: 5px;
color: white; }
tfoot { background: yellow; }
tbody tr:nth-child(odd) { background: #DBDBDB; }
</style>
</head>
<body>
<table>
<caption>Sales By Region</caption>
<thead>
<tr>
<th scope="col">Region</th>
11 | P a g e
<th scope="col">Sales</th>
<th scope="col">Mean</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Sum</th>
<td>160</td>
<td>200</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">A</th>
<td>10</td>
<td>20</td>
</tr>
<tr>
<th scope="row">B</th>
<td>30</td>
<td>40</td>
</tr>
<tr>
<th scope="row">C</th>
<td>50</td>
<td>60</td>
</tr>
<tr>
<th scope="row">D</th>
<td>70</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
12 | P a g e
Adding Dynamic Highllighting:
<!DOCTYPE html>
<html>
<head>
<title>Table With Dynamic Highlight</title>
table {border: 1px solid black;}
th {background: yellow; padding: 10px;}
td{padding: 10px;}
body{width:610px;}
.current-row{background-color:coral;}
.current-col{background-color:cyan;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
13 | P a g e
<script>
$(document).ready(function() {
$('.table-row').hover(function() { $(this).addClass('current-row');},
function() { $(this).removeClass('current-row'); });
$("th").hover(function() {
var index = $(this).index();
$("th.table-header, td").filter(":nth-child(" + (index+1) + ")")
.addClass("current-col");
}, function() { var index = $(this).index();
$("th.table-header, td").removeClass("current-col"); });
});
</script>
</head>
<body>
<table class="tutorial-table">
<thead>
<tr>
<th class="table-header" >Serial No.</th>
<th class="table-header">Region</th>
<th class="table-header">Sales</th>
</tr>
</thead>
<tbody>
<tr class="table-row">
<td>1.</td>
<td>India</td>
<td>$100,000</td>
</tr>
<td>2.</td>
<td>Canada</td>
<td>$200,250</td>
</tr>
<td>3.</td>
<td>USA</td>
<td>$500,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Including Computations:
<html>
14 | P a g e
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
var grandTotal = 0;
$(".amtlbl").each(function (){
grandTotal = grandTotal + parseFloat($(this).html());
});
$("#totalbl").html("Total Salary=" + grandTotal.toString());
});
</script>
</head>
<body>
<table border="1">
<tr> <th>No</th> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>1</td> <td>ABC</td> <td class=amtlbl> 10000 </td> </tr>
<tr> <td>2</td> <td>DEF</td> <td class=amtlbl> 90000 </td> </tr>
<tr> <td>3</td> <td>GHI</td> <td class=amtlbl> 50000 </td> </tr>
<tr> <td>4</td> <td>JKL</td> <td class=amtlbl> 40000 </td> </tr>
<tr> <td>5</td> <td>MNO</td> <td class=amtlbl>30000 </td> </tr>
<tr> <td></td> <td> </td> <td id=totalbl></td> </tr>
</table>
</body>
</html>
Using Data Table Library:

<!DOCTYPE html>
<html>
<head>
<title>Table With DataTables</title>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"> </script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"> </script>
$(function () {
$("#salesByRegion").dataTable( {
15 | P a g e
//"paging": false,
//"ordering": false,
//"order": [[ 2, "desc" ]],
// "info": false
});
});
</script>
</head>
<body>
<table id="salesByRegion" class="stripe">

<caption>Sales By Region</caption>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Sales</th>
<th scope="col">Mean</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Sum</th>
<td>15,000</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Midwest</th>
<td>2500</td>
<td>142</td>
</tr>
<tr>
<th scope="row">Northeast</th>
<td>1000</td>
<td>857</td>
</tr>
<tr>
<th scope="row">Southeast</th>
<td>1200</td>
<td>157</td>
</tr>
<tr>
<th scope="row">Mid-Atlantic</th>
<td>1500</td>
<td>232</td>
</tr>
16 | P a g e
<tr>
<th scope="row">California</th>
<td>2000</td>
<td>557</td>
</tr>
<tr>
<th scope="row">Midwest</th>
<td>3700</td>
<td>290</td>
</tr>
<tr>
<th scope="row">Mid-Atlantic</th>
<td>1900</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
Relating Data Table to Chart

<!doctype html>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highchartTable/2.0.0/
jquery.highchartTable.js"> </script>
</head>
<body>
<div class="cont"">
17 | P a g e
<table class="highchart w3-table-all" data-graph-container-before="1" data-graph-
type="column" >
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
<th>Benefits</th>
</tr>
</thead>
<tbody> <tr>
<td>Jan</td>
<td>50000</td>
<td>30000</td>
</tr>
<tr>
<td>Feb</td>
<td>20000</td>
<td>40000</td>
</tr>
<tr>
<td>March</td>
<td>10000</td>
<td>50000</td>
</tr>
<tr>
<td>Apr</td>
<td>60000</td>
<td>20000</td>
</tr> </tbody>
</table> </div>
$('table.highchart').highchartTable();
</script>
</body>
</html>
18 | P a g e

DV Unit-2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DV Unit-2

Uploaded by

Copyright:

Available Formats

Unit-2

Basics of Data Visualization – Tables:

The Document Ready Event

// jQuery methods go here...

What is JQuery CDN?

The Document Object Model (DOM)

Why Use JSON?

An HTML table has two kinds of cells:

The text in <th> elements are bold and centered by default.

Styling The Table:

Using Data Table Library:

Relating Data Table to Chart

You might also like