Introduction to plotly.js — an open source graphing library

Plotly.js is a library suited for JavaScript applications which make use of graphs and charts. There are a few reasons to consider using it for your next project:

  1. Plotly.js uses both D3.js and
  2. Plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps
  3. It is an open source library

It has more than 9900 stars on Github

There are 2 main concepts in Plotly :

1. Data
2. Layout


The Data object defines what we want to display in the chart (that is, the data). We define a collection of data and the specifications to display them as a trace. A Data object can have many traces. Think of a line chart with two lines representing two different categories: each line is a trace.


The Layout object defines features that are not related to data (like title, axis titles, and so on). We can also use the Layout to add annotations and shapes to the chart.

Let’s looks at the setup :

First, include the file from CDN

  <!-- Plotly.js -->
  <script src=""></script>

Next, let’s plot a line graph :


  <!-- Plotly.js -->
  <script src=""></script>

  <div id="myDiv">
	<!-- Plotly chart will be drawn inside this DIV -->


JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [19, 14, 12, 16],
  type: 'scatter',

var trace2 = {
  x: [12, 22, 23, 24],
  y: [15, 4, 10, 8],
  type: 'scatter'

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

Result :

Basic setup can be done with a file inclusion, a DOM element, and a script for plotting.
After the inclusion of the Plotly.js library in , we have defined an empty <div> to plot the graph. draws a new plot in the element.
We can have a Line and Scatter Plot charts by inclusion of mode in the trace variable.
The legend in a graph is linked to the data being graphically displayed in the plot area of the chart.
We can customize charts by using different options like legend name, marker color, marker size, line color, line width, chart title, mode, etc.

Example :


  <!-- Plotly.js -->
  <script src=""></script>

  <div id="myDiv">
	<!-- Plotly chart will be drawn inside this DIV -->


JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [11, 14, 12, 16],
  mode: 'markers',
  name : "Apple",
  marker: {
    color: 'rgb(219, 64, 82)',
    size: 13

var trace2 = {
  x: [12, 13, 14, 15],
  y: [17, 15, 10, 19],
  mode: 'lines',
  name : "Mangoes",
  line: {
    color: 'rgb(55, 128, 191)',
    width: 6

var trace3 = {
  x: [11, 21, 31, 41],
  y: [14, 19, 16, 13],
  mode: 'lines+markers',
  name : "grapes",
  marker: {
    color: 'rgb(128, 0, 128)',
    size: 9
  line: {
    color: 'rgb(128, 0, 128)',
    width: 2

var data = [trace1, trace2, trace3];

var layout = {
  title: 'Line and Scatter Styling Example'

Plotly.newPlot('myDiv', data, layout);

Result :

If we use markers as we have used in trace1 , notice that we only get points marked in the graph coordinates and do not see the connected line across all points

By now we have seen some examples of line, let’s quickly plot a bar chart using ‘bar’ as type.

Example :


  <!-- Plotly.js -->
  <script src=""></script>

  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

JS :

var data = [{
  x: ['lions', 'tigers','monkeys'],
  y: [21, 15, 24],
  type: 'bar'

Plotly.newPlot('myDiv', data);

Result :

Did you found this article helpful ? I try my best to write a deep dive article.

I had a pretty good experience with Plotly. What are your thoughts about it after this overview ? And what other tools do you use to generate charts for the web ? Share them in the comments!

I hope that you have found this useful. If so, be sure to like and share this blog post. Thank you for reading! 😀


Listed in Mozilla Contributors list

I am extremely happy to announce that I have been listed in the official world contributors list of Mozilla.

This is the list of people who have “made a significant investment of time, with useful results, into Mozilla project-governed activities.


Health Scan

Health Scan

Health Scan app is developed with medical emergencies in mind.
A user could input personal and medical information. This would then generate a medical QR code containing all the data.

Health Scan card :
Health Scan card contains a medical QR code which is very helpful during Emergency medical situations.
First responder/Doctors can easily scan the medical QR code and provide immediate medical help.
Health Scan card can help doctor to discover what allergies or medications the user is taking as well as other personal medical information thereby saving valuable time and providing better emergency care.

Important Features of Health Scan card :
1. Internet is not required to scan the medical QR code therefore it is very
beneficial in Rural Areas as well as on roads where there is no/limited
Internet facility available.
2. Medical QR code generated by health Scan app does not have any expiry.

Health Scan card can also be beneficial for Diabetic,Heart Patient and people with disabilities like : Blind, Autistic, Mentally/Physically challenged people.

I have developed this app under the guidance of Dr. Shishir Joshi and Microsoft R&D Head.

Road Accidents Statistics :

A Report on Road Accidents in India 2016, published by Transport Research wing under Ministry of Road Transport & Highways, Government of India, has revealed that at least 4,80,652 accidents in 2016, leading to 1,50,785 deaths. The number suggests that at least 413 people died everyday in 1,317 road accidents. Further breaking down the statistics, the data reveals that at least 17 deaths occurred in road accidents every hour.
Over 1,37,000 people were killed in road accidents in 2013 alone, that is more than the number of people killed in all our wars put together.

“India is no. 1 in road crash deaths and injuries in the world.”
Global Status Report on Road Safety, 2015 by World Health Organization.
And over 80% of these victims do not get emergency care in the first hour following the accident.
And this Results in : Preventable injuries leads to death.
50% of lives can be saved if people get basic care on time.

Media Coverage :

News Nation TV channel


Times of India

prasad seth Times of India
















Economic Times #ETHealthWorld 

prasad seth Economic Times

Maharashtra Times

prasad seth Maharashtra Times


sakaal front

prasad seth Sakal

Pudhari prasad seth Pudhari

Asian Association for Emergency Medical Services #EMS

prasad seth Asian Association for Emergency Medical Services

TeleMedicine Society of India

parasad seth tele mediciene society of india

Nasscom Pune


Medical Dialogues

prasad seth medical dialogues

Latest articles online

prasad seth latest articles online

Rediff News

prasad seth rediff news

Health Scan is appreciated by :

Microsoft R&D Head,
Mr. Bharat Agarwal (President- Vishwakarma University) ,                                                                  Dr. Sachin Sakhare ( Head-Computer Engineering,VIIT),                                                                     Mr. Ajit Patankar ( Advisor, Government of Maharashtra,Rajiv Gandhi Science & Technology Commission, Ex-Head,Technology Transfer & Collaboration Division, Bhabha Atomic Research Center)

Mr. Prasad Deore (Nasscom Regional head)

Screenshot_2018-10-04 VIIT student develops software for emergency medical services - Twitter Search(3)

Presented Health Scan at HeadStart Networks Startup Saturday Event


Health Scan cards were given to “Maharashtra Times” initiative “Helpline” in the presence of honorable Mr. Avinash Dharmadhikari (former IAS officer)


Video :

Reviews for Health Scan :

  • Dr. Shishir Joshi (Consulting Physician) :

        “ Health Scan is very useful for People travelling alone, Old age people,                 Diabetic  patients, Heart patients, etc.”

  • Ms. Sadhana Godbole (Managing Director-Prasanna Autism Centre) :

          “ Health Scan is helpful for all children’s but it is more useful for the       Autistic children. 50% autistic children cannot communicate, so if they have     Health Scan Card then during any emergency situation this can be helpful for    them.”

For more information contact : 9623134392

Email :

Data Safe App

Data Safe app

My new application Data Safe is now available for free download on Firefox Marketplace

This app allows one to choose files from phone and encrypt them with a pass phrase. One can even decrypt the encrypted file.

Note that the app does not encrypt the actual file, but a copy of it, so you would not lose the original. One can encrypt any file like documents, music, videos, pictures, etc.

This app have more than 15k+ downloads


You can download the app from:

                            prasad seth data safe

Article related to the app was featured in newspaper “Maharashtra Times”

prasad seth maharashtra times

MozoGeek Event at Zeal College of Engineering Pune

MozoGeek Event at Zeal College of Engineering

Event Name : Mozogeek

Agenda :

1.Web app development
2. Introduction to Firefox OS
3. Firefox OS Application development – Foxication
4. Hands on training on Appmaker

Day and Date :
Saturday, 22nd August

Venue :
Computer Department, ZES’s Zeal College of Engineering and Research, Narhe, Pune

Hashtag :  #mozogeekzfc

I started the session with an introduction to Mozilla and it’s mission. Then in the next session I  gave the introduction of Firefox OS. I explained the advantages of Firefox OS and why it is a great mobile OS,demo of FirefoxOS on simulator.

prasad seth firefox

Then in the next session I gave hands-on training to the attendees on how to make a web application. I explained them about Webmaker with hand-on training of Thimble and Appmaker. Some Remixes and makes were made by the attendees.

prasad seth firefox

I explained them about Firefox Marketplace… Attendees were asked to download different apps and review the apps which they liked.

prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox

Mozilla Pune Annual Community Meetup

Mozilla Pune Annual Community Meetup
Event Name: Mozilla Pune Annual Community Meetup
Time: 10am to 6pm
Date: 20th June
Venue: Red Hat, Pune
Hashtags:  #MozPune
Event agenda :
1. Introduction
2. Pune community analysis
3. Taskforce Introduction
4. Making inter-community communication better
5. Mozilla Pune 2015 Goals
6. Inter-community collaboration work
It was an awesome annual meetup at Red Hat,Pune with all Pune Community members
prasad seth mozilla prasad seth mozilla prasad seth mozilla prasad seth mozilla prasad seth mozilla

Mozilla Awarness Program @ VIIT Pune

Mozilla Awarness Program
Event Name: Mozilla Awareness Program @ VIIT Pune
Time: 1 am to 3 pm
Date: 11th July
Venue: Vishwakarma Institute of Information Technology,Pune
Hashtag : #viitFSA
Students in VIIT are enthusiastic for contributing to Mozilla as an FSA. This event helped them to know about Mozilla’s mission, web app development, open web and different ways of contributing to Firefox.
I started the event by giving an introduction about Firefox. Then in the next session I introduced students about Web app development and Firefox OS. Along with me Hrushikesh and Pooja introduced attendees about FSA program.
We registered the attendees for the FSA program. Attendees were very curious to know more about different Firefox products.
Mr. Kailas Patil Sir guided us for the event !!
prasad seth mozilla prasad seth mozilla prasad seth mozilla