plotly.io .write_html¶
plotly.io. write_html ( fig , file , config = None , auto_play = True , include_plotlyjs = True , include_mathjax = False , post_script = None , full_html = True , animation_opts = None , validate = True , default_width = ‘100%’ , default_height = ‘100%’ , auto_open = False , div_id = None ) ¶
Write a figure to an HTML file representation
- fig – Figure object or dict representing a figure
- file (strorwriteable) – A string representing a local file path or a writeable object (e.g. a pathlib.Path object or an open file descriptor)
- config (dictorNone(default None)) – Plotly.js figure config options
- auto_play (bool(default=True)) – Whether to automatically start the animation sequence on page load if the figure contains frames. Has no effect if the figure does not contain frames.
- include_plotlyjs (boolorstring(default True)) – Specifies how the plotly.js library is included/loaded in the output div string. If True, a script tag containing the plotly.js source code (~3MB) is included in the output. HTML files generated with this option are fully self-contained and can be used offline. If ‘cdn’, a script tag that references the plotly.js CDN is included in the output. The url used is versioned to match the bundled plotly.js. HTML files generated with this option are about 3MB smaller than those generated with include_plotlyjs=True, but they require an active internet connection in order to load the plotly.js library. If ‘directory’, a script tag is included that references an external plotly.min.js bundle that is assumed to reside in the same directory as the HTML file. If file is a string to a local file path and full_html is True, then the plotly.min.js bundle is copied into the directory of the resulting HTML file. If a file named plotly.min.js already exists in the output directory then this file is left unmodified and no copy is performed. HTML files generated with this option can be used offline, but they require a copy of the plotly.min.js bundle in the same directory. This option is useful when many figures will be saved as HTML files in the same directory because the plotly.js source code will be included only once per output directory, rather than once per output file. If ‘require’, Plotly.js is loaded using require.js. This option assumes that require.js is globally available and that it has been globally configured to know how to find Plotly.js as ‘plotly’. This option is not advised when full_html=True as it will result in a non-functional html file. If a string that ends in ‘.js’, a script tag is included that references the specified path. This approach can be used to point the resulting HTML file to an alternative CDN or local bundle. If False, no script tag referencing plotly.js is included. This is useful when the resulting div string will be placed inside an HTML document that already loads plotly.js. This option is not advised when full_html=True as it will result in a non-functional html file.
- include_mathjax (boolorstring(default False)) – Specifies how the MathJax.js library is included in the output html div string. MathJax is required in order to display labels with LaTeX typesetting. If False, no script tag referencing MathJax.js will be included in the output. If ‘cdn’, a script tag that references a MathJax CDN location will be included in the output. HTML div strings generated with this option will be able to display LaTeX typesetting as long as internet access is available. If a string that ends in ‘.js’, a script tag is included that references the specified path. This approach can be used to point the resulting HTML div string to an alternative CDN.
- post_script (strorlistorNone(default None)) – JavaScript snippet(s) to be included in the resulting div just after plot creation. The string(s) may include ‘’ placeholders that will then be replaced by the id of the div element that the plotly.js figure is associated with. One application for this script is to install custom plotly.js event handlers.
- full_html (bool(default True)) – If True, produce a string containing a complete HTML document starting with an tag. If False, produce a string containing a single element.
- animation_opts (dictorNone(default None)) – dict of custom animation parameters to be passed to the function Plotly.animate in Plotly.js. See https://github.com/plotly/plotly.js/blob/master/src/plots/animation_attributes.js for available options. Has no effect if the figure does not contain frames, or auto_play is False.
- default_width (numberorstr(default ‘100%’)) – The default figure width/height to use if the provided figure does not specify its own layout.width/layout.height property. May be specified in pixels as an integer (e.g. 500), or as a css width style string (e.g. ‘500px’, ‘100%’).
- default_height (numberorstr(default ‘100%’)) – The default figure width/height to use if the provided figure does not specify its own layout.width/layout.height property. May be specified in pixels as an integer (e.g. 500), or as a css width style string (e.g. ‘500px’, ‘100%’).
- validate (bool(default True)) – True if the figure should be validated before being converted to JSON, False otherwise.
- auto_open (bool(default True)) – If True, open the saved file in a web browser after saving. This argument only applies if full_html is True.
- div_id (str(default None)) – If provided, this is the value of the id attribute of the div tag. If None, the id attribute is a UUID.
Representation of figure as an HTML div string
Python HTML Reports in Python/v3
How to make HTML reports with Python, Pandas, and Plotly Graphs.
This page in another language
Note: this page is part of the documentation for version 3 of Plotly.py, which is not the most recent version.
See our Version 4 Migration Guide for information about how to upgrade.
Generate HTML reports with D3 graphs
using Python, Plotly, and Pandas
d3.js is an amazing JavaScript library for creating interactive, online graphics and charts. Plotly lets you create d3.js charts using Python, R, or MATLAB. This IPython notebook shows you how to embed these charts in an HTML report that you can then share by email or host on a website.
Once you’ve created your report generation script, you can automate it with a task scheduler like cron or Windows Task Manager, and email it to yourself and your team.
import plotly as py import pandas as pd import numpy as np from datetime import datetime from datetime import time as dt_tm from datetime import date as dt_date import plotly.plotly as py import plotly.tools as plotly_tools import plotly.graph_objs as go import os import tempfile os.environ['MPLCONFIGDIR'] = tempfile.mkdtemp() from matplotlib.finance import quotes_historical_yahoo import matplotlib.pyplot as plt from scipy.stats import gaussian_kde from IPython.display import HTML
Step 1: Generate 2 graphs and 2 tables¶
First graph: 2014 Apple stock data with moving average¶
Let’s grab Apple stock data using the matplotlib finance model from 2014, then take a moving average with a numpy convolution.
x = [] y = [] ma = [] def moving_average(interval, window_size): window = np.ones(int(window_size))/float(window_size) return np.convolve(interval, window, 'same') date1 = dt_date( 2014, 1, 1 ) date2 = dt_date( 2014, 12, 12 ) quotes = quotes_historical_yahoo('AAPL', date1, date2) if len(quotes) == 0: print "Couldn't connect to yahoo trading database" else: dates = [q[0] for q in quotes] y = [q[1] for q in quotes] for date in dates: x.append(datetime.fromordinal(int(date))\ .strftime('%Y-%m-%d')) # Plotly timestamp format ma = moving_average(y, 10)
Now graph the data with Plotly. See here for Plotly’s line plot syntax and here for getting started with the Plotly Python client.
xy_data = go.Scatter( x=x, y=y, mode='markers', marker=dict(size=4), name='AAPL' ) # vvv clip first and last points of convolution mov_avg = go.Scatter( x=x[5:-4], y=ma[5:-4], \ line=dict(width=2,color='red',opacity=0.5), name='Moving average' ) data = [xy_data, mov_avg] py.iplot(data, filename='apple stock moving average')
Save the plot URL — we’ll use it when generating the report later.
first_plot_url = py.plot(data, filename='apple stock moving average', auto_open=False,) print first_plot_url
Second graph: Scatter matrix of 2014 technology and CPG stocks¶
Let’s use the Pandas package and Plotly subplots to compare different tech. and CPG stocks in 2014.
This graph was inspired by this IPython notebook and GitHub user twiecki.
tickers = ['AAPL', 'GE', 'IBM', 'KO', 'MSFT', 'PEP'] prices = [] for ticker in tickers: quotes = quotes_historical_yahoo(ticker, date1, date2) prices.append( [q[1] for q in quotes] )
We have all the stock prices in a list of lists — use the code snippet below to convert this into a Pandas dataframe.
df = pd.DataFrame( prices ).transpose() df.columns = tickers df.head()
AAPL | GE | IBM | KO | MSFT | PEP | |
---|---|---|---|---|---|---|
0 | 77.746778 | 26.907695 | 182.770157 | 39.926650 | 36.354938 | 80.626950 |
1 | 77.352163 | 26.578632 | 181.429182 | 39.493584 | 36.212300 | 79.843327 |
2 | 75.193398 | 26.716354 | 182.712734 | 39.303899 | 35.870869 | 79.922217 |
3 | 76.158839 | 26.543525 | 181.968752 | 39.297371 | 35.362131 | 80.323900 |
4 | 75.389380 | 26.415215 | 184.837731 | 39.265478 | 35.043624 | 81.017502 |
Use Plotly’s get_subplots() routine to generate an empty matrix of 6×6 subplots. We’ll fill these in by plotting all stock ticker combinations against each other (ie, General Electric stock versus Apple stock)
fig = plotly_tools.get_subplots(rows=6, columns=6, print_grid=True, horizontal_spacing= 0.05, vertical_spacing= 0.05)
This is the format of your plot grid! [31] [32] [33] [34] [35] [36] [25] [26] [27] [28] [29] [30] [19] [20] [21] [22] [23] [24] [13] [14] [15] [16] [17] [18] [7] [8] [9] [10] [11] [12] [1] [2] [3] [4] [5] [6]
def kde_scipy(x, x_grid, bandwidth=0.4, **kwargs): """Kernel Density Estimation with Scipy""" # From https://jakevdp.github.io/blog/2013/12/01/kernel-density-estimation/ # Note that scipy weights its bandwidth by the covariance of the # input data. To make the results comparable to the other methods, # we divide the bandwidth by the sample standard deviation here. kde = gaussian_kde(x, bw_method=bandwidth / x.std(ddof=1), **kwargs) return kde.evaluate(x_grid) subplots = range(1,37) sp_index = 0 data = [] for i in range(1,7): x_ticker = df.columns[i-1] for j in range(1,7): y_ticker = df.columns[j-1] if i==j: x = df[x_ticker] x_grid = np.linspace(x.min(), x.max(), 100) sp = [ go.Histogram( x=x, histnorm='probability density' ), \ go.Scatter( x=x_grid, y=kde_scipy( x.as_matrix(), x_grid ), \ line=dict(width=2,color='red',opacity='0.5') ) ] else: sp = [ go.Scatter( x=df[x_ticker], y=df[y_ticker], mode='markers', marker=dict(size=3) ) ] for ea in sp: ea.update( name=' vs '.format(x_ticker,y_ticker),\ xaxis='x<>'.format(subplots[sp_index]),\ yaxis='y<>'.format(subplots[sp_index]) ) sp_index+=1 data += sp # Add x and y labels left_index = 1 bottom_index = 1 for tk in tickers: fig['layout']['xaxis<>'.format(left_index)].update( title=tk ) fig['layout']['yaxis<>'.format(bottom_index)].update( title=tk ) left_index=left_index+1 bottom_index=bottom_index+6 # Remove legend by updating 'layout' key fig['layout'].update(showlegend=False,height=1000,width=1000, title='Major technology and CPG stock prices in 2014') fig['data'] = data py.iplot(fig, height=1000, width=1000, filename='Major technology and CPG stock prices in 2014 - scatter matrix')