Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Plotting graph using python and dispaying it using HTML

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 :frowning:
Can someone help me on that ?
PS : I want to build an offline application

1 Like

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

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

Thanks alot :smiley:

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 :slight_smile:

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?

Thanks alot YungGubba .
Also have a look at :

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!