Integration with Jupyter Notebook

This tutorial will help you integrate Flexmonster with Jupyter Notebook framework. Follow these steps to set up a simple project.

Prerequisites

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.

After that, choose one of the following options:

Run a simple Jupyter Notebook and Flexmonster sample from GitHub
Integrate Flexmonster into a Jupyter Notebook application

Run a simple Jupyter Notebook and Flexmonster sample from GitHub

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.

Integrate Flexmonster into a Jupyter Notebook application

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.

What's next?

You may be interested in the following articles: