Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Integration with Jupyter Notebook

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

    Prerequisites

    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:

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

    Run a simple Jupyter Notebook and Flexmonster sample from GitHub

    Step 1. Download the .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: