Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Integration with Django

    This tutorial will help you integrate Flexmonster with the Django framework.

    Prerequisites

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

    Step 2. Run your application:

    On Windows

    py manage.py runserver

    On macOS

    python manage.py runserver

    On 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

    python manage.py startapp dashboard

    On 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. Create a folder (e.g., templates/) for HTML templates in the root folder where pivot_django/ and dashboard/ are located. Next, 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 5. 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 6. 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 7. Go to pivot_django/settings.py and add a path to the templates/ folder 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 8. Run your application:

    On Windows

    py manage.py runserver

    On macOS

    python manage.py runserver

    On 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: