Edit Model

A Laboratory Manual for
Data Visualization
(3160717)
[ B.E. (Computer Engineering): Semester – 6 ]

Enrolment No 200170107049
Name Patel Tanmay Anilkumar
Branch Computer Engineering
Academic Term 2023
Institute Name Vishwakarma Government Engineering
College
Directorate of Technical Education, Gandhinagar,

Gujarat
Vishwakarma Government Engineering College
Department of Computer Engineering
CERTIFICATE
This is to certify that Mr./Ms. _____________________________________________
Enrollment No. _______________ of B.E. Semester ________ from Computer Engineering
Department of this Institute (GTU Code: 017) has satisfactorily completed the Practical /
Tutorial work for the subject Data Visualization(3160717) for the academic year 2022-23.
Place: ___________
Date: ___________
Signature of Course Faculty Head of the Department

Preface
Main motto of any laboratory/practical/field work is for enhancing required skills as well as
creating ability amongst students to solve real time problem by developing relevant
competencies in psychomotor domain. By keeping in view, GTU has designed competency
focused outcome-based curriculum for engineering degree programs where sufficient weightage
is given to practical work. It shows importance of enhancement of skills amongst the students
and it pays attention to utilize every second of time allotted for practical amongst students,
instructors and faculty members to achieve relevant outcomes by performing the experiments
rather than having merely study type experiments. It is must for effective implementation of
competency focused outcome-based curriculum that every practical is keenly designed to serve
as a tool to develop and enhance relevant competency required by the various industry among
every student. These psychomotor skills are very difficult to develop through traditional chalk
and board content delivery method in the classroom. Accordingly, this lab manual is designed to
focus on the industry defined relevant outcomes, rather than old practice of conducting practical
to prove concept and theory.
By using this lab manual students can go through the relevant theory and procedure in advance
before the actual performance which creates an interest and students can have basic idea prior to
performance. This in turn enhances pre-determined outcomes amongst students. Each
experiment in this manual begins with competency, industry relevant skills, course outcomes as
well as practical outcomes (objectives). The students will also achieve safety and necessary
precautions to be taken while performing practical.
This manual also provides guidelines to faculty members to facilitate student centric lab
activities through each experiment by arranging and managing necessary resources in order that
the students follow the procedures with required safety and necessary precautions to achieve the
outcomes. It also gives an idea that how students will be assessed by providing rubrics.
Data visualization is an essential tool for understanding and communicating complex data.
While reading about data visualization can be helpful, there is no substitute for hands-on
experience. This laboratory book is designed to provide you with practical experience in
creating effective and engaging data visualizations.
Throughout this laboratory, you will learn how to use various tools and techniques to create
visualizations that communicate insights and tell stories with data. You will work with real-
world data sets and explore different types of visualizations, including charts, graphs, maps, and
interactive dashboards.
The laboratory exercises are designed to help you develop the skills needed to design and create
effective data visualizations. You will learn how to choose the right visualization for your data,
how to use color and other visual cues to enhance understanding, and how to use storytelling to
communicate insights.
In addition to learning the technical skills needed for data visualization, you will also explore
the ethics and best practices of data visualization. You will learn how to avoid common pitfalls
and how to ensure that your visualizations are accurate, ethical, and accessible.
DTE’s Vision
 To provide globally competitive technical education

 Remove geographical imbalances and inconsistencies
 Develop student friendly resources with a special focus on girls’ education and support to
weaker sections
 Develop programs relevant to industry and create a vibrant pool of technical professionals
Institute’s Vision
 To create an ecosystem for proliferation of socially responsible and technically sound

engineers, innovators and entrepreneurs.
Institute’s Mission
 To develop state-of-the-art laboratories and well-equipped academic infrastructure.

 To motivate faculty and staff for qualification up-gradation, and enhancement of subject
knowledge.
 To promote research, innovation and real-life problem-solving skills.
 To strengthen linkages with industries, academic and research organizations.
 To reinforce concern for sustainability, natural resource conservation and social
responsibility.
Department’s Vision
 To create an environment for providing value-based education in Computer Engineering

through innovation, team work and ethical practices.
Department’s Mission
 To produce computer engineering graduates according to the needs of industry,

government, society and scientific community.
 To develop state of the art computing facilities and academic infrastructure.
 To develop partnership with industries, government agencies and R & D organizations for
knowledge sharing and overall development of faculties and students.
 To solve industrial, governance and societal issues by applying computing techniques.
 To create environment for research and entrepreneurship.
Programme Outcomes (POs)
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis
of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities
with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant
to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or leader
in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give and
receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change.
Program Specific Outcomes (PSOs)
 Sound knowledge of fundamentals of computer science and engineering including

software and hardware.
 Develop the software using sound software engineering principles having web
based/mobile based interface.
 Use various tools and technology supporting modern software frameworks for solving
problems having large volume of data in the domain of data science and machine learning.
Program Educational Objectives (PEOs)
 Possess technical competence in solving real life problems related to Computing.

 Acquire good analysis, design, development, implementation and testing skills to
formulate simple computing solutions to the business and societal needs.
 Provide requisite skills to pursue entrepreneurship, higher studies, research, and
development and imbibe high degree of professionalism in the fields of computing.
 Embrace life-long learning and remain continuously employable.
 Work and excel in a highly competence supportive, multicultural and professional
environment which abiding to the legal and ethical responsibilities.
Practical – Course Outcome matrix
Course Outcomes (COs)
CO_3160717.1 Explore various data visualization techniques in order to provide
new insight.
CO_3160717.2 Apply appropriate data visualization techniques to provide
trends/insights for the given dataset.
CO_3160717.3 Apply visualization tools/techniques for various data analysis tasks.
CO_3160717.4 Given the application context for given data set, Design the
information Dashboard for access information based on user
criteria.
Sr. CO CO CO
Objective(s) of Experiment CO4
No. 1 2 3
1. Practical Set 1:
1. Setup Environment for All the Tools
2. Install Wamp/XAMPP Server
3. Install Jquery Library √
4. Install D3.js and Canvas.js
5. Configure Google Chart API and Google Map
API
2. Practical Set 2:
Develop the following Program Using HTML5 CANVAS
1. Develop the Different basic Graphical Shapes
using HTM5 CANVAS
2. Develop the Different Advanced Graphical Shapes
√
using HTM5 CANVAS
3. Develop the Different basic Graphical Shapes
using HTM5 SVG
4. Develop the Different Advanced Graphical Shapes
using HTM5 SVG
3. Practical Set 3:
Develop Following Program Using HTML5 and
JavaScript
1. Read the data .txt file and draw Data Table √
2. Read the data .csv file and draw Data Table
3. Read the data XML file and draw Data Table
4. Read JSON Data and draw Data Table
4. Practical Set 4:
Develop Following Program Using HTML5 and
JavaScript
1. Develop the simple bar chart using HTML5
CANVAS √
2. Read the data .txt file and draw Simple Bar Chart
3. Read the data .csv file and draw Column Bar Chart
4. Read the data XML file and draw Simple Chart
5. Read JSON Data and draw Simple Chart
5. Practical Set 5 : √
Develop Following Program Using HTML5 and D3.js and
Canvas.js
1. Showing the data as a column chart (simple)
2. Showing the data as a stacked column chart
3. Showing the Data as a column chart for four age
group
6. Practical Set 6
1. Showing the data as a Line chart (single, fewer and
multiple lines)
2. Showing the data as a Pie Chart (single and √
multiple pie)
3. Showing the data as a Bar Chart Simple and
multiple)
7. Practical Set 7:
Develop Following Program Using HTML5 and Google
Chats API and Map API
1. Using Google Charts API Basics draw charts like
√
Bar chart
2. Using Google Charts API Basics draw charts like
Line chart
3. Using Google Charts API Basics draw PieChart.
8. Practical Set 8 :
Develop Following Program Using HTML5 and Google
Chats API and Map API
1. Using Google Charts API Basics draw Donut

Chart. √
2. Using Google Charts API Basics draw Candle
Chart.
3. Using Google Charts API Basics draw other types
of Chart.
4. Using Google API read JSON file and create
Google Map.
9. Practical Set 9
√
Case Study for Different Information Dashboard (Min 2)
10. Practical 10:
Build interconnected Dashboard Using Different Library √
for any one enterprise Solution
Industry Relevant Skills
The following industry relevant competencies are expected to be developed in the student by
undertaking the practical work of this laboratory.
1. Students be able to develop graphs, charts, and interactive visualizations.
2. Students be able to develop web application using HTML5, SVG.
3. Students be able to develop application using D3.js, Google APIs etc.
4. Students be able to develop Dashboard applications.
Guidelines for Faculty members
1. Teacher should provide the guideline with demonstration of practical to the students with
all features.
2. Teacher shall explain basic concepts/theory related to the experiment to the students before
starting of each practical
3. Involve all the students in performance of each experiment.
4. Teacher is expected to share the skills and competencies to be developed in the students
and ensure that the respective skills and competencies are developed in the students after
the completion of the experimentation.
5. Teachers should give opportunity to students for hands-on experience after the
demonstration.
6. Teacher may provide additional knowledge and skills to the students even though not
covered in the manual but are expected from the students by concerned industry.
7. Give practical assignment and assess the performance of students based on task assigned to
check whether it is as per the instructions or not.
8. Teacher is expected to refer complete curriculum of the course and follow the guidelines
for implementation.
Instructions for Students
1. Students are expected to carefully listen to all the theory classes delivered by the faculty
members and understand the COs, content of the course, teaching and examination
scheme, skill set to be developed etc.
2. Students should develop HTML5 Canvas, SVG, D3.js programs and execute all the
programs. Students must show output of each program in their practical file.
3. Student shall develop the habits of evolving more ideas, innovations, skills etc. apart from
those included in scope of manual.
4. Student should develop a habit of submitting the experimentation work as per the schedule
and s/he should be well prepared for the same.
Common Safety Instructions
Students are expected to
1. switch on the PC carefully (not to use wet hands)
2. shutdown the PC properly at the end of your Lab
3. carefully handle the peripherals (Mouse, Keyboard, Network cable etc)
4. use Laptop in lab after getting permission from Teacher
Index
(Progressive Assessment Sheet)
Sr. Objective(s) of Experiment Page Date of Date of Assessme Sign. of Remar
No. No. perform submiss nt Teacher ks
ance ion Marks with date
1 Practical Set 1:
1. Setup Environment for All the
Tools
2. Install Wamp/XAMPP Server
3. Install Jquery Library
4. Install D3.js and Canvas.js
5. Configure Google Chart API and
Google Map API
2 Practical Set 2:
Develop the following Program Using
HTML5 CANVAS
1. Develop the Different basic
Graphical Shapes using HTM5
CANVAS
2. Develop the Different Advanced
CANVAS
3. Develop the Different basic
SVG
4. Develop the Different Advanced
SVG
3 Practical Set 3:
Develop Following Program Using
HTML5 and JavaScript
1. Read the data .txt file and draw
Data Table
2. Read the data .csv file and draw
Data Table
3. Read the data XML file and draw
Data Table
4. Read JSON Data and draw Data
Table
4 Practical Set 4:
HTML5 and JavaScript
1. Develop the simple bar chart using
HTML5 CANVAS
2. Read the data .txt file and draw
Simple Bar Chart
3. Read the data .csv file and draw
Column Bar Chart
4. Read the data XML file and draw
Simple Chart
5. Read JSON Data and draw Simple
Chart
5 Practical Set 5 :
HTML5 and D3.js and Canvas.js
1. Showing the data as a column chart
(simple)
2. Showing the data as a stacked
column chart
3. Showing the Data as a column
chart for four age group
6 Practical Set 6
1. Showing the data as a Line chart
(single, fewer and multiple lines)
2. Showing the data as a Pie Chart
(single and multiple pie)
3. Showing the data as a Bar Chart
Simple and multiple)
7 Practical Set 7:
HTML5 and Google Chats API and Map
API
1. Using Google Charts API Basics
draw charts like Bar chart
draw charts like Line chart
draw PieChart.
8 Practical Set 8 :
HTML5 and Google Chats API and Map
API
draw Donut Chart.
draw Candle Chart.
draw other types of Chart.
4. Using Google API read JSON file
and create Google Map.
9 Practical Set 9
Case Study for Different Information
Dashboard (Min 2)
10 Practical 10:
Build interconnected Dashboard Using
Different Library for any one enterprise
Solution
Total
Data Visualization (3160717) 200170107049
Experiment No - 1
Aim: Setup Environment for All the Tools
 Install Wamp/XAMPP Server

 Install Jquery Library
 Install D3.js and Canvas.js
 Configure Google Chart API and Google Map API
Setting up environment for all above tools is one of the most prominent entry work to develop
further programs on this course. So, this experiment is very important with respect to different
technologies.
Date:
Competency and Practical Skills: Understanding and Analyzing
Relevant CO: CO1
Objectives:
a) Understanding Wamp/XAMPP Server
b) Understanding Jquery Library
c) Understanding D3.js and Canvas.js
d) Understanding Google Chart API and Google Map API
Equipment/Instruments: Computer
Theory:
• Install Wamp/XAMPP Server:
WampServer and XAMPP are popular open-source web server solutions used by developers to
create and test dynamic web applications on their local machines before deploying them to a live
server. They provide an all-in-one solution for running web servers on Windows, Linux, and
Mac OS X systems.
Here are some of the key concepts and components of the WampServer and XAMPP server:
7
1. Apache Web Server: The Apache web server is an open-source software that is the backbone of
the WampServer and XAMPP server. It's responsible for handling HTTP requests from clients,
serving static and dynamic content, and communicating with other web server components.
2. MySQL Database: MySQL is an open-source relational database management system (RDBMS)
that allows developers to store and manage data for web applications.
3. PHP Programming Language: PHP is a popular open-source programming language used to
create dynamic web pages and web applications. It's often used in conjunction with MySQL and
Apache to create a complete web development environment.
4. Operating System: WampServer and XAMPP server are cross-platform solutions that can run on
Windows, Linux, and Mac OS X operating systems.
5. Configuration Files: The configuration files for Apache, PHP, and MySQL are included with
WampServer and XAMPP server. These files can be modified to customize the server settings
and behavior.
6. Control Panel: The WampServer and XAMPP server comes with a control panel that allows
developers to start, stop, and restart the server components. It also provides access to the
configuration files and other server settings.
Procedure:
Here are the general steps to install WampServer or XAMPP server on a Windows machine:
1. Download the Installation File: Go to the official website of WampServer or XAMPP

server and download the installation file for your Windows operating system.
2. Run the Installation File: Once the download is complete, run the installation file to start
the installation process.
3. Choose Installation Location: Choose the installation location for the server. By default,
the server will be installed in the C:\ drive.
4. Choose Server Components: Choose the server components you want to install.
WampServer and XAMPP server typically come with Apache, PHP, and MySQL pre-
installed. You can choose to install additional components if needed.
5. Choose PHP Version: Choose the PHP version you want to install. The latest version of
PHP is recommended.
6. Choose MySQL Database Settings: Choose the MySQL database settings, such as the
root password and port number.
7. Configure Firewall: Configure your firewall to allow access to the server. You may need
to add exceptions to your firewall settings.
8. Start the Server: Once the installation is complete, start the server by clicking on the
WampServer or XAMPP server icon in the system tray.
9. Test the Server: Open a web browser and type "localhost" in the address bar to test the
server. If the server is installed correctly, you should see a message confirming that the
server is running.
10. Start Developing: Once the server is up and running, you can start developing your web
applications on your local machine.
Note: The specific installation steps may vary depending on the version of WampServer or
XAMPP server you are installing. Be sure to follow the instructions provided with the
installation file.
8
 Install Jquery Library:
jQuery is a fast, small, and feature-rich JavaScript library designed to simplify client-side
scripting of HTML. It was developed by John Resig in 2006 and is now one of the most
widely used JavaScript libraries on the web. Here are some of the key concepts and features
of the jQuery library:
1. DOM Manipulation: The jQuery library makes it easy to manipulate the Document
Object Model (DOM) of an HTML document using a simple syntax. You can select
HTML elements, traverse the DOM tree, add or remove elements, and modify
element attributes and styles.
2. Event Handling: jQuery provides a comprehensive set of event handling methods that
allow you to bind event handlers to HTML elements, such as clicks, mouseovers,
keypresses, and form submissions. You can also create custom events and trigger them
programmatically.
3. AJAX: jQuery provides a powerful set of AJAX (Asynchronous JavaScript and XML)
methods that allow you to load data from a server without refreshing the entire page.
You can send HTTP requests, retrieve data in JSON or XML format, and update the
DOM with the response data.
4. Effects and Animations: jQuery includes a range of built-in effects and animations,
such as fading, sliding, and toggling, that can be applied to HTML elements. These
effects can be customized and chained together to create complex animations.
5. Utility Functions: jQuery includes a set of utility functions that make it easier to work
with arrays, strings, objects, and dates. These functions can be used to manipulate
data, format strings, and perform calculations.
6. Plugins: jQuery has a large and active community of developers who have created a
wide range of plugins that extend the functionality of the library. These plugins can be
used to add advanced features, such as image sliders, date pickers, and form
validation, to your web applications.
Overall, jQuery provides a comprehensive set of tools and features that make it easier to
develop dynamic and interactive web applications. It simplifies client-side scripting, reduces
the amount of code you need to write, and makes it easier to create cross-browser compatible
web pages.
Procedure:
9
There are a few ways to install the jQuery library on your website, but the most common way
is to include it via a CDN (Content Delivery Network). Here are the steps to install jQuery
using a CDN:
1. Go to the jQuery website: Open your web browser and go to the jQuery website at
https://jquery.com/.
2. Choose a version: On the jQuery website, choose the version of jQuery you want to
use. We recommend using the latest stable version, which can be found on the home
page.
3. Copy the CDN link: Once you have chosen the version of jQuery you want to use,
copy the CDN link from the website. The link should start with
"https://code.jquery.com/".
4. Paste the CDN link into your HTML code: Open the HTML file of your website and
paste the CDN link into the head section of your HTML code. The code should look
something like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

</body>
</html>
5. Save your HTML file: Save your HTML file and open it in your web browser to test
that jQuery is working correctly.
Note: You can also download the jQuery library and include it in your website as a local
file, rather than using a CDN. To do this, go to the jQuery website and download the
library as a .js file. Then, include the file in your HTML code using a script tag, like this:
10
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>

</body>
</html>
Make sure to place the downloaded .js file in the same directory as your HTML file.
 Install D3.js:
D3.js (Data-Driven Documents) is a JavaScript library that is used for data visualization on
the web. D3.js is designed to work with HTML, SVG, and CSS, and it allows developers to
create complex and interactive visualizations that can be used in a wide range of applications.
Here are some of the key concepts and features of the D3.js library:
1. Data Binding: D3.js allows you to bind data to DOM (Document Object Model)
elements. This means that you can create visualizations that are based on data, and
update them dynamically as the data changes.
2. Data Transformation: D3.js provides a set of powerful data transformation functions
that allow you to manipulate and transform data before it is visualized. You can use
these functions to filter, sort, group, and aggregate data in a wide range of ways.
3. SVG Drawing: D3.js is designed to work with Scalable Vector Graphics (SVG), a web
standard for creating vector graphics. This means that you can create high-quality,
resolution-independent visualizations that can be scaled and zoomed without losing
detail.
4. Selections and Transitions: D3.js uses a selection API that allows you to select
elements in the DOM and modify their attributes and styles. You can also create
transitions that animate changes to element attributes over time.
5. Interactivity: D3.js allows you to create interactive visualizations that respond to user
input. You can create event handlers that respond to mouse clicks, mouseovers, and
11
other user actions, and update the visualization accordingly.

6. Modular Architecture: D3.js is designed as a set of modular components that can be
used independently or combined to create complex visualizations. This allows
developers to reuse code and create customized visualizations that meet their specific
needs.
Overall, D3.js is a powerful and flexible library that allows developers to create data
visualizations that are customized to their specific needs. It provides a wide range of features
for working with data, SVG graphics, and user interactions, and it is widely used in a range of
applications, including data journalism, scientific research, and business intelligence.
Procedure:
To install D3.js, you can use either of the following methods:
Method 1: Using a CDN

The easiest way to start using D3.js is to include it in your HTML code via a CDN. Here are
the steps to do this:
1. Open your HTML file and add the following script tag to the head section of your
document:
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
This will load the latest version of D3.js from the D3.js website.
2. Save the HTML file and open it in your web browser to test that D3.js is working
correctly.
Method 2: Downloading D3.js

If you prefer to download the D3.js library to use it locally, you can follow these steps:
1. Go to the D3.js website at https://d3js.org/ and click on the "Download" button to
download the latest version of the library.
2. Extract the downloaded archive to a folder on your computer.
3. Copy the "d3.js" or "d3.min.js" file from the extracted folder into your project folder.
4. Open your HTML file and add the following script tag to the head section of your
12
document:
<head>
<script src="path/to/d3.min.js"></script>
</head>
Replace "path/to/" with the path to the "d3.min.js" file in your project folder.
5. Save the HTML file and open it in your web browser to test that D3.js is working
correctly.
Once you have installed D3.js, you can start using it to create data visualizations in your web
applications.
 Install Canvas.js:
Canvas.js is a powerful charting library that provides a comprehensive set of features for
creating interactive and customizable charts and graphs. It is based on HTML5 Canvas, a
powerful drawing API that allows for high-quality graphics and animations to be rendered
directly in the browser.
The theory behind Canvas.js revolves around the idea of providing a flexible and easy-to-use
interface for data visualization. At its core, Canvas.js is designed to help users create
beautiful and informative charts and graphs with minimal effort. This is achieved through a
combination of carefully crafted default settings, customizable options, and intuitive APIs
that make it easy to modify and manipulate chart elements.
One of the key principles behind Canvas.js is the idea of responsive design. This means that
charts and graphs created with Canvas.js are designed to be adaptive to different screen sizes
and devices. Whether viewed on a desktop computer or a mobile device, Canvas.js charts
will adjust to fit the available space, ensuring that they remain legible and informative.
Another important aspect of the theory behind Canvas.js is the emphasis on interactivity.
Canvas.js charts are designed to be highly interactive, with a range of features that allow
users to explore and analyze their data in more detail. This includes options such as hover
effects, tooltips, and zooming, as well as more advanced features like data point selection and
chart animation.
Overall, the theory behind Canvas.js is centered on providing a powerful yet intuitive tool for
data visualization that empowers users to create informative and engaging charts and graphs
with ease. Whether used for business analytics, scientific research, or personal projects,
Canvas.js offers a flexible and versatile platform for exploring and communicating data.
Procedure:
13
To install Canvas.js, follow these steps:
1. Download the latest version of Canvas.js from the official website:

https://canvasjs.com/download/
2. Extract the downloaded ZIP file to a folder on your computer.
3. Copy the "canvasjs.min.js" file from the extracted folder to your project directory.
4. In the HTML file where you want to use Canvas.js, add the following code to the head
section of your document:
<head>
<script src="path/to/canvasjs.min.js"></script>
</head>
Replace "path/to" with the path to the directory where you copied the "canvasjs.min.js"
file.
5. You can now use Canvas.js to create charts and graphs in your HTML document by
following the examples and documentation provided on the official website.
Note that Canvas.js also provides a number of plugins and extensions that you can download
and use to extend the functionality of the library. These can be downloaded from the official
website and installed by copying the relevant files to your project directory and including
them in your HTML file as shown in step 4 above.
 Configure Google Chart API:
The Google Chart API is a web-based data visualization platform that allows developers to
create and embed interactive charts and graphs in web pages. It is based on a client-server
architecture, where data is sent from the client-side to the server-side, and the resulting charts
are sent back to the client-side for rendering.
The theory behind the Google Chart API is centered on providing a simple and easy-to-use
interface for creating data visualizations. This is achieved through a set of customizable chart
types, a range of formatting options, and an intuitive API that allows for easy manipulation of
chart elements.
One of the key principles behind the Google Chart API is the idea of interactivity. The API
provides a range of interactive features, such as mouseover events, clickable elements, and
zooming, that allow users to explore and analyze their data in more detail. This helps to make
charts and graphs more engaging and informative, and allows users to gain insights from their
data that might not be immediately apparent from static visualizations.
14
Another important aspect of the theory behind the Google Chart API is the focus on
accessibility. The API is designed to be accessible to a wide range of users, regardless of their
technical background or experience with data visualization. This is achieved through clear
documentation, code examples, and a range of resources and tutorials that are available
online.
Overall, the theory behind the Google Chart API is centered on providing a powerful and
easy-to-use platform for creating interactive data visualizations that can be embedded in web
pages. Whether used for business analytics, scientific research, or personal projects, the
Google Chart API provides a flexible and versatile tool for exploring and communicating
data.
Procedure:
To use the Google Chart API, you don't need to install any software or libraries. The API is
available online and can be accessed by simply adding a script tag to your HTML document.
Here are the steps to get started:
1. First, you need to obtain an API key from the Google Developers Console. If you
don't already have a Google account, create one and sign in. Then, go to the Google
Developers Console at https://console.developers.google.com and create a new
project.
2. Once you have created a new project, click on "Enable APIs and Services" and search
for "Google Chart API". Enable the API and create credentials to obtain an API key.
3. In your HTML document, add the following code to the head section:
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', { 'packages': ['corechart'] });
</script>
</head>
This will load the Google Chart API library and initialize the core chart package.
4. Now you can create your chart by calling the google.visualization object and passing
it your chart options and data. Here's an example of how to create a simple bar chart:
15
<body>
<div id="chart_div"></div>
<script>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2016', 1000, 400],
['2017', 1170, 460],
['2018', 660, 1120],
['2019', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 }
};
var chart = new

