This tutorial will help you integrate Flexmonster with Jupyter Notebook framework. Follow these steps to set up a simple project.
After that, choose one of the following options:
Step 1. Download a .zip
archive with the sample or clone it from GitHub with the following command:
git clone https://github.com/flexmonster/pivot-jupyter-notebook
Step 2a. If using the desktop version of the Jupyter Notebook, run it with the following command:
jupyter notebook
The Jupyter Notebook will be automatically launched in your browser.
Step 2b. Upload the Flexmonster_in_Jupyter_Notebook.ipynb
file to the Jupyter Notebook. The file will appear in the Files
tab.
Step 3. Run the sample project by selecting the Cell
section in the navigation bar and clicking on the Run all
option.
To integrate Flexmonster into a Jupyter Notebook app, follow these steps:
Step 1. If you don’t have an existing Python 3 notebook yet, open the Jupyter Notebook and create a new Python 3 file.
Step 2. Import the following libraries to work with HTML and JSON in Python, as well as Pandas for data manipulation:
from IPython.display import HTML
import json
import pandas as pd
Step 3. Define some data with Pandas and convert it to JSON using the orient="records"
parameter. This will present the data in the format that Flexmonster requires:
data = pd.DataFrame([["Lemon cake", 30, 4.99],["Apple pie", 45, 6.99], ["Raspberry jam", 70, 3.99]],index=['row 1', 'row 2', 'row 3'], columns=['Product', 'Quantity', 'Price per Item']) json_data = data.to_json(orient="records")
Step 4. Define Flexmonster:
flexmonster = {
"container": "pivotContainer",
"componentFolder": "https://cdn.flexmonster.com/",
"report": {
"dataSource": "json",
"data": json.loads(json_data)
}
}
Step 5. Convert the flexmonster
object to a JSON-formatted string:
flexmonster_json_object = json.dumps(flexmonster)
Step 6. Define a function to display Flexmonster in HTML (e.g., pivot
):
def pivot(flexmonster_json_object):
#the format function is needed to insert the Flexmonster object into the script
code = '''
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<h1>Flexmonster Integration with the Jupyter Notebook</h1>
<div id="pivotContainer"></div>
<script>
new Flexmonster({});
</script>
'''.format(flexmonster_json_object)
#convert the code string to HTML
return HTML(code)
Step 7. Display the component using the previously defined pivot
function:
pivot(flexmonster_json_object)
Step 8. Run the notebook by selecting the Cell
section in the navigation bar and clicking on the Run all
option.
The component will appear in an output cell right under the one containing the pivot
function call.
You may be interested in the following articles: