# Plotting graph using python and dispaying it using HTML

**URL:** <https://community.plotly.com/t/plotting-graph-using-python-and-dispaying-it-using-html/1342>\
**Category:** Plotly Fundamentals\
**Created:** [June 19, 2016, 9:26pm UTC](https://community.plotly.com/t/plotting-graph-using-python-and-dispaying-it-using-html/1342 "2016-06-19T21:26:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![crystal1942](https://avatars.discourse-cdn.com/v4/letter/c/3da27b/32.png) [@crystal1942](https://community.plotly.com/u/crystal1942)\
**Post date:** [June 19, 2016, 9:26pm UTC](https://community.plotly.com/t/plotting-graph-using-python-and-dispaying-it-using-html/1342/1 "2016-06-19T21:26:08Z")

</div>

Hi everyone  
I want build an offline application using plotly for displaying graphs . I am using python(flask) at the back end and HTML(javascript) for the front end . Currently I am able to plot the graph by sending the graph data as JSON object to front end and building the graph using plotly.js at the front end itself . But what I actually want is to build the graph at the server(backend ie python) side itself and then display the data in HTML . I have gone through the plotly documentation that builds the graph in python , but I dont know how to send the build graph to front end for display ☹  
Can someone help me on that ?  
PS : I want to build an offline application

---

<div class="post-metadata">

**Author:** ![YungGubba](https://avatars.discourse-cdn.com/v4/letter/y/c77e96/32.png) [@YungGubba](https://community.plotly.com/u/YungGubba)\
**Post date:** [June 20, 2016, 3:04pm UTC](https://community.plotly.com/t/plotting-graph-using-python-and-dispaying-it-using-html/1342/2 "2016-06-20T15:04:00Z")

</div>

Hey Crystal,

I am actually doing the same exact thing as you. I’ve found it is easier to boot the js portion of the project. Simply use the python module for plotly, and nest html within the .py file. You can use html structuring to manipulate where you want your graphs. Graphing is pretty straight forward, and you can keep it all offline with the offline mode.

Here is actually a link to a solution to plotting in offline mode if you are still confused. [Plotly Offline Mode Python Struggles](http://community.plotly.com/t/plotly-offline-mode-python-struggles/1338)

If you have any other quandaries, just lemme know. Like I said, it sounds like we are both trying to accomplish the same thing.

---

<div class="post-metadata">

**Author:** ![crystal1942](https://avatars.discourse-cdn.com/v4/letter/c/3da27b/32.png) [@crystal1942](https://community.plotly.com/u/crystal1942)\
**Post date:** [June 20, 2016, 4:40pm UTC](https://community.plotly.com/t/plotting-graph-using-python-and-dispaying-it-using-html/1342/3 "2016-06-20T16:40:30Z")

</div>

Thanks alot 😃

But still I am confused a little bit … I got the plotly output as div , But how will I actually include that to my original html file that I am using for front end .  
PS : My question might be childish , I am new to all this 🙂

---

<div class="post-metadata">

**Author:** ![YungGubba](https://avatars.discourse-cdn.com/v4/letter/y/c77e96/32.png) [@YungGubba](https://community.plotly.com/u/YungGubba)\
**Post date:** [June 20, 2016, 7:07pm UTC](https://community.plotly.com/t/plotting-graph-using-python-and-dispaying-it-using-html/1342/4 "2016-06-20T19:07:41Z")

</div>

No worries. So what you will have to do is actually use a .py file instead of .html. You will have to use a print statement with three "s. This is where your html will go. For instance

print("""

Hello World!

“”")  
(The html is being processed instead of showing up as text. The “Hello World!” is within a centered div tag.)

You can then lace python all throughout your html and pass your charts into certain structures like this:

myChart = plotly.offline.plot({charting info here})

print("""

(Starting Div Here)""") print(myChart) print("""
(Ending Div Here)""")

I’ve demonstrated putting the chart into a div tag, but this concept extends to all html. Tables work the same way. Just include your starting tags within the triple quote print statement, then print your python chart, and then close the tags in another triple quote print statement. So I guess in a way, this file will become your “original” html file.

Does that make sense?

---

<div class="post-metadata">

**Author:** ![crystal1942](https://avatars.discourse-cdn.com/v4/letter/c/3da27b/32.png) [@crystal1942](https://community.plotly.com/u/crystal1942)\
**Post date:** [June 22, 2016, 11:08pm UTC](https://community.plotly.com/t/plotting-graph-using-python-and-dispaying-it-using-html/1342/5 "2016-06-22T23:08:35Z")

</div>

Thanks alot YungGubba .  
Also have a look at :

> <https://stackoverflow.com/questions/37912260/plotting-graph-using-python-and-dispaying-it-using-html/37913631#37913631>

---

<div class="post-metadata">

**Author:** ![YungGubba](https://avatars.discourse-cdn.com/v4/letter/y/c77e96/32.png) [@YungGubba](https://community.plotly.com/u/YungGubba)\
**Post date:** [June 23, 2016, 1:59pm UTC](https://community.plotly.com/t/plotting-graph-using-python-and-dispaying-it-using-html/1342/6 "2016-06-23T13:59:30Z")

</div>

Ahh, yeah. That is pretty cool.

I am not using a framework, just cgi. So I don’t have templateing to work with. But if you are using flask, django, cherrypy, or any other framework, that is definitely the approach to use.

Glad I could help, and good luck with the rest of your project!