google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</body>
This code will create a column chart with the specified data and options and render it
in the chart_div element.
5. Finally, replace the API key in the code with your own API key obtained in step 2.
16
That's it! With these steps, you can now create and embed Google charts into your
HTML document.
 Configure Google Map API:

The Google Maps API is a web-based platform that allows developers to embed interactive
maps and location data into their web pages or applications. The platform provides a set of
tools and resources for working with maps, including APIs for creating custom map
applications, integrating location-based services, and visualizing geographic data.
The theory behind the Google Maps API is centered on providing a comprehensive and
flexible platform for working with maps and location data. This is achieved through a range
of features and tools that allow developers to customize maps to meet their specific needs,
including custom markers, overlays, and data layers.
One of the key principles behind the Google Maps API is the idea of interactivity. The API
provides a range of interactive features, such as clickable markers, zooming, and panning,
that allow users to explore and interact with maps in more detail. This helps to make maps
more engaging and informative, and allows users to gain insights from their location data that
might not be immediately apparent from static visualizations.
Another important aspect of the theory behind the Google Maps API is the focus on
accessibility. The API is designed to be accessible to a wide range of users, regardless of
their technical background or experience with maps and location data. This is achieved
through clear documentation, code examples, and a range of resources and tutorials that are
available online.
Overall, the theory behind the Google Maps API is centered on providing a powerful and
easy-to-use platform for working with maps and location data. Whether used for business
analytics, scientific research, or personal projects, the Google Maps API provides a flexible
and versatile tool for exploring and communicating location-based information.
Procedure:
To use the Google Maps API, you need to follow the steps below:
1. Go to the Google Cloud Console and sign in using your Google account. If you don't
have an account, create one by following the prompts.
2. Create a new project in the Google Cloud Console by clicking on the "Select a Project"
dropdown menu at the top of the screen and then clicking on "New Project". Give your
project a name and click "Create".
3. Enable the Google Maps JavaScript API for your project by clicking on the "APIs &
Services" link in the left-hand menu and then clicking on "Enable APIs and Services".
Search for "Maps JavaScript API" and click on the corresponding result. Then click on
the "Enable" button to enable the API.
17
4. Next, create an API key for your project. Click on the "Credentials" link in the left-hand
menu and then click on the "Create Credentials" button. Select "API key" from the
dropdown menu and then click "Create". Copy the API key that is generated.
5. Finally, add the API key to your HTML file. To do this, add the following script tag to
the head section of your HTML file:
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
Replace YOUR_API_KEY with the API key that you copied in step 4.
That's it! You are now ready to use the Google Maps API in your web application. To get
started, you can follow the examples and documentation provided on the Google Maps
API website.
Observations:
Overall, setting up the environment for these tools can be a bit complex, but it is essential for
web development projects that involve data visualization and Google APIs. Once you have
set up the environment, you can start using these tools to build dynamic and interactive web
applications.
Conclusion:
 Installation of Wamp/XAMPP Server, Jquery Library, D3.js and Canvas.js, Google Chart
API and Google Map API completed successfully
Quiz:
 What is Wamp/XAMPP Server? Explain steps to install it.
 What is Jquery Library? Explain steps to install it.
 What is D3.js? What is Canvas.js? Explain steps to install it.
 What is Google Chart API and Google Map API? Explain steps to install it.
Suggested Reference:
1. Jon Raasch, Graham Murray, Vadim Ogievetsky, Joseph Lowery, “JavaScript and jQuery
for Data Analysis and Visualization”, WROX
2. Ritchie S. King, Visual story telling with D3” Pearson
3. Ben Fry, "Visualizing data: Exploring and explaining data with the processing environment",
O'Reilly, 2008.
18
4. A Julie Steele and Noah Iliinsky, Designing Data Visualizations: Representing Informational
Relationships, O’Relly
5. Andy Kirk, Data Visualization: A Successful Design Process, PAKT
6. Scott Murray, Interactive Data Visualization for Web, O’Relly
7. Nathan Yau, "Data Points: Visualization that means something", Wiley, 2013.
8. Tamara Munzner, Visualization Analysis and Design, AK Peters Visualization Series, CRC
Press, Nov. 201
List of Open Source Software/learning website:
 HTML5 (Canvas and SVG tags)

 D3.js (https://d3js.org/),
 Canvas.js
 Google AP
References used by the students:
https://chat.openai.com/
https://d3js.org/
Rubric wise marks obtained:
Completenes
Problem Logic
Knowledge s
Recognitio Building Ethics (2)
(2) and Tota
Rubrics n (2) (2)
accuracy (2) l
Goo Avg. Goo Avg. Goo Avg. Goo Avg. Good Avg.
d (2) (1) d (2) (1) d (2) (1) d (2) (1) (2) (1)
Marks
Experiment No - 2
Aim: Develop the following Program Using HTML5 CANVAS
 Develop the Different basic Graphical Shapes using HTM5 CANVAS

 Develop the Different Advanced Graphical Shapes using HTM5 CANVAS
 Develop the Different basic Graphical Shapes using HTM5 SVG
19
 Develop the Different Advanced Graphical Shapes using HTM5 SVG
Date:
Competency and Practical Skills: Understanding and Analyzing
Relevant CO: CO1

Objectives:
a) Understanding HTML5
b) Understanding CANVAS
c) Understanding SVG
Theory:
 Develop the Different basic Graphical Shapes using HTM5 CANVAS
The HTML5 canvas element is a powerful feature of modern web development that allows
developers to create dynamic, interactive graphics and animations using JavaScript. The
canvas element is essentially a container for graphics, which can be created and manipulated
using JavaScript code.
One of the key features of the HTML5 canvas is its flexibility. Developers can create a wide
range of graphics and animations using the canvas element, including 2D and 3D graphics,
charts, graphs, animations, and more. The canvas element provides a simple and intuitive
interface for creating these graphics, allowing developers to focus on the creative aspects of
their applications rather than the technical details of rendering graphics.
Another important feature of the HTML5 canvas is its interactivity. Because the canvas
element is rendered using JavaScript, developers can easily create interactive graphics that
respond to user input. For example, developers can create animations that respond to mouse
clicks or touch events, or create interactive charts and graphs that allow users to explore data
in more detail.
The HTML5 canvas also provides a range of advanced features that make it a powerful tool
for creating complex graphics and animations. These include features like gradients,
shadows, transparency, and more. Developers can also use libraries and frameworks like
Fabric.js and Three.js to simplify the process of creating more complex graphics and
animations.
20
Overall, the HTML5 canvas is a powerful tool for creating dynamic and interactive graphics
and animations on the web. Its flexibility, interactivity, and advanced features make it a
popular choice for developers working on a wide range of web projects, from simple data
visualizations to complex games and animations.
Procedure:
The HTML5 canvas element provides a range of built-in methods for creating various
graphical shapes, including rectangles, circles, arcs, lines, and more. Here are some examples
of how to create different shapes using the canvas element:
1. Rectangles:
// Creating a filled rectangle

context.fillRect(x, y, width, height);
// Creating a stroke rectangle

context.strokeRect(x, y, width, height);
2. Circles:
// Creating a filled circle

context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
// Creating a stroke circle

context.arc(x, y, radius, 0, 2 * Math.PI);
context.stroke();
3. Lines:
// Creating a straight line

context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
// Creating a curved line

context.quadraticCurveTo(cx, cy, x2, y2);
context.stroke();
4. Arcs:
21
// Creating a filled arc

context.arc(x, y, radius, startAngle, endAngle);
context.fill();
// Creating a stroke arc

context.arc(x, y, radius, startAngle, endAngle);
context.stroke();
These are just a few examples of the types of shapes that can be created using the HTML5
canvas element. By combining these shapes and applying different styles and transformations,
developers can create complex graphics and animations that are both visually appealing and
interactive.
 Develop the Different Advanced Graphical Shapes using HTM5 CANVAS
In addition to the basic graphical shapes, the HTML5 canvas element also provides methods
for creating advanced shapes, such as curves, polygons, and bezier curves. Here are some
examples of how to create advanced shapes using the canvas element:
1. Curves:
// Creating a quadratic curve
context.stroke();
// Creating a cubic curve

context.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
context.stroke();
2. Polygons:
// Creating a polygon
context.closePath();
context.stroke();
3. Bezier curves:
// Creating a quadratic bezier curve
22
context.stroke();
// Creating a cubic bezier curve

context.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
context.stroke();
These advanced shapes can be combined and styled to create more complex graphics and
animations. For example, bezier curves can be used to create smooth, flowing lines, while
polygons can be used to create irregular shapes. By experimenting with these advanced
shapes and techniques, developers can create dynamic and engaging graphics that take full
advantage of the HTML5 canvas element.
 Develop the Different basic Graphical Shapes using HTM5 SVG
HTML5 SVG (Scalable Vector Graphics) is a markup language used to create vector
graphics for the web. SVG graphics are created using XML-based markup and can be scaled
to any size without losing their quality or resolution. Unlike raster graphics (such as JPEGs
or PNGs), which are made up of pixels, SVG graphics are made up of mathematical
calculations and are therefore resolution-independent.
SVG graphics can be created and edited using a variety of tools, including text editors,
graphics software like Adobe Illustrator or Inkscape, or even code editors that have built-in
SVG support. Once created, SVG graphics can be embedded into HTML documents using
the <svg> tag, and can be styled and manipulated using CSS or JavaScript.
One of the key benefits of SVG graphics is their scalability. Because SVG graphics are
vector-based, they can be scaled to any size without losing their quality or resolution. This
makes them ideal for use in responsive web design, where graphics need to be able to adapt
to different screen sizes and resolutions.
Another benefit of SVG graphics is their flexibility. Because SVG graphics are created using
markup, they can be easily edited and customized using code or graphic design software.
Developers can also use CSS and JavaScript to add interactivity and animations to SVG
graphics, making them ideal for creating dynamic and engaging visual content on the web.
Overall, HTML5 SVG is a powerful tool for creating high-quality, scalable graphics for the
web. Its flexibility, scalability, and support for interactivity and animations make it a popular
choice for developers and designers working on a wide range of web projects, from simple
icons and logos to complex data visualizations and interactive infographics.
Procedure:
23
HTML5 SVG provides a wide range of built-in shapes that can be created using XML-based
markup. Here are some examples of how to create different shapes using SVG:
1. Rectangles:
<rect x="50" y="50" width="100" height="50" />
2. Circles:
<circle cx="100" cy="100" r="50" />
3. Lines:
<line x1="50" y1="50" x2="100" y2="100" />
4. Arcs:
<path d="M50,100 A50,50 0 1,0 150,100" />
5. Polygons:
<polygon points="50,50 100,50 75,100" />
These shapes can be styled and manipulated using CSS or JavaScript, just like any other
HTML element. For example, you can change the color of a rectangle using CSS:
<rect x="50" y="50" width="100" height="50" style="fill: blue;" />
By combining these shapes and applying different styles and transformations, developers can
create complex graphics and animations that are both visually appealing and interactive.
Additionally, SVG allows for the creation of more complex shapes, such as bezier curves,
splines, and irregular polygons, that are not possible with basic HTML5 canvas elements.
 Develop the Different Advanced Graphical Shapes using HTM5 SVG
HTML5 SVG provides a variety of advanced shapes and techniques for creating complex
graphics and animations. Here are some examples of how to create advanced shapes using
SVG:
1. Paths:
SVG paths are created using the <path> element, and are defined using a series of commands
and coordinates. These commands include "M" for "move to," "L" for "line to," "C" for
"cubic bezier curve," and others. Here's an example of a path that creates a heart shape:
<path d="M100,50 A20,20 0 0,1 150,100 L100,150 A20,20 0 0,1 50,100 Z" />
2. Gradients:
SVG gradients can be used to fill shapes with smoothly transitioning colors. There are two
types of gradients in SVG: linear and radial. Here's an example of a linear gradient that fills a
rectangle with a gradient that transitions from blue to green:
<defs>
<linearGradient id="gradient">
24
<stop offset="0%" stop-color="blue" />

<stop offset="100%" stop-color="green" />
</linearGradient>
</defs>
<rect x="50" y="50" width="100" height="50" fill="url(#gradient)" />

3. Masks:
SVG masks can be used to selectively hide or reveal parts of a shape based on a predefined
mask. Here's an example of a mask that reveals only the top half of a circle:
<defs>
<mask id="mask">
<rect x="0" y="0" width="100%" height="50%" fill="white" />
</mask>
</defs>
<circle cx="100" cy="100" r="50" mask="url(#mask)" />
4. Filters:
SVG filters can be used to modify the appearance of a shape, such as adding blur or changing
the color. Here's an example of a filter that adds a drop shadow to a rectangle:
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="2" />
</filter>
<rect x="50" y="50" width="100" height="50" filter="url(#shadow)" />
These advanced techniques can be combined and applied to a wide range of shapes and
graphics, allowing developers to create complex and engaging visual content using HTML5
SVG.
Observations:
25
1)
<!DOCTYPE html>
<html>
<head>
<title>Basic Shapes using HTML5 Canvas</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 300, 100, 100);
// Circle
ctx.beginPath();
ctx.arc(250, 100, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();
// Triangle
ctx.beginPath();
ctx.moveTo(200, 250);
ctx.lineTo(250, 350);
ctx.lineTo(150, 350);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
26
2)
<!DOCTYPE html>
<html>
<head>
<title>Advanced Shapes using HTML5 Canvas</title>
<style>
canvas {
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
// Heart shape
ctx.beginPath();
ctx.moveTo(200, 150);
ctx.bezierCurveTo(200, 100, 100, 100, 100, 150);
ctx.fillStyle = 'pink';
ctx.fill();
// Star shape
var points = 5;
var outerRadius = 100;
var innerRadius = 50;
var rot = Math.PI / 2 * 3;
var x = 200;
27
var y = 200;
var step = Math.PI / points;
ctx.beginPath();
ctx.moveTo(x, y - outerRadius);
for (i = 0; i < points; i++) {
x = Math.cos(rot) * outerRadius + 200;
y = Math.sin(rot) * outerRadius + 200;
ctx.lineTo(x, y);
rot += step;
x = Math.cos(rot) * innerRadius + 200;
y = Math.sin(rot) * innerRadius + 200;
ctx.lineTo(x, y);
rot += step;
}
ctx.lineTo(x, y - outerRadius);
ctx.fillStyle = 'orange';
ctx.fill();
</script>
</body>
</html>
3)
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
28
<rect x="50" y="50" width="200" height="200" style="fill:green;stroke:orange;stroke-

width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
</body>
</html>
4)
<!DOCTYPE html>
<html>
<head>
<title>Advanced Shapes using HTML5 SVG</title>
<style>
svg {
}
</style>
</head>
<body>
<svg width="400" height="400">
<path d="M50 50 L100 50 L75 100 L50 50" stroke="black" fill="none" />
<polyline points="150,150 200,150 200,200 250,200 250,250" stroke="purple"

fill="none" />
<path d="M250 250 A50 50 0 0 0 200 300" stroke="orange" fill="none" />

</svg>
</body>
</html>
29
Conclusion:
Development of basic and advanced graphical shapes using HTML5 Canvas, SVG completed
successfully
Quiz:
 What is HTML5 Canvas? Explain it.

 What is HTML5 SVG? Explain it.
 Differentiate HTML5 Canvas and HTML5 SVG.
O'Reilly, 2008.
Press, Nov. 201
https://www.javatpoint.com/svg-basic-shapes
https://www.w3schools.com/graphics/svg_rect.asp
30

Problem Completeness
Knowledge Logic
Recognition and accuracy Ethics (2)
(2) Building (2)
Rubrics (2) (2) Total
Good Avg. Good Avg. Good Avg. Good Avg. Good Avg.
(2) (1) (2) (1) (2) (1) (2) (1) (2) (1)
Marks
Experiment No - 3
Aim: Develop Following Program Using HTML5 and JavaScript
 Read the data .txt file and draw Data Table

 Read the data .csv file and draw Data Table
 Read the data XML file and draw Data Table
31
 Read JSON Data and draw Data Table
Date:
Competency and Practical Skills: Understanding, Analyzing, Applying
Relevant CO: CO3
Objectives:
a) Understanding HTML5
b) Applying HTML5 CANVAS
c) Applying JavaScript and JSON
Theory:
Read the data .txt file and draw Data Table
A ".txt" file is a simple text file that contains plain text. It is a computer file format that is used to
store unformatted text data. A ".txt" file can be opened and read by any text editor or word
processor program.
The theory behind a ".txt" file is straightforward. It is a file format that contains only text, and
there is no formatting or special instructions embedded within the file. This means that a ".txt"
file can be easily created, edited, and read by humans and computers alike.
The ".txt" file format is widely used for storing plain text data, such as notes, memos, and
instructions. It is also used for storing programming code, configuration files, and data files.
Many computer applications and programming languages use ".txt" files as a standard input or
output format.
Overall, the theory behind a ".txt" file is that it is a simple, universal file format for storing plain
text data that can be easily read and manipulated by humans and computers.
Here's an example of a simple ".txt" file:
This is a plain text file.

It contains no formatting or special instructions.
It can be easily opened and read by any text editor program.
Procedure:
In JavaScript, you can use the XMLHttpRequest object to read a text file. Here's an example
code snippet that demonstrates how to read a text file using the XMLHttpRequest object:
32
var xhr = new XMLHttpRequest();

xhr.open('GET', 'data.txt', true);
xhr.onload = function() {
if (this.status == 200) {
// handle the retrieved data here
console.log(this.responseText);
}
};
xhr.send();
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Data Table Example</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: auto;
}
th, td {
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
33
fetch('data.txt')
.then(response => response.text())
.then(text => {
const rows = text.trim().split('\n');
const headers = rows.shift().split(', ');
const table = document.getElementById('data-table');

const tbody = table.getElementsByTagName('tbody')[0];
rows.forEach(row => {
const cells = row.split(', ');
const tr = document.createElement('tr');
headers.forEach(header => {
const td = document.createElement('td');
td.textContent = cells[headers.indexOf(header)];
tr.appendChild(td);
});
tbody.appendChild(tr);
});
})
.catch(error => console.log('Error:', error));
</script>
</body>
</html>
Theory:
Read the data .csv file and draw Data Table
A ".csv" file is a type of file format used to store tabular data. The acronym "CSV" stands for
"Comma Separated Values," which describes the way that the data in the file is formatted.
The theory behind a ".csv" file is that it is a plain text file that consists of rows and columns of
data, where each column is separated by a comma. Each row represents a single record or entry,
and the first row often contains headers that describe the contents of each column.
34
The simplicity and flexibility of the ".csv" file format make it popular for storing and exchanging
data between different applications and systems. Many spreadsheet and database programs
support importing and exporting data in the ".csv" file format.
One important aspect of the ".csv" file format is that it does not support advanced formatting or
data types like formulas, images, or charts. It is designed to store only simple, structured data. As
a result, ".csv" files are lightweight and can be easily opened and edited in any text editor or
spreadsheet program.
Overall, the theory behind a ".csv" file is that it is a simple and efficient way to store and
exchange structured data in a format that can be easily read and manipulated by both humans and
computers.
Here's an example of a simple ".csv" file:
Name, Age, Gender

John, 30, Male
Sara, 25, Female
Tom, 40, Male
This file contains a table of data with three columns: Name, Age, and Gender. The first row
contains the column headers, and the subsequent rows contain the data for each record. Each
column is separated by a comma, and each row is on a new line.
This ".csv" file can be easily opened and edited in any spreadsheet program, such as Microsoft
Excel or Google Sheets. The data can be sorted, filtered, and analyzed using various functions
and tools available in the spreadsheet program.
Procedure:
Here's an example program that demonstrates how to read a CSV file using JavaScript:
// create a new XMLHttpRequest object

// specify the URL of the CSV file to retrieve

xhr.open('GET', 'data.csv', true);
// define an onload event handler function to handle the retrieved data

// retrieve the CSV data and do something with it
var csvData = this.responseText;
console.log(csvData);
}
};
35
// send the request to the server

xhr.send();
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Data Table Example</title>
<style>
table {
width: 50%;
margin: auto;
}
th, td {
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
fetch('data.csv')
.then(response => response.text())
.then(text => {
const rows = text.trim().split('\n');
const headers = rows.shift().split(', ');
36
const table = document.getElementById('data-table');

const tbody = table.getElementsByTagName('tbody')[0];
rows.forEach(row => {
const cells = row.split(', ');
const tr = document.createElement('tr');
headers.forEach(header => {
const td = document.createElement('td');
td.textContent = cells[headers.indexOf(header)];
tr.appendChild(td);
});
tbody.appendChild(tr);
});
})
.catch(error => console.log('Error:', error));
</script>
</body>
</html>
Theory:
Read the data XML file and draw Data Table
XML stands for "eXtensible Markup Language". An XML file is a file format that uses tags and
attributes to define and describe data elements.
The theory behind XML is that it provides a standard way to represent and exchange structured
data across different platforms and programming languages. XML is designed to be both human-
readable and machine-readable, making it a versatile format for exchanging information between
applications and systems.
In an XML file, data is defined using tags and attributes. Tags are used to define the structure of
the data, while attributes provide additional information about the data elements. XML files can
be hierarchical, with elements nested within other elements to create a tree-like structure.
37
XML is often used to represent data in web applications, where it is used to exchange data
between servers and clients. It is also used in data integration and data exchange between
different applications and systems.
One of the key benefits of XML is its extensibility. XML can be extended and customized to fit
the specific needs of a particular application or domain. This is achieved through the use of XML
schemas, which define the structure and constraints of the data.
Overall, the theory behind XML is that it is a flexible, extensible, and standardized way to
represent and exchange structured data. Its versatility and broad adoption have made it a widely-
used format for exchanging data in a variety of applications and industries.
Here's an example of a simple XML file:
<?xml version="1.0" encoding="UTF-8"?>

<bookstore>
<book category="Science Fiction">
<title>The Hitchhiker's Guide to the Galaxy</title>
<author>Douglas Adams</author>
<year>1979</year>
</book>
<book category="Fantasy">
<title>The Lord of the Rings</title>
<author>J.R.R. Tolkien</author>
<year>1954</year>
</book>
<book category="Mystery">
<title>The Da Vinci Code</title>
<author>Dan Brown</author>
<year>2003</year>
</book>
</bookstore>
This XML file contains a list of books in a virtual bookstore. Each book is represented by a
"book" element, which contains child elements for the book's title, author, and year of
publication. The "category" attribute is used to classify the books into different genres.
The first line of the file is the XML declaration, which specifies the version of XML used in the
file and the character encoding used. The remainder of the file is a hierarchical structure of
nested elements and attributes, which define the data elements and their relationships.
38
This XML file can be easily parsed and processed by a wide range of programming languages
and applications that support XML. The tags and attributes provide a standardized way to
represent the data, making it easy to exchange and integrate with other applications and systems.
Procedure:
Here's an example program that demonstrates how to read an XML file using JavaScript:
// create a new XMLHttpRequest object

// specify the URL of the XML file to retrieve

xhr.open('GET', 'data.xml', true);
// define an onload event handler function to handle the retrieved data

// retrieve the XML data and do something with it
var xmlData = this.responseXML;
console.log(xmlData);
}
};
// send the request to the server

xhr.send();
Observations:
<!DOCTYPE html>
<html lang="en-IN" dir="ltr">
<head>
<title>Read XML File to Data Table</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.csv.js"></script>
</head>
<body>
<h1>Get data from XML file</h1>
<table id="mytable">
<tr>
39
<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>
40
Theory:
Read JSON Data and draw Data Table
JSON stands for "JavaScript Object Notation". A JSON file is a file format that uses a
lightweight, text-based format to represent data objects in a human-readable and machine-
readable way.
The theory behind JSON is that it provides a simple and standardized way to exchange data
between different applications and systems, particularly in web-based applications. JSON is
designed to be easy to read and write by both humans and machines, making it a popular choice
for web APIs and data exchange between client-side and server-side applications.
In a JSON file, data is represented as a collection of key-value pairs, where the keys are strings
and the values can be strings, numbers, booleans, arrays, or other JSON objects. JSON objects
can be nested, allowing for the creation of complex data structures.
JSON has a simple and intuitive syntax that is based on JavaScript syntax, making it easy for
developers to learn and work with. JSON files are also lightweight and can be easily transmitted
over the network.
JSON is often used in web development for exchanging data between the client-side and server-
side, particularly in web APIs. It is also used in data integration and exchange between different
applications and systems.
Overall, the theory behind JSON is that it provides a simple, lightweight, and standardized way
to exchange data between different applications and systems in a human-readable and machine-
readable format. Its simplicity and flexibility have made it a popular choice for web development
and data exchange in a variety of industries.
Here's an example of a simple JSON file:

{
"bookstore": {
"books": [
{
"category": "Science Fiction",
"title": "The Hitchhiker's Guide to the Galaxy",
"author": "Douglas Adams",
"year": 1979
41
},
{
"category": "Fantasy",
"title": "The Lord of the Rings",
"author": "J.R.R. Tolkien",
"year": 1954
},
{
"category": "Mystery",
"title": "The Da Vinci Code",
"author": "Dan Brown",
"year": 2003
}
]
}
}
This JSON file contains the same list of books as the XML file example provided earlier. The
data is represented as a collection of key-value pairs, with the keys being strings and the values
being strings, numbers, booleans, arrays, or other JSON objects.
The top-level object in this JSON file is a "bookstore" object, which contains an array of "books"
objects. Each "books" object represents a single book, with properties for the book's title, author,
year of publication, and category.
JSON files are commonly used in web development for exchanging data between client-side and
server-side applications, particularly in web APIs. The simple and flexible syntax of JSON
makes it a popular choice for representing and transmitting data over the network.
Procedure:
In JQuery, you can use the $.getJSON() method to read a JSON file. The $.getJSON() method is
a shorthand method for making an AJAX request to the server to retrieve a JSON file.
Here's an example code snippet that demonstrates how to read a JSON file using $.getJSON()
method:
$.getJSON('data.json', function(data) {
// handle the retrieved data here
console.log(data);
});
42
In this example, the $.getJSON() method takes two parameters: the first parameter is the URL of
the JSON file to retrieve, and the second parameter is a callback function that will be executed
once the JSON data is retrieved from the server.
The callback function takes one parameter, which is the retrieved JSON data. In this example, we
simply log the retrieved data to the console using console.log(data), but you can perform any
necessary processing or manipulation of the data inside the callback function.
Overall, the $.getJSON() method is a simple and convenient way to read JSON files in JQuery.
Observations:
<!DOCTYPE html>
<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.csv.js"></script>
<style>
#mytable {
font-family: Arial, Helvetica, sans-serif;
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;
43
background-color: cornflowerblue;
color: white;
}
</style>
</head>
<body>
<h1>Get data from JSON file</h1>
<table id="mytable">
</table>
</body>
<script>
var content = "";
$.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>";
}
44
</script>
</html>
Conclusion:
Developed HTML 5 program to read different files i.e text, .csv, JSON, XML successfully
Quiz:
 What is text file?

 What is csv file?
 What is JSON file
 What is XML file?
 Differentiate JSON and XML file.
O'Reilly, 2008.
Press, Nov. 2011
45
https://www.geeksforgeeks.org/read-xml-file-and-print-the-details-as-tabular-data-by-
using-javascript/
https://www.w3schools.com/xml/ajax_applications.asp
http://www.aspdotnet-pools.com/2015/08/how-to-read-xml-file-in-datatable-using.html
Knowledge Logic
(2) Building (2)
(2) (1) (2) (1) (2) (1) (2) (1) (2) (1)
Marks
Experiment No - 4
Aim: Develop Following Program Using HTML5 and JavaScript
46
 Develop the simple bar chart using HTML5 CANVAS

 Read the data .txt file and draw Simple Bar Chart
 Read the data .csv file and draw Column Bar Chart
 Read the data XML file and draw Simple Chart
 Read JSON Data and draw Simple Chart
Date:
Relevant CO: CO3
Objectives:
a) Understanding Bar Chart, Column Chart
c) Applying JavaScript and JSON
Theory:
Develop the simple bar chart using HTML5 CANVAS
A bar chart is a graphical representation of data using rectangular bars. The length or height of
each bar corresponds to the quantity or value being represented. The bars are usually arranged
horizontally or vertically, and the axis perpendicular to the bars is labeled with the categories or
attributes being measured.
Bar charts are useful for displaying and comparing values across categories or attributes. They
are commonly used in data analysis, statistics, and business to visually represent data and
identify trends or patterns.
There are several types of bar charts, including:
1. Vertical Bar Chart: In a vertical bar chart, the bars are arranged vertically and the axis
perpendicular to the bars is labeled with the categories or attributes being measured.
2. Horizontal Bar Chart: In a horizontal bar chart, the bars are arranged horizontally and the
axis perpendicular to the bars is labeled with the values being measured.
3. Stacked Bar Chart: In a stacked bar chart, multiple bars are stacked on top of each other
to represent the total value of each category or attribute. The length or height of each bar
represents the total value, and the different colors or shades of the bar represent the
proportion of the total value contributed by each category or attribute.
4. Grouped Bar Chart: In a grouped bar chart, multiple bars are arranged side by side to
represent the values of different categories or attributes. The length or height of each bar
47
represents the value, and the different colors or shades of the bar represent the different
categories or attributes.
Bar charts can be easily created using various software tools, including Microsoft Excel, Google
Sheets, and other data visualization libraries such as D3.js and Chart.js. When designing a bar
chart, it is important to choose appropriate labels, colors, and scales to ensure that the data is
accurately represented and easily understood by the intended audience.
Procedure:
we can use the HTML5 canvas element and JavaScript. Here's an example code:
<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
// Get the canvas element and its context
var canvas = document.getElementById('myCanvas');
ctx.fillRect(x, y, barWidth, barHeight);
}
</script>
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Simple Bar Chart using HTML5 Canvas</title>
<style>
canvas {
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas> <script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var data = [35,25,34,51,20];

var barWidth = 50;
var barSpacing = 20;
var maxBarHeight = canvas.height - 50;
var x = (canvas.width - ((barWidth + barSpacing) * data.length)) / 2;
48
for (var i = 0; i < data.length; i++) {

var barHeight = (data[i] / 100) * maxBarHeight;
var y = canvas.height - barHeight - 25;
ctx.fillStyle = "#0099ff";
ctx.fillStyle = "#000000";
ctx.fillText(data[i], x + (barWidth / 2) - 10, y - 10);
x += barWidth + barSpacing;
}
</script>
</body>
</html>
Theory
Read the data .csv file and draw Column Bar Chart
Column bar chart is a type of chart used to represent data in a graphical form. It is a vertical bar
chart where the length of each column represents the value of the data being plotted. The height
of the column is proportional to the value of the data being plotted, and the columns are drawn
adjacent to each other.
Column bar charts are useful for comparing the relative sizes of different data sets, or for
showing changes in a single data set over time. They are commonly used in business and finance,
science, and other fields to present data in a clear and easy-to-understand way.
Column bar charts can be created using a variety of software tools, including Excel, Google
Sheets, and various programming languages such as JavaScript and Python. They can be
49
customized with various colors, labels, and other design elements to make them more visually
appealing and informative.
In addition to the basic column bar chart, there are also variations such as the stacked column
chart and the 100% stacked column chart. The stacked column chart shows the total value of
each column as a stack of smaller values, while the 100% stacked column chart shows the
relative proportions of the values in each column as a percentage of the total.
Overall, column bar charts are a powerful tool for visualizing data and are widely used in many
fields for data analysis and presentation.
To read the data from a .csv file and draw a column bar chart using HTML5, we can use
JavaScript to fetch the data from the file and then use a library like Chart.js to create the chart.
Here's an example code:
Read the data XML file and draw Simple Chart
To read the data from a CSV file using jQuery and draw a column bar chart using HTML5, we
can use the following code:
$. get("data.csv", function(data) {
// Parse the CSV data using D3.js
var rows = d3.csvParse(data);
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Column Bar Chart using HTML5 Canvas</title>
<style>
canvas {
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Load data from CSV file

var data = [];
var request = new XMLHttpRequest();
request.open("GET", "data.csv", true);
request.onload = function() {
50
if (request.status == 200) {
var lines = request.responseText.split("\n");
for (var i = 0; i < lines.length; i++) {
var values = lines[i].split(",");
data.push({label: values[0], value: parseInt(values[1])});
}
drawChart();
}
};
request.send();
// Draw the chart

var barWidth = 50;
var barSpacing = 20;
var maxBarHeight = canvas.height - 50;
var x = (canvas.width - ((barWidth + barSpacing) * data.length)) / 2;
for (var i = 0; i < data.length; i++) {

var barHeight = (data[i].value / 100) * maxBarHeight;
var y = canvas.height - barHeight - 25;
ctx.fillStyle = "#0099ff";
ctx.fillStyle = "#000000";
ctx.fillText(data[i].label, x + (barWidth / 2) - 10, canvas.height - 5);
x += barWidth + barSpacing;
}
}
</script>
</body>
</html>
Xml file :
51

<head>
<title>Read XML File to Draw Simple Bar Chart</title>
</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);
52
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;
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
);
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);
53
this.ctx.restore();
gridValue += this.options.gridScale;
}
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++;
}
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();
barIndex = 0;
54
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;
$.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));
55
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", "#30BCED", "#D9BA41", "#7D001A"]
});
myBarchart.draw();
}
</script>
</html>
Theory
Read JSON Data and draw Simple Chart
To read the data from a JSON file using jQuery and draw a column bar chart using HTML5, we
can use the following code:
$.getJSON("data.json", function(data) {
To use D3.js in your web page, add a link to the library:
56
<script src="//d3js.org/d3.v3.min.js"></script>
This script selects the body element and appends a paragraph with the text "Hello World!":
d3.select("body").append("p").text("Hello World!");
Observations:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bar Chart with D3 and jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<svg id="chart"></svg>
<script>
$(document).ready(function() {
// $.ajax({
// type: "GET",
// url: "data.json",
// dataType: "json",
// success: function(data) {
// drawChart(data);
// }
// });
data = [ { "Category": "A", "Value": 10 }, { "Category": "B", "Value": 20 },
{ "Category": "C", "Value": 30 }, { "Category": "D", "Value": 40 }];
drawChart(data);
});
function drawChart(data) {
var margin = { top: 20, right: 20, bottom: 30, left: 40 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var svg = d3.select("#chart")

.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
57
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
x.domain(data.map(function(d) { return d.Category; }));

y.domain([0, d3.max(data, function(d) { return d.Value; })]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Category); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d.Value); })
.attr("height", function(d) { return height - y(d.Value); });
}
</script>
</body>
</html>
Conclusion:
58
 Developed Bar chart, column chart from different files i.e text, .csv, JSON, XML using
JavaScript, JQuery and D3.js successfully.
Quiz:
 What is Bar Chart?

 What is Column Chart?
O'Reilly, 2008.
Press, Nov. 201
https://css-tricks.com/how-to-make-charts-with-svg/
https://www.tutorialspoint.com/d3js/d3js_drawing_charts.html
Knowledge Logic
(2) Building (2)
(2) (1) (2) (1) (2) (1) (2) (1) (2) (1)
Marks
59
Experiment No - 5
Aim: Develop Following Program Using HTML5 and D3.js and Canvas.js
 Showing the data as a column chart (simple)

 Showing the data as a stacked column chart
 Showing the Data as a column chart for four age group
Date:
Relevant CO: CO2
Objectives:
a) Understanding Bar Chart, Column Chart

60
c) Applying D3.js and Canvas.js
Theory:
Showing the data as a column chart (simple)
Column bar chart is a type of chart used to represent data in a graphical form. It is a vertical bar
chart where the length of each column represents the value of the data being plotted. The height
of the column is proportional to the value of the data being plotted, and the columns are drawn
adjacent to each other.
Column bar charts are useful for comparing the relative sizes of different data sets, or for
showing changes in a single data set over time. They are commonly used in business and finance,
science, and other fields to present data in a clear and easy-to-understand way.
Column bar charts can be created using a variety of software tools, including Excel, Google
Sheets, and various programming languages such as JavaScript and Python. They can be
customized with various colors, labels, and other design elements to make them more visually
appealing and informative.
In addition to the basic column bar chart, there are also variations such as the stacked column
chart and the 100% stacked column chart. The stacked column chart shows the total value of
each column as a stack of smaller values, while the 100% stacked column chart shows the
relative proportions of the values in each column as a percentage of the total.
Overall, column bar charts are a powerful tool for visualizing data and are widely used in many
fields for data analysis and presentation.
To read the data from a .csv file and draw a column bar chart using HTML5, we can use
JavaScript to fetch the data from the file and then use a library like Chart.js to create the chart.
Here's an example code:
Procedure:
Here's an example syntax to display data as a bar chart, scatter chart, line chart:
var myChart = new Chart("myChart", {

type: "bar",
data: {},
options: {}
});

type: "scatter",
data: {},
options: {}
});
61

type: "line",
data: {},
options: {}
});
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Column Chart</title>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<script>
// Define the data
const data = [
{ label: 'Data 1', value: 10 },
{ label: 'Data 5', value: 50 }
];
// Create the chart using D3.js and Canvas.js

const chart = new CanvasJS.Chart('chartContainer', {
animationEnabled: true,
title: {
text: 'Column Chart'
},
axisX: {
labelAngle: -45
},
axisY: {
title: 'Value'
},
data: [{
type: 'column',
dataPoints: data.map(d => ({ label: d.label, y: d.value }))
}]
});
chart.render();
62
</script>
</body>
</html>
Theory
Showing the data as a stacked column chart and Data as a column chart for four age group
A stacked column chart is a type of chart that is used to display multiple data series as stacked
columns, where each column represents a category or a data point. In a stacked column chart,
each column is subdivided into segments that represent the different data series. The height of
each segment within a column represents the value of the data series for that category or data
point.
The purpose of a stacked column chart is to show the composition of a total value and how each
data series contributes to that total. The chart allows viewers to compare the relative sizes of
each segment and to see how each data series contributes to the total.
Stacked column charts are useful for displaying data with a large number of categories or data
points, as they allow viewers to see the relative proportions of each data series across all
categories or data points. They are commonly used in business, finance, and marketing to display
data such as sales figures, revenue, and market share.
One important consideration when using stacked column charts is that they can be difficult to
read accurately if the data series have significantly different scales or if the total value is very
small or very large. In these cases, it may be better to use a different type of chart, such as a
clustered column chart or a stacked bar chart.
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Stacked Column Chart</title>
63
</head>
<body>
<script>
// Define the data
const data = [
{ label: 'Data 1', value1: 10, value2: 20, value3: 30 },
{ label: 'Data 5', value1: 50, value2: 60, value3: 70 }
];

title: {
text: 'Stacked Column Chart'
},
axisX: {
labelAngle: -45
},
axisY: {
title: 'Value'
},
data: [
{
type: 'stackedColumn',
name: 'Value 1',
dataPoints: data.map(d => ({ label: d.label, y: d.value1 }))
},
{
name: 'Value 2',
},
{
name: 'Value 3',
}
]
});
64
chart.render();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Column Chart for Four Age Groups</title>
</head>
<body>
<script>
// Define the data
const data = [
{ label: '18-25', value: 10 },
{ label: '26-35', value: 20 },
{ label: '36-45', value: 30 },
{ label: '46-55', value: 40 }
];

title: {
text: 'Column Chart for Four Age Groups'
},
axisX: {
labelAngle: -45
},
axisY: {
title: 'Value'
},
data: [{
65
type: 'column',
dataPoints: data.map(d => ({ label: d.label, y: d.value }))
}]
});
chart.render();
</script>
</body>
</html>
Conclusion:
Developed data as a column chart (simple), stacked column chart, column chart for four age
group successfully using HTML5, Canvas.js, and D3.js.
Quiz:
 What is column chart?

 What is stacked column chart?
O'Reilly, 2008.
Press, Nov. 201
66
https://canvasjs.com/javascript-charts/
https://d3js.org/
https://canvasjs.com/html5-javascript-column-chart/
Knowledge Logic
(2) Building (2)
(2) (1) (2) (1) (2) (1) (2) (1) (2) (1)
Marks
Experiment No - 6
Aim:
 Showing the data as a Line Chart (single, fewer and multiple lines)
 Showing the data as a Pie Chart (single and multiple pie)
 Showing the data as a Bar Chart (Simple and multiple)
Date:
Relevant CO: CO2
Objectives:
a) Understanding Line Chart, Pie Chart, and Bar Chart
b) Analyzing HTML5 Canvas Chart.js library
c) Applying HTML5 Chart.js library to build Line Chart, Pie Chart, and Bar Chart
67
Theory:
Showing the data as a Line chart (single, fewer and multiple lines)
A line chart is a type of chart that displays data points as a series of connected lines, usually on a
two-dimensional coordinate system. The x-axis typically represents time or another continuous
variable, while the y-axis represents a numeric value or quantity.
Line charts are commonly used to track trends over time, such as changes in stock prices,
temperature, or sales figures. They can also be used to compare multiple data sets or to highlight
the relationship between two variables.
The basic elements of a line chart include:

1. Axis: The x-axis and y-axis, which provide a frame of reference for the data.
2. Data points: The individual data points plotted on the chart, which represent values at
specific points in time or other intervals.
3. Line: The line connecting the data points, which provides a visual representation of the
trend or pattern in the data.
4. Legend: The legend, which explains what the line represents.
Line charts are a powerful tool for visualizing trends in data, but they have limitations. For
example, they may not be well-suited for displaying data with multiple peaks or for comparing
data sets with different scales. Additionally, they may not be effective for displaying data that is
highly variable or has significant outliers. In such cases, other types of charts, such as
scatterplots or boxplots, may be more appropriate.
Single line chart:

A single line chart displays a single data series with a continuous line connecting the data points.
This type of chart is useful for displaying trends over time or for highlighting changes in a single
variable. For example, a single line chart might be used to show the change in a company's stock
price over time or to track the growth of a company's revenue.
Fewer lines chart:
A fewer lines chart displays two or more data series on the same chart, each with a different line
color or style. This type of chart is useful for comparing trends or relationships between different
variables. For example, a fewer lines chart might be used to compare the sales growth of
different products or to compare the performance of different companies in the same industry.
Multiple lines chart:

A multiple lines chart displays multiple data series on the same chart, each with a different line
color or style. This type of chart is useful for comparing trends or relationships between multiple
variables. For example, a multiple lines chart might be used to compare the sales growth of
multiple products over time or to compare the performance of multiple companies in the same
industry.
68
It is important to choose the appropriate chart type based on the data being presented and the
intended audience. While single line charts are useful for tracking trends in a single variable,
fewer and multiple lines charts are more appropriate for comparing data across multiple
variables. By carefully choosing the appropriate chart type, it is possible to effectively
communicate complex data and insights to a wide range of stakeholders.
Regen
Procedure:
Here's an example syntax to display data as a bar chart, scatter chart, line chart:

type: "line",
data: {},
options: {}
});
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Line Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<label for="chartType">Select chart type:</label>
<select id="chartType">
<option value="single">Single Line</option>
<option value="fewer">Fewer Lines</option>
<option value="multiple">Multiple Lines</option>
</select>
</div>
<canvas id="myChart"></canvas>
<script>
// Define the data
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Line 1',
data: [65, 59, 80, 81, 56, 55, 40],
69
fill: false,
borderColor: 'red',
borderWidth: 2
}
]
};
// Create the chart using Chart.js

const chartTypeSelect = document.getElementById('chartType');
const myChart = new Chart(document.getElementById('myChart'), {
type: 'line',
data: data
});
// Update the chart when the chart type is changed

chartTypeSelect.addEventListener('change', function() {
const chartType = chartTypeSelect.value;
if (chartType === 'single') {
myChart.data.datasets = [
{
label: 'Line 1',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'red',
borderWidth: 2
}
];
} else if (chartType === 'fewer') {
{
label: 'Line 1',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'red',
borderWidth: 2
},
{
label: 'Line 2',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: 'blue',
70
borderWidth: 2
}
];
} else if (chartType === 'multiple') {
{
label: 'Line 1',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'red',
borderWidth: 2
},
{
label: 'Line 2',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: 'blue',
borderWidth: 2
},
{
label: 'Line 3',
data: [12, 87, 3, 23, 45, 67, 34],
fill: false,
borderColor: 'green',
borderWidth: 2
}
];
}
myChart.update();
});
</script>
</body>
</html>
71
72
Theory
Showing the data as a Pie Chart (single and multiple pie)
A pie chart is a circular graph that is divided into sectors, or slices, to represent data as
proportions of a whole. Each sector represents a percentage or proportion of the total data set,
and the entire circle represents 100% of the data.
Pie charts are commonly used to display data with a limited number of categories, usually
between three and seven, and are especially useful for illustrating the relative size of different
categories. The larger the sector, the larger the proportion of the data that it represents.
The key components of a pie chart include:

1. Title: A brief description of what the pie chart represents.
2. Legend: A key that identifies what each sector represents.
3. Sectors: The segments of the pie that represent each category of data.
4. Labels: Numeric values or percentages that label each sector.
Pie charts can be customized by adjusting the colors and sizes of the sectors, adding labels or
annotations, and adjusting the starting angle of the chart.
While pie charts are useful for illustrating the relative size of different categories, they do have
limitations. For example, they may not be well-suited for displaying data with many categories,
as the segments may become too small to distinguish. Additionally, they may not effectively
communicate changes in the data over time or highlight the relationships between different
variables. In such cases, other types of charts, such as bar charts or line charts, may be more
appropriate.
Multiple pie charts, also known as small multiples or trellis charts, are a type of data
visualization that uses multiple small pie charts to compare and contrast different data sets. Each
73
pie chart is a representation of a different data set, and the charts are arranged in a grid or matrix
format for easy comparison.
Multiple pie charts are useful when you want to compare data sets that have different sizes or
proportions. By displaying the data in multiple pie charts, you can see the relationships and
patterns between the data sets more easily than you would be able to with a single large pie chart.
Procedure:
Here is an example code to draw a single Pie Chart:
new Chart("myChart", {
type: "pie",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
Here is an example code to draw a Multiple Pie Chart:
new Chart("myChart", {
type: "doughnut",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Pie Chart</title>
</head>
<body>
<div>
<label for="chartType">Select chart type:</label>
74
<select id="chartType">
<option value="single">Single Pie</option>
<option value="multiple">Multiple Pies</option>
</select>
</div>
<div style="width: 40%; height: 300px;">
<canvas id="myChart" ></canvas>
</div>
<script>
// Define the data
const data = {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [
{
data: [30, 50, 10],
backgroundColor: ['red', 'blue', 'yellow'],
}
]
};
// Create the chart using Chart.js

const chartTypeSelect = document.getElementById('chartType');
const myChart = new Chart(document.getElementById('myChart'), {
type: 'pie',
data: data
});
// Update the chart when the chart type is changed

chartTypeSelect.addEventListener('change', function() {
const chartType = chartTypeSelect.value;
if (chartType === 'single') {
{
data: [30, 50, 10],
}
];
} else if (chartType === 'multiple') {
{
data: [30, 50, 10],
},
{
75
data: [50, 10, 15],

backgroundColor: ['green', 'orange', 'purple'],
}
];
}
myChart.update();
});
</script>
</body>
</html>
Theory
Showing the data as a Bar Chart (Simple and multiple)
76
A bar chart, also known as a bar graph, is a type of data visualization that uses rectangular bars
to represent data. The length or height of each bar corresponds to the value or frequency of a
category, and the bars are usually arranged along a horizontal or vertical axis.
Bar charts are commonly used to compare different categories of data or to track changes in data
over time. They can be used to display both discrete data, which are separate and distinct values,
and continuous data, which are measured on a continuous scale.
The key components of a bar chart include:

1. Title: A brief description of what the bar chart represents.
2. Axis labels: The labels that indicate what data is being measured on each axis.
3. Bars: The rectangular bars that represent the values or frequencies of different categories.
4. Values or frequencies: The numerical values or frequencies that are being represented by
the bars.
Bar charts can be customized by adjusting the colors and sizes of the bars, adding labels or
annotations, and adjusting the scale and range of the axis.
There are several types of bar charts, including:

1. Vertical bar chart: Bars are arranged along the vertical axis, and the height of each bar
represents the value or frequency of a category.
2. Horizontal bar chart: Bars are arranged along the horizontal axis, and the length of each
bar represents the value or frequency of a category.
3. Stacked bar chart: Bars are stacked on top of each other to show the total value or
frequency of multiple categories.
4. Grouped bar chart: Bars are grouped together to compare the values or frequencies of
different categories across multiple groups.
Bar charts can be created using various software tools, such as Microsoft Excel, Google Sheets,
and Tableau. These tools offer a range of customization options, such as selecting different
colors and styles for the bars, adjusting the axis labels, and adding titles and annotations.
A multiple bar chart, also known as a grouped bar chart, is a type of data visualization that uses
rectangular bars to represent multiple data sets. Each data set is represented by a group of bars,
and the bars are usually arranged along a horizontal or vertical axis.
Multiple bar charts are commonly used to compare different categories of data across multiple
data sets. They can be used to display both discrete data, which are separate and distinct values,
and continuous data, which are measured on a continuous scale.
The key components of a multiple bar chart include:
77
1. Title: A brief description of what the chart represents.

2. Axis labels: The labels that indicate what data is being measured on each axis.
3. Bars: The rectangular bars that represent the values or frequencies of different categories.
4. Values or frequencies: The numerical values or frequencies that are being represented by
the bars.
Multiple bar charts can be customized by adjusting the colors and sizes of the bars, adding labels
or annotations, and adjusting the scale and range of the axis.
There are several types of multiple bar charts, including:

1. Vertical multiple bar chart: Groups of bars are arranged along the vertical axis, and the
height of each bar represents the value or frequency of a category within each group.
2. Horizontal multiple bar chart: Groups of bars are arranged along the horizontal axis, and
the length of each bar represents the value or frequency of a category within each group.
3. Stacked multiple bar chart: Bars are stacked on top of each other to show the total value
or frequency of each category across all groups.
4. Clustered multiple bar chart: Bars within each group are clustered together to compare
the values or frequencies of different categories across all groups.
Multiple bar charts can be created using various software tools, such as Microsoft Excel, Google
Sheets, and Tableau. These tools offer a range of customization options, such as selecting
different colors and styles for the bars, adjusting the axis labels, and adding titles and
annotations.
Procedure:
Here's an example syntax to display data as a bar chart

type: "bar",
data: {},
options: {}
});
Observations:
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart Example</title>
</head>
<body>
78
<canvas id="myChart"></canvas>
<script>
const data = {
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3, 10],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
},
};
const myChart = new Chart(

document.getElementById('myChart'),
config
);
const data2 = {
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3, 10],
borderWidth: 1
}, {
label: 'Expenses',
data: [5, 10, 7, 8, 15, 12, 6],
borderWidth: 1
79
}]
};
const config2 = {
type: 'bar',
data: data2,
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
},
};
const myChart2 = new Chart(

document.getElementById('myChart'),
config2
);
</script>
</body>
</html>
Conclusion:
Developed Line chart, Pie chart and Bar chart successfully.
Quiz:
80
 What is Line chart?

 What is Pie chart?
 What is Bar chart?
O'Reilly, 2008.
Press, Nov. 201
https://www.chartjs.org/
https://www.chartjs.org/docs/latest/charts/bar.html
https://www.chartjs.org/docs/latest/charts/doughnut.html
Knowledge Logic
(2) Building (2)
(2) (1) (2) (1) (2) (1) (2) (1) (2) (1)
Marks
81
Experiment No - 7
Aim: Develop Following Program Using HTML5 and Google Charts API and Map API
 Using Google Charts API Basics draw charts like a Bar chart
 Using Google Charts API Basics draw charts like a Line chart
 Using Google Charts API Basics draw Pie chart.
Date:
Relevant CO: CO3
Objectives:
a) Understanding Google Charts API and Map API
b) Analyzing HTML5, Google Charts API and Map API
c) Applying HTML5, Google Charts API and Map API to build Line Chart, Pie Chart, and
Bar Chart
82
Theory:
 Using Google Charts API Basics draw charts like a Bar chart, Line Chart and Pie Chart
Google Chart API is a free, web-based charting service provided by Google. It allows developers
to create a wide variety of charts, including line charts, bar charts, pie charts, and more, with just
a few lines of code. The charts are interactive, customizable, and can be easily embedded into
web pages and applications.
The Google Chart API uses a simple URL-based interface to generate chart images. Developers
can specify the chart type, data, and various configuration options in the URL, and the API will
generate an image of the chart that can be embedded into a web page. The image is generated on
the server-side, which means that the chart can be easily embedded into any web page, regardless
of the client-side technology being used.
The Google Chart API supports a wide variety of chart types and customization options,
including colors, fonts, labels, and more. Developers can also use the API to add interactivity to
their charts, such as tooltips and clickable data points. In addition, the API supports a variety of
data formats, including CSV, JSON, and XML, making it easy to use with a wide range of data
sources.
One of the benefits of using Google Chart API is that it is completely free and does not require
any installation or setup. The API is hosted by Google, which means that developers do not need
to worry about maintaining servers or infrastructure. However, it's important to note that the API
is now deprecated and will be shut down on June 17, 2022. Google recommends using
alternative visualization libraries such as D3.js or Highcharts.
Procedure:
To use Google API to draw a Bar Chart, Line Chart and Pie Chart you can follow these steps:
1. Create a Google account, if you don't already have one.

2. Go to the Google Developers Console and create a new project.
3. Enable the Google Charts API for your project by going to the Library tab and
searching for "Google Charts API". Click on it and enable it for your project.
4. Generate an API key for your project by going to the Credentials tab and clicking on
"Create credentials". Choose "API key" from the dropdown menu.
5. Once you have your API key, you can start coding your Bar Chart.
6. Replace the API key in the src attribute of the <script> tag with your own API key.
7. Customize the code to fit your data and preferences.
8. Save the code as an HTML file and open it in a web browser to see the Bar Chart.
Observations:
1)
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart using Google Charts API</title>
83
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Bar Chart'
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('myChart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="myChart" style="width: 900px; height: 500px;"></div>
</body>
</html>
84
2)
<!DOCTYPE html>
<html>
<head>
<title>Line Chart using Google Charts API</title>
google.charts.load('current', {'packages':['corechart']});
['Year', 'Sales', 'Expenses'],
['2014', 1000, 400],
['2015', 1170, 460],
['2016', 660, 1120],
['2017', 1030, 540]
]);
var options = {
title: 'Line Chart',
};
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
}
85
</script>
</head>
<body>
<div id="myChart" style="width: 900px; height: 500px;"></div>
</body>
</html>
3)
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
86
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options

var options = {
'title':'Pie Chart',
'width':550,
'height':400
};
// Instantiate and draw the chart.

var chart = new google.visualization.PieChart(document.getElementById('container'));
}
</script>
</body>
</html>
Conclusion:
Developed Line chart, Pie chart and Bar chart successfully using Google Map and Chart APIs.
Quiz:
 What is Google Map API?

 What is Google Chart API?
87
O'Reilly, 2008.
Press, Nov. 201

https://www.tutorialspoint.com/googlecharts/googlecharts_pie_basic.htm
https://developers.google.com/chart/interactive/docs/gallery/piechart
https://chat.openai.com/

Knowledge Logic
(2) Building (2)
(2) (1) (2) (1) (2) (1) (2) (1) (2) (1)
Marks
Experiment No - 8
Aim: Develop Following Program Using HTML5 and Google Charts API and Map API
 Using Google Charts API Basics draw Donut Chart.

 Using Google Charts API Basics draw Candle Chart.
 Using Google Charts API Basics draw other types of Chart.
 Using Google API read JSON file and create Google Map.
Date:
88
Relevant CO: CO3
Objectives:
a) Understanding Google Charts API and Map API
b) Analyzing HTML5, Google Charts API and Map API
c) Applying HTML5, Google Charts API and Map API to build Donut Chart, Candle Chart etc , and
Google Map
Theory:
 Using Google Charts API Basics draw Donut Chart, Candle Chart and other types of Chart,
and read JSON file to create Google Map
A Donut Chart is a type of circular chart that displays data as a ring divided into slices, similar to
a pie chart. However, the center of the ring is left empty, giving it a donut-like appearance.
Donut charts are useful for displaying categorical data with relatively few categories, and can be
effective in highlighting the relative size of each category. They can also be used to display a
single data series, or to compare multiple data series side-by-side.
To create a Donut Chart, you can follow these steps:

1. Define your data. A Donut Chart is typically used to display categorical data with
relatively few categories, so define your categories and their corresponding values.
2. Choose a suitable library or tool. There are several libraries and tools available for
creating Donut Charts, such as Google Charts, D3.js, Highcharts, and Chart.js. Choose
one that best suits your needs and familiarity.
3. Set up your chart. In most charting libraries, you will need to create a container element
for your chart, define the chart type as a Donut Chart, and provide your data.
4. Customize your chart. Depending on the library or tool you're using, you may have
options to customize the appearance of your Donut Chart. For example, you can change
the colors of the slices, adjust the size of the chart, and add labels or tooltips.
5. Render your chart. Once you have set up and customized your Donut Chart, render it in
your web page or application. Most libraries and tools will provide you with a code
snippet or function to call to render your chart.
When creating a Donut Chart, it's important to keep in mind that it may not be the best choice for
displaying certain types of data. For example, if you have a large number of categories, or if the
differences between the category values are not significant, a Donut Chart may not be the most
effective way to visualize the data. In those cases, other types of charts, such as bar charts or
scatter plots, may be more appropriate.
89
A Candlestick Chart is a type of financial chart used to represent the price movements of an
asset, such as a stock or currency, over a given period of time. It is composed of individual
"candlesticks" that represent the price range of the asset for each time period.
Each candlestick consists of four main components: the opening price, the closing price, the high
price, and the low price. The body of the candlestick represents the opening and closing prices,
while the wicks or shadows represent the high and low prices. The color of the body can indicate
whether the price increased or decreased during the time period.
To create a Candlestick Chart, you can follow these steps:

1. Collect your data. You will need data on the opening price, closing price, high price, and
low price of the asset for each time period you want to chart. This data can be collected
from a financial data provider or by manually recording the prices.
2. Choose a suitable library or tool. There are several libraries and tools available for
creating Candlestick Charts, such as D3.js, Highcharts, and Chart.js. Choose one that best
suits your needs and familiarity.
3. Set up your chart. In most charting libraries, you will need to create a container element
for your chart, define the chart type as a Candlestick Chart, and provide your data.
4. Customize your chart. Depending on the library or tool you're using, you may have
options to customize the appearance of your Candlestick Chart. For example, you can
change the colors of the candlesticks, adjust the size of the chart, and add labels or
tooltips.
5. Render your chart. Once you have set up and customized your Candlestick Chart, render
it in your web page or application. Most libraries and tools will provide you with a code
snippet or function to call to render your chart.
When creating a Candlestick Chart, it's important to keep in mind that it is primarily used for
technical analysis of financial markets. It can help traders identify trends and patterns in price
movements, and make decisions about buying and selling assets. However, it may not be the
most appropriate chart type for other types of data analysis.
Google Chart API supports a wide range of chart types that can be used for various data
visualization purposes. Some of the other chart types supported by Google Chart API are:
 Bar Chart: Used to display comparisons among discrete categories.

 Line Chart: Used to display trends over time or continuous data.
 Area Chart: Similar to line chart but with the area under the line filled in with color.
 Scatter Chart: Used to display correlations between two variables.
 Bubble Chart: Similar to scatter chart but with bubbles representing data points.
 TreeMap Chart: Used to display hierarchical data as nested rectangles.
 Gauge Chart: Used to display a single value within a range of values, like a speedometer.
 Org Chart: Used to display hierarchical data in a tree-like structure.
 Geo Chart: Used to display data on a geographical map.
 Timeline Chart: Used to display events over time.
These chart types can be customized with a variety of options and styles to fit the needs of the
user. By using the Google Chart API, you can easily create and display charts on your website or
application without the need for any additional software or programming skills.
90
Procedure
To create a Donut Chart using the Google Chart API, you can follow these steps:
1. Prepare your data: Create an array of data that represents the categories and their
corresponding values.
2. Set chart options: Define the chart options, such as the size, colors, and font.
3. Create the chart: Create a new instance of the Donut Chart using the
google.visualization.PieChart constructor.
4. Draw the chart: Call the draw() method of the chart instance and pass in the data and
options variables.
5. Display the chart:
To create a Candlestick Chart using the Google Chart API, you can follow these steps:
1. Prepare your data: Create an array of data that represents the price movements of the
asset for each time period you want to chart. The data should include the opening price,
closing price, high price, and low price for each time period.
2. Set chart options: Define the chart options, such as the size, colors, and font.
3. Create the chart: Create a new instance of the Candlestick Chart using the
google.visualization.CandlestickChart constructor.
4. Draw the chart: Call the draw() method of the chart instance and pass in the data and
options variables.
5. Display the chart
To create a Google Map by reading a JSON file, you can follow these steps:
1. Create a new HTML file: Create a new HTML file and hold the Google Map.
2. Create a JSON file: Create a new JSON file that contains the location data you want to
display on the map. The data should include latitude and longitude values for each
location.
3. Read the JSON file: In the script.js file, read the JSON file and parse the data into an
array of location objects.
4. Initialize the map: In the script.js file, create a function to initialize the Google Map and
add markers for each location.
5. Replace "YOUR_API_KEY": Replace "YOUR_API_KEY" in the HTML file with your
own Google Maps API key.
6. Test your map: Open the HTML file in your web browser to see the Google Map with
markers for each location.
By following these steps, you can create a Google Map by reading a JSON file with location
data. You can further customize the map and markers using the Google Maps API options
and styles.
Observations:
1)
<!DOCTYPE html>
91
<html>
<head>
<title>Donut Chart using Google Charts API Basics</title>
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
92
2)
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
], true);
93
var options = {legend: 'none'};

var chart = new
google.visualization.CandlestickChart(document.getElementById('container'));
}
</script>
</body>
</html>
3)
<!DOCTYPE html>
<html>
<head>
<title>Scatter Chart Example</title>
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
94
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none'
};
var chart = new

google.visualization.ScatterChart(document.getElementById('chart_div'));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
4)
<!DOCTYPE html>
<html>
<head>
<title>Dubai Hotels</title>
</head>
<body onload = "loadMap()">
95
<h2>Dubai Hotels</h2>
<div id = "map" style = "width:640px; height:480px;"></div>
<script>
// fake JSON call

function getJSONMarkers() {
const markers = [
{
name: "Rixos The Palm",
location: [25.1212, 55.1535]
},
{
name: "Shangri-La Hotel",
location: [25.2084, 55.2719]
},
{
name: "Grand Hyatt",
location: [25.2285, 55.3273]
}
];
return markers;
}
function loadMap() {
// Initialize Google Maps
const mapOptions = {
center:new google.maps.LatLng(25.2048, 55.2708),
zoom: 11
}
const map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Load JSON Data

const hotelMarkers = getJSONMarkers();
// Initialize Google Markers

for(hotel of hotelMarkers) {
let marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(hotel.location[0], hotel.location[1]),
title: hotel.name
})
}
}
</script>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
</body>
96
</html>
Conclusion:
Developed Donut Chart, Candle Chart and other types of Chart, and read JSON file to create
Google Map successfully using Google Map and Chart APIs.
Quiz:
 What is Donut Chart?

 What is Candle Chart?
 Discuss other types of Chart supported by Google Map API.
97

O'Reilly, 2008.
Press, Nov. 201
https://www.sitepoint.com/google-maps-json-file/
https://developers.google.com/maps
https://developers.google.com/maps/documentation/javascript/overlays
Knowledge Logic
(2) Building (2)
(2) (1) (2) (1) (2) (1) (2) (1) (2) (1)
Marks
98
Experiment No - 9
Aim: Case Study for Different Information Dashboard(Min 2)
Date:
Competency and Practical Skills: Understanding

Relevant CO: CO4
Objectives:
a) Understanding Dashboard
Theory:
An information dashboard is a visual representation of key performance indicators (KPIs) and

other critical business metrics that are used to monitor the health and performance of an
organization or department. Dashboards are designed to provide a high-level overview of key
metrics in real-time or near-real-time, allowing executives and other decision-makers to quickly
identify trends, patterns, and issues that require attention.
Dashboards typically consist of a series of charts, graphs, tables, and other visual elements that
display KPIs and other metrics in a clear and concise manner. These visual elements are often
customizable, allowing users to select the metrics they want to monitor and to adjust the format
and layout of the dashboard to suit their needs.
Information dashboards can be used for a variety of purposes, including:

1. Performance monitoring: Dashboards can be used to track key performance indicators
and other metrics related to business performance, such as sales, revenue, and
profitability.
2. Risk management: Dashboards can be used to monitor risk factors and identify potential
issues that could impact the organization.
3. Resource allocation: Dashboards can be used to monitor resource usage and identify
opportunities for optimization and cost reduction.
4. Operational efficiency: Dashboards can be used to monitor operational metrics and
identify opportunities for process improvement and increased efficiency.
There are a variety of tools and platforms available for creating information dashboards, ranging
from simple spreadsheet programs to complex business intelligence software. Dashboards can be
designed for specific departments or functions within an organization, such as marketing or
finance, or they can be designed for use across the entire organization.
99
There are many online resources and platforms where you can find and create information
dashboards. Here are some examples:
1. Tableau: https://www.tableau.com/
2. Google Data Studio: https://marketingplatform.google.com/about/data-studio/
3. Power BI: https://powerbi.microsoft.com/en-us/
4. Domo: https://www.domo.com/
5. Klipfolio: https://www.klipfolio.com/
These platforms offer a variety of features and tools for creating and customizing information
dashboards, and some of them offer free or low-cost options for individuals or small businesses.
Observations:
Case 1:
Information Dashboard for a Fitness Tracking Application
Overview: In this case study, we will design an information dashboard for a fitness tracking
application. The dashboard will display the user's fitness data in an easily digestible format.
Goals:
 Display user's daily, weekly, and monthly progress
 Allow users to set and track their fitness goals
 Provide motivation for users to reach their goals
 Display data in an easily understandable format
Data:
 Daily step count
 Caloric intake
 Caloric expenditure
 Heart rate
 Sleep duration
Design: The dashboard will consist of the following elements:
1. Overview: The top section of the dashboard will show an overview of the user's progress
towards their fitness goals. It will include a progress bar, displaying how close the user is
to reaching their daily, weekly, and monthly goals.
2. Daily Progress: The next section will show the user's progress towards their daily goals.
This will include a bar chart displaying the user's daily step count and caloric
intake/expenditure. The chart will also include a target line representing the user's daily
goal.
3. Weekly Progress: The third section will show the user's progress towards their weekly
goals. This will include a line chart displaying the user's weekly step count, caloric
intake/expenditure, and heart rate. The chart will also include a target line representing
the user's weekly goal.
100
4. Monthly Progress: The fourth section will show the user's progress towards their monthly
goals. This will include a bar chart displaying the user's monthly step count, caloric
intake/expenditure, and sleep duration. The chart will also include a target line
representing the user's monthly goal.
5. Motivation: The final section will provide motivation for the user to reach their fitness
goals. This will include a motivational quote and a picture of a healthy meal or exercise.
Technologies: The information dashboard will be built using HTML, CSS, JavaScript, and
the D3.js library.
Conclusion: By providing users with an easily digestible format of their fitness data, this
information dashboard can help motivate users to reach their fitness goals. The use of charts
and graphs makes it easy for users to understand their progress towards their goals and adjust
their fitness routine accordingly.
101
Case 2:
Sales Dashboard for E-commerce Company
Overview: An e-commerce company wants to develop a sales dashboard that provides an

overview of sales performance and insights for key stakeholders.
Objectives:
 Provide an overview of sales performance for the company.
 Identify top-performing products, categories, and regions.
 Monitor sales trends and identify potential opportunities for growth.
 Provide insights to key stakeholders for informed decision-making.
Design and Features:
 The dashboard should include charts and graphs that display sales performance data,
including revenue, units sold, and order volume.
 The dashboard should have filters that allow users to view sales data by product,
category, region, and time period.
 The dashboard should include a heatmap that displays sales data by region, highlighting
top-performing areas.
 The dashboard should include a sales funnel chart that shows the conversion rates at each
stage of the sales process.
 The dashboard should provide alerts and notifications for key performance indicators
(KPIs) that fall below or exceed target values.
Implementation:
 Data for the dashboard will be sourced from the company's transactional database.
 The dashboard will be developed using a business intelligence tool such as Tableau or
Power BI.
 The dashboard will be accessible to key stakeholders via a web-based interface or a
mobile app.
Outcome:
 The sales dashboard provides key stakeholders with a clear overview of sales
performance and insights for informed decision-making.
 The dashboard has helped the company identify top-performing products, categories, and
regions, leading to improved targeting and increased sales.
 The sales funnel chart has helped the company identify potential bottlenecks in the sales
process and make improvements.
 The heatmap has helped the company identify areas with high sales potential, leading to
targeted marketing campaigns and increased sales.
 The alerts and notifications have helped the company stay on top of KPIs and take action
when necessary.
102
Conclusion:
Understood Dashboard successfully.
Quiz:
 What is Information Dashboard?
O'Reilly, 2008.
103
Press, Nov. 201
https://www.geckoboard.com/uploads/Ecommerce-KPI-dashboard.png
https://www.geckoboard.com/dashboard-examples/marketing/ecommerce-dashboard/
https://www.clicdata.com/examples/retail/
Knowledge Logic
(2) Building (2)
(2) (1) (2) (1) (2) (1) (2) (1) (2) (1)
Marks
104

Edit Model

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

Edit Model

Uploaded by

Copyright:

Available Formats

A Laboratory Manual for

[ B.E. (Computer Engineering): Semester – 6 ]

Directorate of Technical Education, Gandhinagar,

This is to certify that Mr./Ms. _____________________________________________

Enrollment No. _______________ of B.E. Semester ________ from Computer Engineering

Signature of Course Faculty Head of the Department

 To provide globally competitive technical education

 To create an ecosystem for proliferation of socially responsible and technically sound

 To develop state-of-the-art laboratories and well-equipped academic infrastructure.

 To create an environment for providing value-based education in Computer Engineering

 To produce computer engineering graduates according to the needs of industry,

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

 Sound knowledge of fundamentals of computer science and engineering including

Program Educational Objectives (PEOs)

 Possess technical competence in solving real life problems related to Computing.

1. Using Google Charts API Basics draw Donut

Aim: Setup Environment for All the Tools

 Install Wamp/XAMPP Server

Competency and Practical Skills: Understanding and Analyzing

Relevant CO: CO1

1. Download the Installation File: Go to the official website of WampServer or XAMPP

 Install Jquery Library:

other user actions, and update the visualization accordingly.

Method 1: Using a CDN

Method 2: Downloading D3.js

To install Canvas.js, follow these steps:

1. Download the latest version of Canvas.js from the official website:

 Configure Google Chart API:

var chart = new

 Configure Google Map API:

List of Open Source Software/learning website:

 HTML5 (Canvas and SVG tags)

References used by the students:

Rubric wise marks obtained:

Aim: Develop the following Program Using HTML5 CANVAS

 Develop the Different basic Graphical Shapes using HTM5 CANVAS

 Develop the Different Advanced Graphical Shapes using HTM5 SVG

Competency and Practical Skills: Understanding and Analyzing

Relevant CO: CO1

 Develop the Different basic Graphical Shapes using HTM5 CANVAS

// Creating a filled rectangle

// Creating a stroke rectangle

// Creating a filled circle

// Creating a stroke circle

// Creating a straight line

// Creating a curved line

// Creating a filled arc

// Creating a stroke arc

 Develop the Different Advanced Graphical Shapes using HTM5 CANVAS

// Creating a cubic curve

// Creating a cubic bezier curve

 Develop the Different basic Graphical Shapes using HTM5 SVG

<rect x="50" y="50" width="100" height="50" style="fill: blue;" />

 Develop the Different Advanced Graphical Shapes using HTM5 SVG

<stop offset="0%" stop-color="blue" />

<rect x="50" y="50" width="100" height="50" fill="url(#gradient)" />

<svg width="500" height="500">

<rect x="50" y="50" width="200" height="200" style="fill:green;stroke:orange;stroke-

<polyline points="150,150 200,150 200,200 250,200 250,250" stroke="purple"

<path d="M250 250 A50 50 0 0 0 200 300" stroke="orange" fill="none" />

 What is HTML5 Canvas? Explain it.

Rubric wise marks obtained:

 Read the data .txt file and draw Data Table

Enrollment No. _______ of B.E. Semester from Computer Engineering