Create an Offline Interactive Report By Using Plotly

If your company doesn’t want to develop a dashboard but needs you to monitor complex data for a long time. Maybe this is a way to help you.

Published in
4 min readMar 8, 2021

--

Fig1 Offline Interactive Report

Why using Plotly to draw a graph?

There are many other tools out there that can create an interactive graph. However, I won’t debate which tool is better in this article. If someone interesting in it, you can check the link.

The advantages of offline interactive reports

  • A creation process can be fully automatic because interactive UI will let you easily compare each item by different conditions.
  • Offline interactive report no needs to launch a server, but the dashboard does. It is perfect for those who used to receive information by email.
  • Plotly's interactive features are helpful, such as a download button, hidden line, and zoom graph.
Fig2 Download
Fig3 Zoom Graph
Fig4 Hidden Line

Simple tutorial for creating an interactive report

First, I generate some fake data for this article. The code is shown below.

weblog dataset: 2000 rows × 4 columns
weblog dataset: 2000 rows × 4 columns / keyword(search term): 520 rows × 1 columns

Second, open the other script to import your package and load the dataset you generated before.

# plotly
import plotly.graph_objects as go
import plotly
from plotly.subplots import make_subplots
# basic package
import pandas as pd
import glob
import config
import numpy as np
import re
from datetime import date
import os
import pickle
# wordcloud
from wordcloud import WordCloud, STOPWORDS, ImageColorGenerator
# plot
import matplotlib.pyplot as plt
from matplotlib.font_manager import FontProperties
import base64
from io import BytesIO
from os import path
from PIL import Image
# from pivottablejs import pivot_ui
from IPython.display import IFrame
import json, io
# html
from IPython.display import HTML
df = pd.read_pickle(‘../Data/web_lod_data.pkl’)
df.head()

After doing this, you can start to think about what graph or table you want to display. I will give you two examples below.

Case 1: compare the usage of different web browsing devices by counting the number of actions

Our dataset has two websites, so we need to create a button that can switch to each other.

Fig5 Number of Actions

Case 2: create an interactive table to display the number of search term occurrences

Fig6 Interactive Table

Finally, open the new script and following the code below, and then you can embed the HTML files we created before to the basic HTML template quickly.

Conclusion

I think most of the time online dashboard is the better solution for interactive reports. But sometimes, it is probably not an optimal solution for your company. For example, If you are the only one who needs to monitor the data, creating an online dashboard is wasteful. The other case is your boss or supervisors are not used to explore data insight on the dashboard. Offline interactive reports may be a good option for you. It can add your view or commend inside the report readily.

My final thought is finding a suitable way to show your analysis result is an important thing you need to keep in mind. Otherwise, your suggestions or efforts may be difficult to be seen. Especially if you are a data scientist, your boss or supervisor may not have an engineering or data analysis background. The complete code is on my GitHub. Thanks for your time.

--

--