How to embed Plotly charts to your WordPress posts

Laptop with code
Related Content

Plotly is an amazing library widely used in Data Science and Machine Learning that provides online graphing, analytics, and statistics tools for individuals and collaboration, and scientific graphing libraries for Python, R, MATLAB, Perl, Julia, Arduino, and REST. This article provides a recipe on how to embed Plotly graphs into WordPress blog posts.

Plotly installation

Installation of Plotly to your Jupyter Notebook is easy, just run the following command in the notebook cell:

%pip install pandas
%pip install plotly

Embed a YouTube video in WordPress - How to guide using the new WordPress editor

Embed a YouTube video in WordPress ...
Embed a YouTube video in WordPress - How to guide using the new WordPress editor

Note: additionally we’ve installed Pandas – a fast, powerful, flexible, and easy-to-use open-source data analysis and manipulation tool, built on top of the Python programming language. We’ll use Pandas to store chart data points.

Plotly installation

Generating Plotly graph

Now, let’s generate a demo Plotly graph:

import pandas as pd
pd.options.plotting.backend = "plotly"

df = pd.DataFrame(dict(a=[1,3,2], b=[3,2,1]))
fig = df.plot()
fig.show()
Generating Plotly chart

Generating chart HTML block

As soon as you have a Plotly chart, that you want to share with the world, you can generate its HTML code for your blog post:

import plotly as plt
plt.offline.plot(fig, include_plotlyjs=False, output_type='div')
Generating chart HTML code

You can embed generated HTML <div> block not only to WordPress but to any HTML document by editing its HTML source.

Note: keep in mind that the code block might be very large if your chart contains many data points. We recommend saving such a Plotly graph as a PNG image and embedding it to the post as regular images.

To be able to simply save Plotly graphs as images, you need to install the kaleido module:

%pip install -U kaleido

Now, let’s save the graph as an image:

import os
import pandas as pd

pd.options.plotting.backend = "plotly"

df = pd.DataFrame(dict(a=[1,3,2], b=[3,2,1]))
fig = df.plot()
fig.show()

if not os.path.exists("images"):
    os.mkdir("images")

fig.write_image("images/my_chart.png")

You can find more information about other supported formats in the Static Image Export in Python article.

Embed Plotly chart to WordPress post or page

Now, edit your WordPress post and add a Custom HTML block to load the Plotly JS library:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
Insert Plotly - Custom HTML

Next, add another Custom HTML block to the place where you’d like to show the Plotly chart:

Insert Plotly - JS library and generated plot div

Finally, preview the post to see a nice and beautiful embedded chart, which your site visitors can play with:

Insert Plotly - Preview

Now your Data Science articles will be more interesting and interactive!

Summary

This article provided a recipe on how to embed your Plotly graphs into WordPress blog posts and pages.

How To Draw Stock Chart With Python
LIKE THIS ARTICLE?
Facebook
Twitter
LinkedIn
Pinterest
WANT TO BE AN AUTHOR OF ANOTHER POST?

We’re looking for skilled technical authors for our blog!

Table of Contents