Integration with Jupyter

This tutorial will help you integrate Flexmonster with Jupyter.

Prerequisites

• A Jupyter environment
  In this tutorial, JupyterLab is used.

Run the sample project from GitHub

Step 1. Download a .zip archive with the sample project or clone it from GitHub with the following command:

git clone https://github.com/flexmonster/pivot-jupyter-notebook

Step 2. Open a Jupyter environment (e.g., JupyterLab or Jupyter Notebook).

Step 3. Upload the Flexmonster_in_Jupyter_Notebook.ipynb file to the Jupyter environment. For example, in JupyterLab, select the Upload Files button:

As a result, the file manager will appear where you can select the necessary .ipynb file.

Step 4. Open the uploaded file.

Step 5. Run the project by selecting Run > Run All Cells in the navigation bar:

The component will appear in an output cell right under the code blocks.

Integrate Flexmonster into a Jupyter application

To integrate Flexmonster into a Jupyter application, do the following:

Step 1. Open a Jupyter environment (e.g., JupyterLab or Jupyter Notebook).

Step 2. Create a new Notebook or open the existing one. For example, in JupyterLab, you can create a new file by selecting the File > New > Notebook option in the navigation bar:

Step 3. Import the following libraries for working with HTML, JSON, and data:

from IPython.display import HTML
import json
import pandas as pd

Step 4. Load the flexmonster.js file:

HTML('<script src="https://cdn.flexmonster.com/flexmonster.js"></script>')

Step 5. Define data for Flexmonster using the pandas.DataFrame data structure. Then, convert data to a JSON string using the to_json method with the orient="records" parameter:

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 6. Create an object with the configurations for Flexmonster:

flexmonster_configs = {
  "container": "pivotContainer",
  "componentFolder": "https://cdn.flexmonster.com/",
  "toolbar": True,
  "report": {
    "dataSource": {
      "type": "json",
      "data": json.loads(json_data)
    },
  }
}

Notice the container property — it is a selector of the HTML element that will be used as a container for the component. We will create an HTML element with id="pivotContainer" in step 8.

Step 7. Convert the object with configurations into a JSON-formatted string (e.g., flexmonster_json_object):

flexmonster_json_object = json.dumps(flexmonster_configs)

Step 8. Define a function (e.g., pivot) that generates an HTML code with the Flexmonster instance:

def pivot(flexmonster_json_object):
# The format method is needed to pass
# the Flexmonster initialization parameters into the script
  code = '''
    <h1>Flexmonster integration with Jupyter Notebook</h1>
    <div id="pivotContainer"></div>
    <script>
      new Flexmonster({fm_init_parameters});
    </script>
  '''.format(fm_init_parameters = flexmonster_json_object)
  # Convert the code string to HTML
  return HTML(code)

Note Ensure that the <div> container’s id matches the value of the container parameter from step 6.

Step 9. Сall the previously defined function (e.g., pivot) and pass a JSON-formatted string with the Flexmonster configs (e.g., flexmonster_json_object) as a parameter:

pivot(flexmonster_json_object)

Step 10. Run the project by selecting Run > Run All Cells in the navigation bar:

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:

• Configure Flexmonster
• Customize the component
• Integrate with charting libraries