DV Unit-2 (Theory)

Unit-2 (Theory)
Basics of Data Visualization – Tables:
What is JSON?
● JSON stands for JavaScript Object Notation.

● It is a standard text-based format for representing structured data.
● So basically, Json is one of the data representation format like xml, csv etc.
● It is commonly used for transmitting data in web applications (e.g., sending some data from
the server to the client, so it can be displayed on a web page, or vice versa).
● JSON is a lightweight data-interchange format as it doesn't require any user defined tags
like XML. it mainly contains the data that needs to be transferred, rather than a lot of
markup used to define the structure of the data.
● it is actually language independent as it uses JavaScript syntax, but the JSON format is text
only. Text can be read and used as a data format by any programming language.
● Note: The extension of JSON file is .json
Understanding JSON Syntax:

● JSON data is built on name/value pairs—a colon separates each key from its value, and
commas separate each data pair.
● Example:
“region”: “Northeast”,
“employees”: “150”,
“amount”: “11,000”
● Note that all keys and strings are enclosed in double quotes. All the data, which is
collectively known as a JSON object, is contained within curly braces.
● You can also nest arrays and objects within the JSON values using square brackets or curly
braces respectively. Here's an example that expresses the previous XML data as JSON:
2|Page
Reading JSON file using JavaScript & jQuery
● For Parsing JSON data to HTML Table, we are going to use Jquery’s getJSON() method.
● Example: here is the sample json file (sample.json). We want to display all the content of
this json file in the browser within the HTML Table.
● Sample.json file:
3|Page
Outputting Basic Table Data
● In previous topics, we have seen that how can we display dynamic txt, css, xml and json
data with the help of various jquery ajax methods.
● These strategies are useful and powerful, but they have the distinct problem that if the user’s
browser does not support JavaScript, or if the user has intentionally configured the browser
to not execute JavaScript, then you are not able to present them with any data.
● Meanwhile, if the data table is a static part of the page or is injected into the page by logic
on the server side, then it is easily handled by base-level user agents also.
● So that, now we are learning how you can create static html table, semantic html table, how
you can get maximum readability and many more topics.
Basic HTML code for creating webpage
‹!DOCTYPE html> //represents the document type, and helps browsers to display web pages
correctly.
<html>
<head>
//<head> tag is a container for <title>, <link>, <meta>, <style>, <script>, … etc.
</head>
<body>
//<body> tag is used to contain a web page's content, including hyperlinks, images, tables, text,
etc.
</body>
</html>
Building a basic html table
● The HTML <table> element represents tabular data — that is, information presented in a
two-dimensional table comprised of rows and columns of cells containing data.
● HTML tables allow web developers to arrange data into rows and columns.
4|Page
● The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells/columns. The elements under <td> are
regular and left aligned by default.
Example-1
<html>
<head>
</head>
<body>
<table>
<tr>
<td>No</td>
<td>Month</td>
<td>Savings</td>
</tr>
<tr>
<td>1</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
5|Page
</html>
Output:
● Notice that the previous table displayed is not very attractive.

● You can see attractive in terms of design and styles of the table. Here, we didn’t apply any
color, any style to that table.
● But Modern HTML provides good separation of semantic markup (basic html table code)
from presentation, so, ideally, your markup should describe only the content of your page,
and your CSS defines the presentation aspects. Because we have not added any CSS rules
that target the elements of the data table in this example, so it is a basic table.
Using semantic table mark up
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.
Applying semantic table mark up using Table Heading

● Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which
is used to represent actual data cell. Normally you will put your top row as table heading,
6|Page
otherwise you can use <th> element in any row. Headings, which are defined in <th> tag
are centered and bold by default.
● Example:
<html>
<head>
</head>
<body>
<table>
<tr>
<th>No</th>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>1</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
● But now assume one scenario where you have two different sets of headers, and you want
to apply different formatting to both the headers. To resolve this ambiguity, you can add
scope attribute to the header elements.
Example: ‹th scope="row">No</th›
● it will make no difference in our table, but you’ve now able to separate that header by
appling separate css to that particular row header. Similarly, for column header
7|Page
‹th scope=“co1"›Month‹/th›
‹th scope=“co1"›savings‹/th›
Border Attribute of table tag
● Here, the border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border, then you can use border = "0".
● Example:
<table border=“1”>
….
</table>
Cellpadding and Cellspacing Attributes of table tag
● There are two attributes called cellpadding and cellspacing which you will use to adjust the
white space in your table cells. The cellspacing attribute defines space between table cells,
while cellpadding represents the distance between cell borders and the content within a cell.
● Example:
<table cellpadding=“5” cellspacing=“5”>
….
</table>
Colspan and Rowspan Attributes
● You will use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.
● Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
8|Page
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr><tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Output:
Tables Backgrounds
You can set table background using one of the following two ways −
● bgcolor attribute − You can set background color for whole table or just for one cell.
● background attribute − You can set background image for whole table or just for one cell.
9|Page
You can also set border color using bordercolor attribute.
● Example of bgcolor and bordercolor:

<table border = “1” bordercolor = “black” bgcolor = “yellow”>
● Example of background image:

<table border = “1” bordercolor = “black” background = “1.jpg”>
Table Height and Width
● You can set a table width and height using width and height attributes. You can specify
table width or height in terms of pixels or in terms of percentage of available screen area.
Example:
<table border = "1" width = "400" height = "150">
Table Caption
● The caption tag will serve as a title or explanation for the table and it shows up at the top
of the table.
● Example:
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr> ….. </tr>
</table>
Table Header, Body, and Footer
● Tables can be divided into three portions − a header, a body, and a foot. The head and foot
are rather similar to headers and footers in a word-processed document that remain the
same for every page, while the body is the main content holder of the table.
● The three elements for separating the head, body, and foot of a table are −
<thead> − to create a separate table header.
10 | P a g e
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
● A table may contain several <tbody> elements to indicate different pages or groups of data.
● Example:
<!DOCTYPE html> <html>
<head> </head>
<body>
<thead>
<tr>
<td colspan = "4">This is the head of the table</td> </tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></Cell 3td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
11 | P a g e
Nested Table
● You can use one table inside another table. Not only tables you can use almost all the tags
inside table data tag <td>.
● Example: Following is the example of using another table and other tags inside a table cell.
<!DOCTYPE html> <html>
<head> </head>
<body>
<tr>
<td>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>ABC</td>
<td>30000</td>
</tr>
<tr>
<td>DEF</td>
<td>40000</td>
</tr>
12 | P a g e
</table>
</td>
</tr> </table>
</bod> </html>
Output:
What is CSS?
● CSS stands for Cascading Style Sheets.

● CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
● CSS saves a lot of work. It can control the layout of multiple web pages all at once.
Why use CSS?
These are the three major benefits of CSS:
1) Solves a big problem
● Before CSS, tags like font, color, background style, element alignments, border and size
had to be repeated on every web page. This was a very long process. For example: If you
are developing a large website where fonts and color information are added on every single
page, it will be become a long and expensive process. CSS was created to solve this
problem.
2) Saves a lot of time
● CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.
3) Provide more attributes
● CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.
13 | P a g e
CSS Syntax
● A CSS rule set contains a selector and a declaration block.

● Example:
● Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.
● Declaration Block: The declaration block can contain one or more declarations separated
by a semicolon. For the above example, there are two declarations: color: yellow; font-size:
11 px;
● Each declaration contains a property name and value, separated by a colon.
● Property: A Property is a type of attribute of HTML element. It could be color, border etc.
● Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.
● Selector{Property1: value1; Property2: value2; ..........;}
CSS Selector
● CSS selectors are used to select the content you want to style. Selectors are the part of CSS
rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
● There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
1. CSS Element Selector

● The element selector selects the HTML element by name.
<!DOCTYPE html>
14 | P a g e
<html>
<head>
<style>
p{
text-align: center;
color: blue; }
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p>Paragraph<p>
<p>Paragraph<p>
</body>
</html>
2. CSS Id Selector
● The id selector selects the id attribute of an HTML element to select a specific element. An
id is always unique within the page so it is chosen to select a single, unique element.
● It is written with the hash character (#), followed by the id of the element.
● Let’s take an example with the id "para1".
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue; }
15 | P a g e
</style>
</head>
<body>
<p id="para1">Hello</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
3. CSS Class Selector

● The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.
● Let's take an example with a class "center".
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue; }
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
16 | P a g e
4. CSS Universal Selector
● The universal selector is used as a wildcard character. It selects all the elements on the
pages.
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px; }
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph</p>
<p id="para1">to this paragraph also</p>
<p>to this paragraph also</p>
</body>
</html>
Example of applying css to thead, tbody, tfoot
<head>
<title>HTML Table</title>
<style>
thead { color: orange; }
tbody { color: gray; }
tfoot { color: red; }
17 | P a g e
</style>
</head>
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
<style>
</style>
</head>
<body>
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
18 | P a g e
<td>Cell 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
Configuring a column
● We have seen that how we can apply formatting to specific table, tbody, thead, tfoot etc.
● Now, we want to apply different different formatting to different different columns.’
● For that, we have to use colgroup tag.
colgroup tag
● The <colgroup> tag specifies a group of one or more columns in a table for formatting.
● The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the
styles for each cell, for each row.
● Note: The <colgroup> tag must be a child of a <table> element, after any <caption>
elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
● To define different properties to a column within a <colgroup>, use the <col> tag within
the <colgroup> tag.
19 | P a g e
Example: Ex. Of showing a colgroup that has three columns of different widths
Code for above table:
<!DOCTYPE html>
<html>
<head>
<title>HTML colgroup Tag</title>
</head>
<body>
<p>This example shows a colgroup that has three columns of different widths:</p>
<colgroup>
<col width = "50"></col>
</colgroup
<tr>
<td>col 1</td>
<td>col 2</td>
20 | P a g e
<td>col 3</td>
</tr>
</table>
</body>
</html>
● Specific Attributes of col group tag: The HTML <colgroup> tag also supports the following
additional attributes –
Attribute Value Description
Align right Defines horizontal alignment, not supported in Html5.

left
center
justify
char
Span number Defines the number of columns the <col> should span, not
supported in Html5.
Valign bottom Defines vertical alignment, not supported in Html5.

middle
top
baseline
Width pixels or % Specifies a default width for each column spanned by the
current col element, not supported in Html5 .
Configuring a column by using applying class and CSS
Example: we want to apply different background color to different columns having different
classes
CSS:
<style>
21 | P a g e
.col-header {background-color:yellow;}
.col-body {background-color:green;}
.col-footer {background-color:gray;}
</style>
Class:
<colgroup>
<col class = "col-header"></col>
<col class = "col-body"></col>
<col class = "col-footer"></col>
</colgroup>
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML colgroup Tag</title>
<style type="text/css">
.col-header {background-color:yellow;}
.col-body {background-color:green;}
.col-footer {background-color:gray;}
</style>
</head>
<body>
<colgroup>
<col class = "col-header"></col>
22 | P a g e
<col class = "col-body"></col>
<col class = "col-footer"></col>
</colgroup>
<thead>
<tr>
<td>First-column-Heading</td>
<td>Second-column-Heading</td>
<td>Third-column-Heading</td>
</tr>
</thead>
<tbody>
<tr>
<td>First-column-body</td>
<td>Second-column-body</td>
<td>Third-column-body</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>First-column-footer</td>
<td>Second-column-footer</td>
<td>Third-column-footer</td>
</tr>
</tfppt>
</table>
</body>
23 | P a g e
</html>
Output:
Assuring Maximum Readability
● Sometimes it may be a case, where all the formatting are not supported by all the browsers
and in this case, browser will omit formatting which is not supported by it.
● But, if you are carful, you should end up with a maximum enhanced table for every
scenario.
● Let us take one example of table:
Code for this simple table (without achieving maximum readablility):
Table with CSS & semantic markup:
<!DOCTYPE html>
<html>
<head>
<title>Table With Semantic Markup And CSS</title>
<style>
24 | P a g e
</style>
</head>
<body>
<table>
<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>$1,000,000</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Northeast</th>
<td>$100,000</td>
25 | P a g e
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Southeast</th>
<td>$75,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Midwest</th>
<td>$125,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Mid-Atlantic</th>
<td>$125,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Southwest</th>
<td>$75,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Northwest</th>
<td>$100,000</td>
<td>$142,857</td>
26 | P a g e
</tr>
<tr>
<th scope="row">California</th>
<td>$400,000</td>
<td>$142,857</td>
</tr>
</tbody>
</table>
</body>
</html>
● The current state of our previous data table is that it’s serviceable but not very good-
looking. It’s a bit difficult to read. You can improve these aspects of the table through some
applied CSS and JavaScript. Some of your target platforms will not be able to take
advantage of some of these features, but any features you attempt to use that aren’t
supported should silently be ignored.
Here are some of the issues that it would be good to address in the current table:
● There are no visible divisions between the cells.

● There are no large visual distinctions other than font weight between the headers and the
normal cells.
● The numeric columns would look better right aligned.
● It can be difficult for the eye to travel along a row of the table without slipping to an adjacent
row.
● After considering above issues, I have designed a table that can achieve maximum
readability by applying some formatting to previous table.
● Final Output after achieving maximum readability:
27 | P a g e
Code for above table which achieves readibility:
<!DOCTYPE html>
<html>
<head>
<title>Table With Styled Semantic Markup</title>
<style type="text/css">
/* Remove excess padding between 2 border and apply gray border */
table {
border-collapse: collapse;
border: 1px solid #4C4C4C;
/* Add a dotted border around both header cells
and normal cells */
th, td {
border: 1px dotted #707070;
/* Add some padding around the header content. Make the background
28 | P a g e
color of the headers green. */
th {
background: #C2F0C2;
padding: 5px;
/* Darken the green background for just the column
headers so that they use a different green than the
row headers. */
thead th {
background: #9BC09B;
/* Set the background behind the caption to a dark
gray and the caption text to white. */
caption {
background: #4C4C4C;
padding: 5px;
color: white;
/* This sets a solid bottom border to just the column
headers. . */
th[scope=col] {
border-bottom: 2px solid #707070;
29 | P a g e
th[scope=row] {
border-right: 2px solid #707070;
text-align: left;
/* This right aligns all the normal cell content and
adds some padding to them */
td {
text-align: right;
padding: 5px;
/* This sets a different background to just the row
header that resides in the footer row. */
tfoot th {
background: #BBBBD1;
/* This sets a different background to just the
normal cells that reside in the footer row. */
tfoot td {
background: #CFCFDF;
color: #8D1919;
</style>
</head>
30 | P a g e
<body>
<table>
<caption>Sales By Region</caption>
<colgroup>
<col class="col-header">
<col class="col-amount">
<col class="col-mean">
</colgroup>
<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>$1,000,000</td>
<td></td>
</tr>
</tfoot>
<tbody>
31 | P a g e
<tr>
<th scope="row">Northeast</th>
<td>$100,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Southeast</th>
<td>$75,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Midwest</th>
<td>$125,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Mid-Atlantic</th>
<td>$125,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">Southwest</th>
<td>$75,000</td>
<td>$142,857</td>
32 | P a g e
</tr>
<tr>
<th scope="row">Northwest</th>
<td>$100,000</td>
<td>$142,857</td>
</tr>
<tr>
<th scope="row">California</th>
<td>$400,000</td>
<td>$142,857</td>
</tr>
</tbody>
</table>
</body>
</html>
● New table looks much better than first version.

● By this table we have seen that how can we use the appropriate semantic HTML elements
aided for separating the various types of header rows and normal cells so that they could
be styled differently.
● For increasing more readability, and discriminate row-wise cell from cell, we can add
row wise strips to table link odd row having a background color gray. And even having a
background color white.
● These stripes help the eye track between cells in the same row and make it harder for the
eye to slip from one row to another.
Ex: tbody tr:nth-child(odd) { background: #DBDBDB; }
Output: You can get alternative row highlighted by gray color.
33 | P a g e
Limitations of CSS
● The CSS required to create alternating row highlights actually turns out to be really concise.
The downside, however, is that nth-clild is actually a CSS level 3 selector, so it is only
available in the most modern browsers. Older browsers just ignore the rule, so this rule still
safely and gracefully degrades if someone tries to view it on a noncompliant browser.
● If you drop some of the concision, you can support alternating highlights on older browsers
also. One way of approaching this is to manually add a class to all the odd rows of the table
and then select on that class directly in order to highlight the odd rows. If you were
generating the table using some code on the server, this method would be relatively
straightforward. You could just make sure to emit c lass= "odd for every other row in the
markup generated for the table.
● However, there is a distinct downside to approaching this problem in this way. If you were
to use some client-side code to change the sorting of the rows, you would also need to
reassign all the classes based on the new row order.
● Another approach is to use jQuery to manipulate the rows to implement the alternating row
highlights, one of the benefits of jQuery is that it can help you emulate some more modern
browser features on older browsers.
How to highlight alternate table row using jQuery (Increasing readability using jQuery)
● Answer: Use the jQuery :nth-child() selector

● You can use the jQuery :nth-child() selector to create the zebra striped table by highlighting
its alternate rows.
● The :nth-child(n) selector selects all elements that are the nth child, regardless of type, of
their parent.
● Syntax: :nth-child(n|even|odd|formula)
34 | P a g e
Parameter Description
N The index of each child to match.

Must be a number. The first element has the index number 1.
even Selects each even child element
odd Selects each odd child element
formula Specifies which child element(s) to be selected with a formula (an + b).
Example: p:nth-child(3n+2) selects each 3rd paragraph, starting at the 2nd child
element
Code: Add this code in the head section of previous table for applying alternative
heighlighting
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// Apply alt class on alternate table row
$("table tbody tr:nth-child(even)").addClass("alt");
});
</script>
Adding Dynamic Highlighting
● jQuery comes with a hover() mouse event to allow attach two event handlers to the matched
elements, executed when the mouse enters and leaves the matched elements.
Ex: $("#id").hover(A, B);
35 | P a g e
Here, A – function to call when the mouse enters the matched element.
B – function to call when the mouse leaves the matched element.
Example:
<html>
<head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> </head>
<body>
<h1>Highlight table row record on hover - jQuery</h1>
<table border="1">
<tr><th>No</th><th>Name</th><th>Age</th><th>Salary</th></tr>
<tr><td>1</td><td>ABC</td><td>23</td><td>$100,000</td></tr>
<tr><td>2</td><td>DEF</td><td>24</td><td>$90,000</td></tr>
<tr><td>3</td><td>GHI</td><td>22</td><td>$50,000</td></tr>
<tr><td>4</td><td>JKL</td><td>25</td><td>$40,000</td></tr>
<tr><td>5</td><td>MNO</td><td>21</td><td>$30,000</td></tr>
</table>
<script type="text/javascript">
$("tr").hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
);
36 | P a g e
</script>
</body>
</html>
Output:
Including Computations
● By using jQuery you can perform some calculations also like sum, multiply, divide and
many more in basic html table.
● Example: suppose it is the case where, we want to find out total salary of all the employees.
This sum can be dynamically calculated by jQuery.
Example: Total salary calculation of all the employees
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
$(function () {
var grandTotal = 0;
$("[id*=amtlbl]").each(function (){
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=totalbl]").html("Total Salary=" + grandTotal.toString());
37 | P a g e
});
</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 id=amtlbl_0>100000</td></tr>
<tr><td>2</td><td>DEF</td><td id=amtlbl_1>90000</td></tr>
<tr><td>3</td><td>GHI</td><td id=amtlbl_2>50000</td></tr>
<tr><td>4</td><td>JKL</td><td id=amtlbl_3>40000</td></tr>
<tr><td>5</td><td>MNO</td><td id=amtlbl_4>30000</td></tr>
<tr><td></td><td></td><td id=totalbl></td></tr>
</table>
</body>
</html>
Output:
JQuery DataTables Library
38 | P a g e
● DataTables is a table enhancing plug-in for the jQuery Javascript library, adding sorting,
paging and filtering abilities to plain HTML tables with minimal effort.
● DataTables library is used "To enhance the accessibility of data in HTML tables".
Dependencies
● DataTables has only one library dependency – jQuery. If Jquery is successfully installed in
your system then you can use DataTables library. Else you can directly use online CDN for
JQuery
It is required to include CDN for two additional files.
● The DataTables Javascript file
● The DataTables CSS file
Steps for using jquery DataTables library
1. Include obline Jquery CDN in head section of your source file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2. Include JS and CSS CDNs of DataTable librares in head section of your source file
CSS CDN:
<link rel="stylesheet" type="text/css"

href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
JS CDN:
<script type="text/javascript" charset="utf8"

src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
39 | P a g e
3. Include following function in head section
<script>
$(document).ready( function () {
$('#my_table').DataTable();
} );
</script>
4. Write your basic html table code in body section
& it’s done. Now you can see sorting, paging and filtering abilities are added to plain
HTML table.
Example:
<html>
<head>
<script src="jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css"

href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8"

src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
$('#my_table').DataTable();
} );
</script>
</head>
<body>
40 | P a g e
<table id="my_table" class="display" style="width:100%">
<thead>
<tr>
<th>No</th>
<th>name</th>
<th>salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>40000</td>
</tr>
<tr>
<td>2</td>
<td>DEF</td>
<td>50000</td>
</tr>
<tr>
<td>3</td>
<td>GHI</td>
<td>30000</td>
</tr>
</tbody>
<tfoot>
41 | P a g e
<tr>
<td></td>
<td></td>
<td>Total-120000</td>
</tr>
</tfoot>
</table>
</body>
</html>
Sorting in DataTables
● With DataTables you can alter the ordering characteristics of the table at initialization time.
Using order initialization parameter, you can set the table to display the data in exactly the
order that you want.
● The order parameter is an array of arrays where the first value of the inner array is the
column to order on, and the second is 'asc' (ascending ordering) or 'desc' (descending
ordering) as required. order is a 2D array to allow multi-column ordering to be defined.
Javascript code for sorting
42 | P a g e
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
● In addition to the above code, the following Javascript library files are loaded for use in
this example:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js
Pagination in DataTables
● The style of the pagination options that DataTables presents to the end-user can greatly
effect the look and feel of your table, as well as, of course, the interaction behaviour.
DataTables has four built in paging control types (pagingType), and through the pagination
plug-ins below you can add additional options.
How to use
● To use a pagination plug-in you must include the pagination plug-in code, after you load
the DataTables library, but before you initialise the DataTable. When initialising the
DataTable, you must also tell it to make use of this plug-in, rather than using the default,
by setting the pagingType to the value required by the plug-in.
● As an example the code below makes use of the scrolling pagination plug-in saved into a
file:
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.scrollingPagination.js"></script>
$(document).ready(function() {
43 | P a g e
$('#example').dataTable( {
"pagingType": "scrolling"
} );
} );
</script>
Relating data table to a chart
● For rendering A Bar Chart from A table, we can use highchart plugin.
● Highchart is a lightweight and easy-to-use jQuery plugin used to generate an animated bar
chart by reading tabulated data.
Steps for using highchart plugin
1. Include obline Jquery CDN in head section of your source file
2. Download and include jquery.highchartTable-min, w3.CSS file & highcharts.src.js

files in head section of your source file:
Download links:
● W3.CSS file download link: https://www.w3schools.com/w3css/w3css_downloads.asp

● jquery.highchartTable-min file download link: http://highcharttable.org/
● CDN for highcharts.src.js: https://code.highcharts.com/highcharts.src.js
Include following files in header:
<link href="w3.css" rel="stylesheet"/>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
44 | P a g e
<script src="jquery.highchartTable-min"></script>
3. Include following function in body section
$('table.highchart').highchartTable();
</script>
4. Write your basic html table code in body section
Complete Code:
<!doctype html>
<html>
<head>
<link href="w3.css" rel="stylesheet"/>
</head>
<body>
<div class="w3-container w3-padding-32">
<table class="highchart w3-table-all" data-graph-container-before="1" data-graph-

type="column" style="margin-top:50px;">
<thead>
<tr>
<th>month</th>
<th>sales</th>
<th>benefits</th>
</tr>
</thead>
45 | P a g e
<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>
<tbody>
</tbody>
</table>
</div>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="jquery.highchartTable-min"></script>
$('table.highchart').highchartTable();
</script>
46 | P a g e
</body>
</html>
47 | P a g e

DV Unit-2 (Theory)

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 (Theory)

Uploaded by

Copyright:

Available Formats

Unit-2 (Theory)

Basics of Data Visualization – Tables:

● JSON stands for JavaScript Object Notation.

Understanding JSON Syntax:

Basic HTML code for creating webpage

Building a basic html table

● Notice that the previous table displayed is not very attractive.

Using semantic table mark up

Why do we use semantic markup for table?

Applying semantic table mark up using Table Heading

Border Attribute of table tag

Cellpadding and Cellspacing Attributes of table tag

<table cellpadding=“5” cellspacing=“5”>

Colspan and Rowspan Attributes

● Example of bgcolor and bordercolor:

● Example of background image:

Table Height and Width

<table border = "1" width = "400" height = "150">

<table border = "1" width = "100%">

<caption>This is the caption</caption>

<tr> ….. </tr>

Table Header, Body, and Footer

<thead> − to create a separate table header.

<tfoot> − to create a separate table footer.

<!DOCTYPE html> <html>

<table border = "1" width = "100%">

<table border = "1" width = "100%">

● CSS stands for Cascading Style Sheets.

Why use CSS?

These are the three major benefits of CSS:

1) Solves a big problem

2) Saves a lot of time

3) Provide more attributes

● A CSS rule set contains a selector and a declaration block.

1. CSS Element Selector

<p>This style will be applied on every paragraph.</p>

<p>This paragraph will not be affected.</p>

3. CSS Class Selector

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

<p>This style will be applied on every paragraph</p>

<p id="para1">to this paragraph also</p>

<p>to this paragraph also</p>

Example of applying css to thead, tbody, tfoot

thead { color: orange; }

tbody { color: gray; }

tfoot { color: red; }

thead { color: orange; }

tbody { color: gray; }

tfoot { color: red; }

<table border = "1" width = "100%">

<td colspan = "4">This is the head of the table</td>

<td colspan = "4">This is the foot of the table</td>

Code for above table:

<title>HTML colgroup Tag</title>

<table border = "1">

<col width = "50"></col>

<col width = "100"></col>

<col width = "200"></col>

Attribute Value Description

Align right Defines horizontal alignment, not supported in Html5.

Valign bottom Defines vertical alignment, not supported in Html5.

Configuring a column by using applying class and CSS