We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Integration with Django

    In this tutorial, you can learn how to integrate Flexmonster with the Django framework.

    Note The tutorial describes how to integrate Flexmonster using the Django templates. If you are using Django only for the back end, see how to integrate Flexmonster with JavaScript or with front-end frameworks.

    Prerequisites

    Note Python 3 and Django versions must be compatible. Check out the version compatibility guide.

    Run a simple Django and Flexmonster sample 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-django && cd pivot-django

    Step 2. Run the following command:

    On Windows

    py manage.py migrate

    On macOS or Ubuntu/Linux

    python3 manage.py migrate

    This will create database tables for the default Django apps used in the project. Learn more about the migrate command.

    Step 3. Run your application:

    On Windows

    py manage.py runserver

    On macOS or Ubuntu/Linux

    python3 manage.py runserver

    To see the result, open http://localhost:8000/ in your browser.

    The application can be shut down manually with Ctrl + C.

    Integrate Flexmonster into a Django application

    To integrate Flexmonster into a Django app, follow the steps below:

    Step 1. If you don’t have a Django project yet, create it by running the following commands in the console:

    django-admin startproject pivot_django
    cd pivot_django

    Step 2. In the project, create a new app with the following command:

    On Windows

    py manage.py startapp dashboard

    On macOS or Ubuntu/Linux

    python3 manage.py startapp dashboard

    Step 3. Open the pivot_django/settings.py file and add the app’s configuration class to the INSTALLED_APPS setting. The app’s configuration class can be found in dashboard/apps.py:

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'dashboard.apps.DashboardConfig',
    ]

    Step 4. Run the following command:

    On Windows

    py manage.py migrate

    On macOS or Ubuntu/Linux

    python3 manage.py migrate

    This will create database tables for the applications listed in the INSTALLED_APPS setting. Learn more about the migrate command.

    Step 5. Create a folder (e.g., templates/) for HTML templates in the root folder where pivot_django/ and dashboard/ are located.

    Step 6. Go to pivot_django/settings.py again and add a path to the folder for HTML templates (e.g., templates/) to the DIRS list in TEMPLATES:

    • If the pathlib library is used to manipulate paths:
      'DIRS': [BASE_DIR.joinpath('templates')],
    • If the os.path module is used to manipulate paths:
      'DIRS': [os.path.join(BASE_DIR, 'templates')],

    Step 7. In the folder for HTML templates (e.g., templates/), create an HTML file (e.g., index.html) and add Flexmonster to it:

    <h1>Flexmonster integration with Django</h1>
    <div id="pivotContainer"></div>
    <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
    
    <script>
    	let pivot = new Flexmonster({
    		container: "pivotContainer",
    		componentFolder: "https://cdn.flexmonster.com/",
    		toolbar: true,
    		report: {
    			dataSource: {
    				filename: "https://cdn.flexmonster.com/data/data.json"
    			}
    		}
    	});
    </script>

    Step 8. Add the created HTML page to the app’s views. Navigate to dashboard/views.py and insert the following index function there:

    def index(request):
    return render(request, 'index.html')

    Step 9. Open pivot_django/urls.py and add the path('', views.index, name='index'), line to the urlpatterns:

    from django.contrib import admin
    from django.urls import path
    from dashboard import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', views.index, name='index'),
    ]

    Step 10. Run your application:

    On Windows

    py manage.py runserver

    On macOS or Ubuntu/Linux

    python3 manage.py runserver

    To see the result, open http://localhost:8000/ in your browser.

    The application can be shut down manually with Ctrl + C.

    What’s next?

    You may be interested in the following articles: