How to Embed Plotly Graphs in Websites
How to Embed Plotly Graphs in Websites
This tutorial content is going to teach you how to take your interactive plotly graphs and embed them into your wordpress blog, or any blog no matter where your blog is hosted.
Once you have created your plotly graph, putting it in your blog post is easier than you think. Here is how to do it.
There are 2 parts to this process:
Part 1: Take your plotly graph from your python notebook and put it on the plotly website
Part 2: Get the iframe embed code or html code for the graph from the plotly website and use it to embed the graph.
Let’s begin with PART 1:
Step 1: Sign up for a plotly account
Step 2: Install Chart Studio
- To install plotly chart studio universally on your computer, use this code in the terminal: pip install chart_studio
- To install plotly chart studio in anaconda environment, go to conda terminal and type: conda install -c plotly chart-studio
Step 3: Import chart studio, chart studio plotly, and chart studio tools using the following lines of code.
Step 4: Define your username and api_key using the following lines of code.
- Username = your plotly account user name
- API-Key = your plotly account API key
- To access your API key and username, Go to profile name drop down menu –> click on settings –> API Keys –> Regenerate API key. Copy your API key.
- HINT: Everytime you regenerate API key, the previous API key becomes invalid. So be careful clicking that button repeatedly.
Step 5: Log into your plotly account from your python notebook using your username and api key with the following lines of code.
Step 6: Take the graph that you want to make available online and set it equal to a variable like this (the variable name here is “spiral”)
Step 7: Upload your graph online to your plotly account using this line of code.
- Spiral = the graph that I want uploaded online
- Filename = what you want to name the file
- Auto_open = True/False.
- When auto_open is True, the file will automatically open in your browser when you run the code cell.
- When auto_open is False, the file will not automatically open in your browser when you run the code cell.
HINT: Set auto_open to True the first time so that you can see that file in your browser as soon as you run the code cell and the graph is uploaded. Then set it to False afterward so that when you open the notebook next time and run the code cell, you won’t automatically open the file in your browser again (can get annoying).
Printed in your notebook is the link where you can find the file you just uploaded.
You can copy the link and see the uploaded graph or you can simply proceed to the following steps.
Step 8: Go to your plotly account dashboard, click on Myfiles, and you should see the file you just uploaded and the data associated with that file.
Step 9: Hover over the graph you just uploaded –> Click on viewer –> Click on the tiny code icon on the bottom right side of the graph.
Step 10: Choose how you wish to embed your files. For this tutorial, we will just use iframe embedding option. Copy the code you are presented with or download the file containing the code.
NOW, it is time to embed the plotly graph on your blog. This tutorial will be using WordPress as an example. If you use another platform to host your blog content, the process of how to embed the plotly graph is similar, may not be exact, but won’t be drastically different. Read through the next process to see how it is done in wordpress, and this will give you an idea of how to implement the same thing on your blogging platform.
Step 11: If you are in wordpress blog platform, click on add HTML block.
Step 12: paste the iframe code into the HTML block.
Step 13: Click on preview to preview the live interactive plotly graph.
Step 14: You can edit the width and height of the graph to fit your needs.
Step 15: Join my data science community
- To get access to the TUTORIAL PYTHON NOTEBOOK CODE that shows you how to do everything on this tutorial blog post,
- To ask data science questions to me and other data scientists,
- To have access to a community of data scientists that will help you debug your code and help you with your data science projects, and
- To get access to other data science tutorial content and data science courses.
Step 16: Follow me on twitter
Step 17: Join my Email list below to receive data science tutorial content.
Step 18: Let me know what you think about this tutorial in the comment section below
3 Comments
Thank you for this tutorial! I appreciate the detailed and step-by-step approach 🙂
Love it worked like a charm much thanks!!!
Wonderful ! Thanks a lot !
This saved a lot of my time 🙂