This tutorial will help you integrate Flexmonster with Jupyter Notebook applications. Follow these steps to set up a simple project.
To run a simple application, you will need the Jupyter Notebook. For simplicity, you can use the web version of it, which doesn’t require anything to be installed on your computer. You can also follow this guide and install the Notebook yourself.
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: