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. To get our sample project, download it as ZIP or clone it 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