This document describes a six-week industrial training report submitted by Gaurav Gopal Gupta at the Indian Institute of Science. The report focuses on implementing a system for the real-time graphical representation of data from IoT devices. The data is transmitted wirelessly and stored on a server, where it is processed and used to continuously update line graphs. Users can access a website to monitor their data, compare it to historical records, and better understand the information captured by their devices. The system was created using technologies like XAMPP, MySQL, PHP, FusionCharts, and frameworks like MVC and Bootstrap. Devices like Raspberry Pi and Arduino were also used to capture and transmit sensor data.

1. Six Weeks Industrial Training Report
At
INDIAN INSTITUTE OF SCIENCE(IISc)
Submitted in partial fulfillment of the requirement for the award of
the degree of
Bachelor of Technology
COMPUTER SCIENCE & ENGINEERING
Submitted By
Gaurav Gopal Gupta
Roll. No. 13103008
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
Dr. B.R. AMBEDKAR NATIONAL INSTITUTE OF
TECHNOLOGY
JALANDHAR, PUNJAB, INDIA

2. ii
ABSTRACT
The amount of data in this world has been exploding and expanding at an astounding
rate. There is data coming in from almost every possible source. This data has to be
carefully monitored and utilised in order to draw meaningful conclusions. For this
sole purpose, analysis is done. Analysis of data makes it usable and transparent. This
enables people with almost no technical knowledge understand the significance of the
data captured. This project focuses on the implementation of a medium for real-time
graphical representation of data provided by various IoT devices using favourable
transmission process depending on the device itself. The friendly user interface makes
it easy for people to study the data and understand it's importance. A user will then be
able to monitor his/her data and compare it with other historical data as per his/her
choice.

3. iii
LIST OF FIGURES
Chapter 1
1.1 Basic structure of MVC 3
Chapter 3
3.1 Steps of Installation of Xampp Server 6-7
3.2 Activation of apache, MySql, PHPetc. 8-9
3.3 Configuration of XAMPP server 10
3.4 Xampp server for Windows 11
Chapter 4
4.1 Creation of MySql Database 13
Chapter 5
5.1 Respberry pi 15
5.2 Output using Respberry pi 17
5.3 Arduino Nano 17-18
5.4 Connection between GSM and Arduino 19
5.5 Command on virtual window of Arduino to transmit values 19-22
Chapter 7
7.1 Fusion Charts 25
Chapter 8
8.1 Homepage of website 31
8.2 Dashboard of website 32
8.3 Components of dashboard 33-35

4. iv
ACKNOWLEDGEMENT
It is my pleasure to be indebted to various people, who directly or indirectly contributed
in the development of this work and who influenced my thinking, behavior and acts
during the course of study.
I am highly indebted to System Engineering Facility Lab, Centre for Nano Science and
Engineering, Indian Institute of Science, Bengaluru for its guidance and constant
supervision as well as for providing necessary resources regarding the project and also
for their support in completing the project.
I would like to express my gratitude to Dr. Vijay Mishra Chair Person CeNSE,
Indian Institute of Science, Bengaluru for their kind co-operation and encouragement
which helped me in completion of this project.
I would like to express my special gratitude and thanks to Ms. Archana Patwardhan,
Mr. Puneet Sharma, CeNSE, Indian Institute of Science, Bengaluru for giving me
attention and time.
I express my sincere gratitude to Dr. Geeta Sikka worthy Head of the Department for
providing me an opportunity to undergo Industrial Training as the part of the
curriculum.
Lastly, I would like to thank the almighty and my parents for their moral support and
friends with whom I shared my day to day experience and received lots of suggestions
that improve my quality of work.
Gaurav Gopal Gupta
Roll No: 13103008

5. v
TABLE OF CONTENTS
_____________________________________________________________________
S.No. Title Page No
Cover Page
Abstract
I
ii
List of Figures iii
Acknowledgement iv
Chapter 1 Introduction 1-3
1.1 Objectives of the project 1
1.2 Introduction to the project 1
1.3 Model Value Controller (MVC) 1
1.4 Twig 3
Chapter 2 Prerequisites 4-5
2.1 Softwares used 4
2.2 Languages used 4
2.3 Hardwares used 4
2.4 Framework used 5
Chapter-3 Installation procedure of softwares 6-12
3.1 XAMPP Server 6
3.2 Bootstrap 11
Chapter-4 Basic work of project 13-14
4.1 Division of project work 13
4.2 Creating a MYSQL database 13
Chapter-5 Data transmission trough user’s device 15-22
5.1 Respberry pi 15
5.2 Arduino nano 17

6. vi
S.No. Title Page No
Chapter 6 Database Handling 23-24
6.1 Data acquisition on the server side 23
6.2 Fetching the values from database server 24
Chapter 7 Plotting the real time graph 25-29
7.1 FusionCharts 25
7.2 Advantages of FusionCharts 25
7.3 Installation procedure 26
7.4 Setting up FusionCharts on the web server 27
7.5 Implementation of FusionCharts 28
Chapter 8 Front page of the website 30-35
8.1 Construction of the front end 30
8.2 Description of the dashboard 33
Chapter 9 Back end of the website 36-37
9.1 Description of back end 37
Chapter 10 Application of the project 38-38
10.1 Breath Analyzer 38
10.2 Diet Monitoring 38
10.3 Agri-bot 38
Conclusions 39
References 40

7. 1
1. Introduction
1.1 Objectives of the project
The aim of this report is to explain in detail the steps and processes involved in the
graphical representation of the data extracted from IoT devices. The data is taken from
the device wirelessly over the network to store it on the server side system. This data is
the processed and updated simultaneously to form a real-time line graph. The graph can
display data for a time interval of variable size and its scaling process has been
automated to suit the situation accordingly.
1.2 Introduction to the project
A website has been created to study and analyse the data coming from IoT devices using
the most viable option for the transmission process. The data captured is used to display a
real-time graph in accordance with the values received. Users can register themselves on
the website and make their profiles before studying the data and getting the graph
displayed. They can keep track of their previous records to compare with the current data
in order to check the improvements or descent in the performance. The website offers the
functionality of displaying a multiple lined real-time graph which can be used to display
the values received as co-ordinates. The users will have to enter specific details of their
device during the registration process such as device id, number of sensors, timeframe,
parameters etc. This information will be used to draw the corresponding graph with
correct parameters to make it easy for the user to see the data through a neat lined graph
making the studying process simpler.
1.3 Model Value Controller (MVC)
The Model-View-Controller (MVC) is an architectural pattern that separates an
application into three main logical components: the model, the view, and the controller.
Each of these components are built to handle specific development aspects of an
application. MVC is one of the most frequently used industry-standard web development
framework to create scalable and extensible projects. A Model View Controller pattern is
made up of the following three parts:

8. 2
1.3.1 Model: The Model component corresponds to all the data related logic that
the user works with. This can represent either the data that is being transferred
between the View and Controller components or any other business logic
related data. The Model is responsible for managing the data of the
application. It responds to the request from the view and it also responds to
instructions from the controller to update itself. For example, a Customer
object will retrieve the customer information from the database, manipulate it
and update it data back to the database or use it to render data.
1.3.2 View: The View component is used for all the UI logic of the application. For
example, the Customer view would include all the UI components such as
text boxes, dropdowns, etc. that the final user interacts with. It is basically a
presentation of data in a particular format, triggered by a controller's decision
to present the data.
1.3.3 Controller: Controllers act as an interface between Model and View
components to process all the business logic and incoming requests,
manipulate data using the Model component and interact with the Views to
render the final output. The controller is responsible for responding to user
input and performs interactions on the data model objects. The controller
receives the input, it validates the input and then performs the business
operation that modifies the state of the data model. For example, the
Customer controller would handle all the interactions and inputs from the
Customer View and update the database using the Customer Model. The same
controller would be used to view the customer data.
MVC is popular as it isolates the application logic from the user interface layer and
supports separation of concerns. Here the Controller receives all requests for the
application and then works with the Model to prepare any data needed by the View. The
View then uses the data prepared by the Controller to generate a final presentable
response. The MVC abstraction can be graphically represented as follows :

9. 3
Fig 1.1: Basic Structure of MVC
1.4 Twig
Twig is a composer used for combining the previously created files for various minor or
major functionalities. In this project's scope, Twig is basically doing the job of including
the layout pages created in the Layouts file in the main PHP file.

10. 4
2. Prerequisites
2.1 Softwares used
This project is the result of various softwares used together. The softwares that were used
here are :
 Python 2.7
 Notepad++/gedit/Sublime Text
 Xampp server(Apache, MySQL, Perl, PHP)
 FusionCharts
 jQuery 3.0.0
 Arduino 1.6.4 or higher
 Tera Term
2.2 Languages used
This project is the result of various languages implemented together. The languages that
were used here are :
 Python 2.7
 HTML
 CSS
 PHP
 JavaScript
 SQL
 Json
 ATmega168
2.3 Hardwares used
This project is the result of various hardwares implemented together. The hardwares that
were used here are :

11. 5
 Arduino Nano
 Raspberry Pi model 3 b
 GSM Sim900 module
2.4 Framework used
This project is the result of various framework implemented together. The framework
that were used here are :
 Model-View-Controller(MVC)
 Bootstrap
Other than these, a composer called Twig is used in order to combine the files present at
different locations.

12. 6
3. Installation procedure of softwares
3.1 XAMPP server
XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl.
Below are the instructions to setup XAMPP on Windows platform :
3.1.1 Downloading XAMPP
Download the installer file for the latest version of XAMPP from -
http://www.apachefriends.org/en/xampp-windows.html#641 and save the file to your
computer.
3.1.2 Installing the XAMPP
Next, you need to open the folder where you saved the file, and double-click the installer
file. You will be prompted to select the language you wish to use in XAMPP. Click the
arrow in the dropdown box, select your language in the list, and then click OK to
continue the installation process. For Windows 7 users, you will see a window pop up,
warning you about User Account Control (UAC) being active on your system. Click OK
to continue the installation.
Next you will see the Welcome to the XAMPP Setup Wizard screen. Click Next to
continue the installation. The Choose Components screen will appear next. This screen
will allow you to choose which components you would like to install.
Fig 3.1.1

13. 7
To run XAMPP properly, all the components checked in the image above need to be
installed. Click Next to continue.
Next you will see the Choose Install Location screen. Unless you would like to install
XAMPP on another drive, you should not need to change anything. Click Install to
continue.
Once all of the files have been extracted, the Completing the XAMPP Setup Wizard
screen will appear. Click Finish to complete the installation. The Installation Complete
screen will now appear. Click Finish to begin using XAMPP.
Fig 3.1.2
Figure 3.1 showing steps of installation of Xampp server
After clicking Finish in the previous screen, you will be asked if you want to open the
XAMPP Control Panel. Click Yes.
3.1.3 Starting XAMPP
The XAMPP Control Panel allows you to manually start and stop Apache and MySQL,
or install them as services.

14. 8
Fig 3.2.1
To start Apache or MySQL manually, click the Start button under Actions next to that
module.
Fig 3.2.2
Depending on your security settings, Windows 7 users will probably have a small
window open, asking if you want to allow xampp-control.exe to make modifications to
your computer. Click Yes to allow Apache or MySQL to start.
To install Apache and MySQL as services, click the red X to the left of each module
under Services. You will see a small window open, asking you to confirm that you want
to install it as a service. Click Yes to complete the installation. Repeat for the other
module.

15. 9
Fig 3.2.3
Figure 3.2 showing Activation of Apache, MySql, PHP etc.
Once again, a security window may open, asking if you want to allow the modifications
to your computer. Click Yes to allow it. The red X will change to a green check mark
once the service has been installed successfully. After the initial setup is complete, you
will need to run XAMPP as an administrator on Windows when you start the program
again. To do that, click Start, find XAMPP Control Panel in your Programs list, then
right-click and select Run As Administrator.
3.1.3 Configuring XAMPP
The first change will be to set the default text editor. XAMPP defaults to Notepad which
is the native Windows text editor. Click the folder button to the right to open the file
explorer. Navigate to the folder for your favourite text editor, select the .exe file, then
click Open.
The next change is to select your desired font for the logs that XAMPP creates. If you are
trying to track down an issue, you will spend time reading different logs, so choose a font
that is easy for you to read. Click on Log Options, then select your desired font and font
size, then click Save. After making those changes, click Save in the main configuration
window.

16. 10
If you find that you need to make a configuration change to Apache, PHP, or MySQL,
click the Config button for that module to bring up a context menu with links to the
config files for that module. The file will open in the default text editor you chose earlier.
Fig 3.3: Configuration of XAMPP Server
3.1.5 Securing XAMPP install
Once the configuration is done, go to http://localhost/ in the web browser. The XAMPP
splash screen appears first, asking the preferred language. The web-based XAMPP panel
will then appear.
Fig 3.4

17. 11
Click the Security link in the left sidebar. The XAMPP Security screen will appear. A
table will show you the current security status for each component. To secure the
XAMPP panel and phpMyAdmin, click the
http://localhost/security/xamppsecurity.php link to open the Security Console.
Fig 3.4: Xampp for windows
To secure MySQL, enter your desired password in the New Password field, then again in
the Repeat the new password box. Choose your authentication method (http or cookie),
then click Password Changing.
Enter a unique username in the Username field, a strong password in the Password field,
then click Make safe the XAMPP directory.
3.2 Bootstrap
Bootstrap is a free and open-source front-end web framework for designing websites and
web applications. It contains HTML and CSS based design templates for typography,
forms, buttons, navigation and other interface components, as well as optional JavaScript
extensions. Bootstrap provides a set of style sheets that provide basic style definition for
all key HTML components.
3.2.1 Downloading Bootstrap
The Bootstrap package can be downloaded as a zip file from the following link :

18. 12
www.getbootstrap.com
3.2.2 Setting up Bootstrap
The downloaded zipped file is unzipped to extract the files present in it. The folders with
the names HTML, CSS and Fonts are copied as they are to the project folder to make
their functionalities usable in the project files and codes.
This completes the Bootstrap setup procedure and makes it available to use and
implement.

19. 13
4. Basic work of Project
4.1Division of Project work
 Data transmission through the user's device(IoT Devices).
 Data acquisition on ther server side and storing onto the database server.
 Fetching the values from the database server.
 Plotting the real-time graph.
 Designing the front end of the website.
 Designing the back end of the website.
 Merging of all the subtask based on MVC structure.
4.2 Creating a MySQL database
In XAMPP, a database is created and accessed via phpMyAdmin. You can access
phpMyAdmin by entering http://localhost/phpmyadmin/ in your web browser.
The phpMyAdmin login screen will appear first. Select your language, then enter the
username (root) and unique password you created for the MySQL user in the previous
section.
Fig 4.1: Creation of MySql Database

20. 14
To create a database, click Databases in the top navbar. On the screen that appears, enter
the database name in the left field. Choose the desired database collation from the
Collation dropdown box (utf8_unicode_ci), then click Create. A success message will be
displayed once the database is created.
XAMPP server is now setup on the desktop and available for use.

21. 15
5. Data transmission through user’s device
5.1 Raspberry pi
The Raspberry Pi is a low cost, credit-card sized computer that plugs into a computer
monitor or TV, and uses a standard keyboard and mouse. It is a capable little device that
enables people to explore computing, and to learn how to program in languages like
Scratch and Python. It’s capable of doing everything you’d expect a desktop computer to
do, from browsing the internet and playing high-definition video, to making
spreadsheets, word-processing, and playing games. In this context, it has been attached to
sensors which pass the values to the r pi and these values are simultaneously transmitted
to the server system.
Fig 5.1: Respberry pi
The values taken from the sensors are transmitted exactly as they were to the server
system. This is done so as to implement a real-time graph plotting on the server's side
system. To transmit just the values, a simple HTTP library called Requests was used.
This library was pre installed on the r pi. If not, use the following command to install the
Requests package :
sudo pip install requests
In order to make use of this package, an import statement has to be written to include all
its files.

22. 16
import requests
The requests package can be used to implement options like get, post, delete, put etc. The
GET method is used to request data from a specified source. GET requests remain in the
browser history and must never be used while transmitting sensitive data. The values that
are transmitted do not have any pattern and depend solely on the sensor values. Hence,
displaying the values in the URL used as the destination is not an issue. The values that
are to be transmitted have to go to the corresponding columns in the database server in
order to provide accurate records for the user's reference. Assuming there are four
sensors for four different gases, the command used to ensure that the values get
transmitted in the correct order is given below :
data = {'acetone': 'ac', 'co2': 'cox', 'hl':'hl', 'tm':'tm', 'alc':'alc'}
To send these values using the GET method, following command was used :
r = requests.get('http://server's_IP_addr/pathof_thephpfile_onserver',
params=data)
r acts as a Response object which can be used to get the necessary information. A print
command can be used to check whether values are getting transmitted. The following
command prints the url of the destination during the transmission process :
print(r.url)
An output of the form of the below command was seen :
http://server's_IP_addr/pathof_thephpfile_onserver?acetone=ac&co2=cox&hl=hl&
tm=tm&alc=alc
The above URL gives the confirmation that the values are going to the corresponding
columns in the table on the database server.

23. 17
Fig 5.2: Output using raspberry pi
5.2 Arduino Nano
Arduino Nano is a surface mount breadboard embedded version with integrated USB. It
is the smallest, complete, and breadboard friendly device. It has everything that
Diecimila/Duemilanove has (electrically) with more analog input pins and onboard +5V
AREF jumper. Physically, it is missing power jack. The Nano automatically senses and
switches to the higher potential source of power. Nano has the breadboard-ability of the
Boarduino and the Mini+USB with smaller footprint than either, so users have more
breadboard space.
Fig 5.3.1

24. 18
Transmission of values from Arduino Nano to the server has been implemented using the
GSM module unlike the transmission in case of Raspberry pi using the in-built wifi
module mentioned earlier. GSM Sim 900 is used to establish a connection between the
server system and the device.
Fig 5.3.2
Figure 5.3 show Arduino nano
5.2.1 Interfacing GSM Module with Arduino Nano
GSM SIM Module is used to establish a wireless communication between a computer
and GSM module. It can be used to send data from Arduino to a server side system for
real time monitoring of whatever it is that needs analysis. GSM SIM 900 is used for the
data transmission. GSM makes use of the TCP/IP Protocol for the transmission
procedure. The value has to be sent to the server machine and so the IP Address of the
server and the port number that the server has opened for connection.
5.2.2 Connecting GSM with Arduino
Types of connections possible between GSM and Arduino :
i. TX(GSM) – RX(Arduino)
ii. RX(GSM) – TX(Arduino)
iii. GND(GSM) – GND(Arduino)

25. 19
Fig 5.4: Connection b/w GSM and Arduino
5.2.3 Code to be written on Arduino
A code is written on the Arduino device using the AT commands to make use of the
GSM Sim900 module for the transmission of values to the web server. The AT
commands used are as follows :
Fig 5.5.1
The above set of AT commands is responsible for the successful transmission of values
to the web server. Under the AT+CIPSTART command, three parameters have been
passed. These parameters are for the specification of the transmission protocol used,
static IP of the server and the port number that the server has opened for data
transmission.
Here the IP address of the server is 117.247.5.151 and port number is 20001. Ctrl+Z are
pressed after all the commands for sending the message. The code snippet implementing
the above set of AT commands is mentioned below :

26. 20
Fig 5.5.2
Delay is given after each command for proper execution of the command. 0x1A is the
Hexadecimal code for Ctrl+Z.
5.2.4 Running the commands to transmit data
Fig 5.5.3

27. 21
The connection between the Arduino device and GSM is now removed. Select board as
Arduino Nano and Com port and execute the code in Arduino.
Connect all the connections between Arduino and GSM. Go to Tools – Serial Monitor.
Fig 5.5.4
The commands will start printing in the Serial Monitor which ensures that they are
getting executed.
Fig 5.5.5
At the end of the commands execution, the desired values will be sent to the server. The
following is the example of sending a string to the server which is displayed on the server
side when the the IP and port number are entered as the URL on the web browser.

28. 22
Fig 5.6.5
Figure 5.5 shows Command on Virtual window to transfer Vaues

29. 23
6. Database Handling
6.1 Data acquisition on the server side
Once the values transmission part on the device's end is complete, they have to be stored in a
secure location on the server i.e. a database. The server's system has a database created for the
sole purpose of storing the values received during the transmission process. A PHP script is
written on the server system to capture the values and store them on the specified database in
their corresponding columns. Firstly, the required database has to be created on the server by
writing a suitable SQL query. Here we consider gas sensors whose values will be stored in the
database and hence we can write the query accordingly in the following manner :
CREATE DATABASE sensor_log;
CREATE TABLE sensor_log_table
(
device_id int(size),
sensor_id int(size),
acetone float(size),
co2 float(size),
hl float(size),
....
);
This will create a database called sensor_log with a table called sensor_log_table.
The transmitted values of the sensor have to be stored in the corresponding columns to
ensure maintenance of accurate records. Another query is required to ensure this which is
written in the PHP file and it is as follows :
"INSERT INTO sensor_log.sensor_log_table (device_id,sensor_id ,sensor_value)
VALUES ('".$_GET["id"]."', unix_timestamp(),
'".$_GET["acetone"]."',".$_GET["co2"]."')";

30. 24
The above query written in PHP file ensures the values are stored in the database on the
server.
Now, we have a database with the required table and required number of columns to
store the values received by the server. This database has been connected to the PHP file
that is responsible for acquiring the values and storing them on the database. This file
along with its path on the server system is passed as a parameter in the python script
written in the device. This completes the data acquisition and storage part.
6.2 Fetching the values from the database server
Values required for a graphical representation are stored on the database server in the
specified database and table. These values need to be fetched from the database as they
are stored so as to implement real-time plotting. To fetch the values, the data present in
each of the column of the table has to be pushed on to a common storage place. This is
done here by passing the values on to an array.
The number of sensors in a device can vary and each sensor has a separate column in the
table created in the database. The value will be fetched from these columns separately
and stored in their respective arrays. For example, if four sensors are present, then four
arrays will be used to pass their values. A common array is used to store the values of all
the sensor arrays.
The values in each sensor array get appended to the common array as the values get
fetched. This is done so as to follow an order when storing the data. This helps while
taking values to plot the graph. The values in the appending process get stored in a
manner such that the first value is from sensor1, the second from sensor2 and so on.
Hence, after the first four values from each of the sensors, the next value from each of
the sensor starts getting pushed to the common array. While plotting the graph, the points
are plotted simultaneously for all the sensors and the value for each sensor keeps getting
added as soon as it is transmitted.

31. 25
7. Plotting the real-time graph
Graph construction can be done using packages like FusionCharts, ChartJS, High Charts
etc. Here the plotting process has been implemented using FusionCharts.
7.1 FusionCharts
FusionCharts Free is an open-source FREE flash charting component that can be used to
render data-driven animated charts. Made in Macromedia Flash MX, FusionCharts can
be used with any web scripting language like PHP, ASP, .NET, JSP, ColdFusion,
JavaScript, Ruby on Rails etc. to deliver interactive and powerful charts. Using XML as
its data interface, FusionCharts makes full use of fluid beauty of Flash to create compact,
interactive and visually-arresting charts. FusionCharts Suite XT is a JavaScript library
that is most commonly seen running on desktops and mobile web browsers.
Fig 7.1: FusionCharts
7.2 Advantages of FusionCharts
 Animated and interactive Charts.
 Easy yet powerful JavaScript integration.

32. 26
 No installation hassles.
 Easy to use.
 Runs on a variety of platforms.
 Reduces load on your servers.
 A plethora of chart types.
7.3 Installation procedure
Installation of FusionCharts Suite XT merely involves copying and pasting the
JavaScript files from the download package into your project folder. Thereafter, you can
simply include the FusionCharts JavaScript library in your web applications and start
building your charts, gauges, and maps. The JavaScript files of FusionCharts Suite
library are located in js folder of your download package. Once the package is
downloaded on your system, the following js files will be visible in your FusionCharts
folder :
File Name Description
fusioncharts.js
This is the core FusionCharts library, which you
need to include in all your pages where a chart,
gauge or map is required to be generated.
fusioncharts.charts.js
This file is required to render all charts present
under FusionCharts XT.
fusioncharts.widgets.js
This file is required to render all gauges present
under FusionWidgets XT.
fusioncharts.powercharts.js
This file is required to render all charts present
under PowerCharts XT.
fusioncharts.gantt.js
This file is required to render the Gantt chart,
present under FusionWidgets XT.

33. 27
fusioncharts.maps.js
This file is core map renderer file. The map
definitions, however, are stored separately, as
explained next.
maps/*
This folder contains path data required by each
map to be rendered by fusioncharts.maps.js. To
keep the download package size small, it contains
only 2 maps - fusioncharts.world.js and
fusioncharts.usa.js. You can download definition
of all the 965 maps offered by FusionMaps XT
from here
themes/*
This folder contains pre-packaged themes that can
be used by charts, gauges and maps to style them
through a central FusionCharts theme (JSON)
file. Each theme file has its own name, through
which it is referenced.
However, all the files are not necessarily used by the users. One can download selective
packages in order to save space and time. In the context of this project, only
fusioncharts.charts.js, fusioncharts.js and fusioncharts.theme.fint.js were used and hence
only these files were selected and downloaded. To plot the graph using the values on the
web server, FusionCharts has to be set up on the server to be able to include the
necessary packages.
7.4 Setting Up FusionCharts on your Web Server
 Create a folder named fusioncharts in the document root of your web application.
The folder can be named differently, and placed within another folder as well
instead of root. However, copying it to the root of the application allows all the
pages in the application to easily access the library from anywhere.
 In the download package, locate the js folder. Copy all the JavaScript files from
this folder and paste it in the fusioncharts folder, which was created earlier.

34. 28
This completes the setup procedure and this package can now be used to create charts on
web applications.
7.5 Implementation of FusionCharts
After the necessary files are downloaded and stored in the project folder, they are
included in a separate html file that is going to run for final execution. A separate js file
is written to render the chart on the webpage. This file includes the implementation of
predefined functions and objects initially created in the downloaded FusionCharts files.
The method is called using a predefined object and all the required properties of the
graph are mentioned and specified. The following code snippet shows the property
settings done in the code to customize it according to our needs :
"chart": {
"caption": "Data Analysis",
"subCaption": "Sensor values",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"xAxisName": "Day",
"palette": "3",
"paletteColors": "#0075c2,#1aaf5d,#f0f,#f00",
"bgcolor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"legendBorderAlpha": "1",

35. 29
"legendShadow": "0",
"showAxisLines": "0",
"showAlternateHGridColor": "0",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showValues": "0"
}
fusioncharts.render();
});
A render() function is called to render the graph on the webpage when called in the html
code.

36. 30
8. Front end of the website
The user-interface (UI) is taken care of by the front end of the website. It is a known fact
that websites and applications with friendlier UI are more popular as they are more
compatible with the users. In software architecture, there may be many layers between
the hardware and end user. Each can be spoken of as having a front end and a back end.
The front is an abstraction, simplifying the underlying component by providing a user-
friendly interface. Front-end web development, also known as client-side development is
the practice of producing HTML, CSS and JavaScript for a website or web application so
that a user can see and interact with them directly. The objective of designing a site is to
ensure that when the users open up the site they see the information in a format that is
easy to read and relevant. The problem that front end developers today face is that they
need to ensure that their site comes up correctly in different browsers (cross-browser),
different operating systems (cross-platform) and different devices (cross-device), which
requires careful planning on the side of the developer. The front end of this project is
based on Model Value Controller (MVC) framework(discussed in Section1.3 chapter 1).
8.1 Construction of the front-end
This project involves the use of various packages and libraries to implement the user
interface of the website. Some of these packages and languages are HTML, CSS,
JavaScript, jQuery and Bootstrap. All of the mentioned packages and languages are
easily available online or are pre-installed on systems today.
The name of the project is Visualizer and hence a folder with the same name is created.
A folder with the name Xampp gets created when the server is setup on the system
following the set of instructions mentioned earlier in the report. It contains a folder called
htdocs inside which all of the website folders are to be stored. The project folder is stored
here with all the necessary packages. Since the front-end in this project is based on MVC
framework, three folders with the name Model, View and Controller are present here.
The front-end part is taken care by the View folder. All the images, themes and packages
are stored here. A static folder is present which is responsible for all the static part of the
website. The static part of the website refers to the part which remains constant even after

37. 31
a certain event or action. It does not change according to the user's needs. It contains the
the images of the layout and the Bootstrap files required for the front-end. The Bootstrap
files are basically the CSS, JavaScript and font folders that are to be included to match
the requirements of the front-end. These files have classes for designing and
implementation which are used later in the main file for the final webpage.
Another folder called Templates is present inside the View folder. This contains two sub
folders namely Layouts and Partials. The Layouts folder has two separate files that
decide the actual layout of the web pages that are involved in the project. Home-layout is
for the home page i.e. the first page that opens when the user opens the website. This
page acts as a login page where the user can enter his/her credentials to access his/her
profile. Here is a screenshot of how the home page looks like :
Fig 8.1: Home Page of website
Dashboard-layout is used when the user successfully logs in and his/her profile gets
displayed. The profile has a dashboard with various functionalities related to the analysis
and device information. Here is a screenshot of how the dashboard looks like :

38. 32
Fig 8.2: Dashboard of website
These layout files contain the libraries and packages of jQuery, Bootstrap, FusionCharts
etc. Some of the files that were included are :
 jQuery.min.js
 bootstrap.min.js
 chart.min.js
 bootstrap-switch.min.js
 jQuery.matchHeight-min.js
 jQuery.dataTable.min.js
 ace.js
The Partials folder contains files and PHP scripts that define the classes of features and
functionalities implemented on the webpage. These are the classes that can be used
directly later and hence act as small modules or API's for the front-end. In this project,
the Partials folder contains a PHP file for the admin layout and three other files for
navigation bar, login form and sidebar.

39. 33
Twig is a composer used for combining the previously created files for various minor or
major functionalities. In this project's scope, Twig is basically doing the job of including
the layout pages created in the Layouts file in the main PHP file.
8.2 Description of the Dashboard
The dashboard enables the user to make use of the various functionalities provided by the
website without much confusion. It makes the website more user-friendly and simple to
access.
Fig 8.3.1
The dashboard opens up as the mouse cursor is hovered on the left hand side of the
webpage. This feature is implemented using mouse-over function in CSS. The options
present on the dashboard have an on-click function which creates a dropdown list below
the selected option as soon as it is clicked by the user.
The options provided by the Visualize option look like the screenshot shown below :

40. 34
Fig 8.3.2
The first option i.e. Analytics enables the user to analyse the current data and compare
with historical data.
The second option i.e. Graphs displays the graph of the device from the received values
that are stored in the database server.
The option provided by the Devices option looks like the screenshot shown below :
Fig 8.3.3
Overview displays the description of the device that the user registered during the
registration procedure. For example, it will contain details like the number of sensors
present, number of values transmitted per unit of time, device's registration id, the
sensor's id etc.
A small overview of the profile can be seen by clicking on the top right corner where the
user's registered name is written. This is what a click on this option results in :

41. 35
Fig 8.3.4
Figure 8.3 shows Component of Dasboard
Clicking on the Profile option redirects the user to his/her profile page.
Logout option does exactly as its name suggests and logs the user out and takes him/her
back to the home page.
This completes the front-end features and the user-interface description of the website.

42. 36
9. Back-end of the website
The backend of a web application is an enabler for a front-end experience. An
application’s front-end may be the most beautifully crafted web page, but if the
application itself doesn’t work, the application is a failure. The backend of an application
is responsible for things like calculations, business logic, database interactions and
performance. Most of the code that is required to make an application work is done on
the back-end. Back-end code is run on the server, as opposed to the client. This means
that back-end developers not only need to understand programming languages and
databases, but they must have an understanding of server architecture as well. If an
application is slow, crashes often, or constantly throws errors at users, it’s likely because
of back-end problems. Back-end development is not all ones and zeros though. Much
like front-end development, back-end development has a human aspect to it as well.
The back-end of this website consists of creating various functionalities involved in the
website. The modules can be coded individually and integrated later. The various parts of
the back-end are :
 Creating a suitable database on the server as per requirements.
 Registration page.
 Login page.
 Connecting the registration page and login page to the database.
 Creating an authentication system that verifies the user's credentials.
 Fetching values from the database.
 Using a suitable data structure to store the values and call the function to plot it.
 Storing and displaying the overview of the device details which can be displayed
to the user.
The above mentioned modules have been implemented using PHP and JavaScript codes
and later called or included in the final HTML file that displays the webpage.

43. 37
9.1 Description of back-end implemented
9.1.1 Model
The website makes use of the MVC framework which has been mentioned earlier. View
was discussed in the front-end part and now the Model part will be focussed upon. Two
PHP files are created to implement the same :
DBModel.php – This file is used to create a model for establishing the connection of
database. Here, the authentication details of the database are defined such as hostname,
username, password, database name, and the function definition of database connection
which returns the result to usermodel.php.
UserModel.php – This file creates a user login connection with the database. It includes
DBModel.php and creates a function to get the necessary details of the user. Another
function checks the credentials and returns the value to a separate PHP file which is the
Controller part of the login procedure.
9.1.2 Controller
The Controller part just like the Model part has two files. Below is their description
which includes the purpose they solve :
Authentication.php – This is used to create the controller part of the login/logout of the
user. This file includes the UserModel.php file i.e. Model of user login. It verifies the
user login procedure and returns the corresponding value to the main file Login.php. It is
also responsible for the logout event of the website.
Login.php – Login.php is present outside the Model, View and Controller part. It is used
for the actions taking place on the login page i.e. filling of text fields and clicking on the
submit button which triggers an event. The Authentication.php file present in the
Controller section is included here.

44. 38
10. Applications of the project
An analysis based application is a necessity in almost all the projects that are under
development or are being used already. Monitoring and representation of data is required
everywhere in so as to be able to understand it and draw logical conclusions. A few
applications of this project are :
10.1 Breath Analyser
A breath analyser analyses the breath of the user using sensors which transmits value as
analog output. This analog output is converted to a digital output using an Analog to
Digital Converter (ADC) and received by the IoT device. This device can run the python
script on its end and transmit the values to the server system. The server system fetches
the values from the database to plot a real-time graph of the same. This will help the
users monitor and get a good understanding of the data through a graphical
representation.
10.2 Diet Monitoring
This device is used to monitor the amount of fat burn in the user's body. It has a gas
sensor and a pulse sensor to measure the acetone level in the user's breath and the pulse
of the user respectively. It accordingly generates ppm values for acetone and pulse value.
If both these values are in a specified range, the device draws the conclusion that fat burn
is possible. This generates data such as ppm values, pulse and amount of fat burn which
have to be stored and analysed so that users can study their body better to lose fat
accordingly.
10.3 Agri-bot
Agri-bot has been designed for the inspection of crops in a farm. It measures the
ammonia (NH3) and VOC content in a plant. If the content is above a specific level, that
particular plant is considered to have diseases. This again requires gas sensors and an IoT
device. A GSM module is used here as WiFi will not be available when the robot is
traversing the farm. Hence, using this GSM module, the IoT device will be able to
communicate with the server and transmit data. Once the values are captured, they can be
used to plot a graph for the user's monitoring requirements.

45. 39
CONCLUSION
The project explained in this report acts as a system for graphical representation of data
coming from a remote device. The medium used is a website which has a front-end and a
back-end serving the anticipated purposes. Other features for analysis can be further
added to provide a broader range of studying options to the users. Its applications are not
only for IoT devices but for any other type of source as well. These kinds of projects help
solve real-life problem statements and if more time and resources are invested, they can
simplify various issues and get the better of small but significant problems.
The Project Visualizer can be concluded in the following way:
 Various programming languages like Python, CSS , JS , HTML,SQL were to be
strived upon in order to make the contribution towards the project count
 HTML pages were designed in the python files which were being operated in the
django framework.
 As was being told about the changes which were to change the old USSD type
inquires to API based inquires.
 The whole process is being done with API calls, from customer enrollment to
money transfer. Developer partners need not to take care of any string handling
everything is handled by API calls.

46. 40
REFERENCES
[1] Lobley, A., Lee Whitmore, and B. A. Wallace. "DICHROWEB: an interactive
website for the analysis of protein secondary structure from circular dichroism
spectra." Bioinformatics 18.1 (2002): 211-212.
[2] Jain, Eric, et al. "Infrastructure for the life sciences: design and implementation of
the UniProt website." BMC bioinformatics 10.1 (2009): 1
[3] www.w3schools.com
[4] www.djangoproject.com
[5] www.python.org
[6] www.tutorialspoint.com/mysql/