This guide will walk you through the integration of WebDataRocks Pivot Table with Django – a Python web development framework. Upon completion, you will get a Django application empowered with reporting functionality. 

Prerequisites

Get the latest or specific-release version of Python and install Django on your machine. We recommend using the latest versions of both Python and Django to benefit from their newest features. 

See the Python-Django compatibility matrix to know which Python version you can use with a specific version of Django. Note that the latest versions of Django can be used only with Python 3. 

Ways to integrate WebDataRocks with Django

  1. Integrate WebDataRocks Pivot Table with a new/existing Django application
  2. Run a ready-to-use Django project sample with WebDataRocks Pivot Table

Integrate WebDataRocks Pivot Table with a new/existing application

To successfully add WebDataRocks Pivot Table to a Django application, follow the next steps:

  1. If you’re building an app from scratch, first, create a Django project by running the following command:
    django-admin startproject analytics_project
    

    And navigate to the directory where it is located:

    cd analytics_project
    
  2. Create a new application inside the project:

    python manage.py startapp pivot_table_app
    

    To make the further configuration process more convenient, open the project in the IDE of your choice. 

  3. The app needs to be registered at the project level to be accessible. Go to analytics_project/settings.py and append the app’s name to the INSTALLED_APPS list:
    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'pivot_table_app',
    ]
    

    Note that the exact name of the application can always be checked in the your_app/apps.py file.

  4. There are two possible approaches to templates creation:

    1. Creating app-specific templates

    2. Creating templates at the project level

    Let’s follow the app-specific approach. Create a templates folder within the app’s directory (pivot_table_app). Here we will keep the HTML templates for the application. Create a new HTML file (e.g., home.html). Add WebDataRocks dependencies, namely scripts and styles, within the <head> or <body> elements of the HTML page. Within the <script> tags, initialize the pivot table component and set a basic report according to the structure of your data:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>WebDataRocks Example</title>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
    </head>
    <body>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <div id="pivot-container"></div>
    <script>
    var pivot = new WebDataRocks({
            container: "pivot-container",
            toolbar: true,
            width: "100%",
            height: 600,
            report: {
                "dataSource": {
                    "dataSourceType": "csv",
                    "filename": "https://cdn.webdatarocks.com/data/data.csv"
                },
                "slice": {
                    "rows": [
                        {
                            "uniqueName": "Category"
                        }
                    ],
                    "columns": [
                        {
                            "uniqueName": "Country"
                        },
                        {
                            "uniqueName": "Measures"
                        }
                    ],
                    "measures": [
                        {
                            "uniqueName": "Price",
                            "aggregation": "sum"
                        }
                    ]
                }
            }
        }
    );
    </script>
    </body>
    </html>
    
  5. In pivot_table_app/views.pycreate a view – a function that accepts a web request and returns a rendered HTML template as a web response:

    from django.shortcuts import render
    def home(request):
       return render(request, 'home.html')
    
  6. To map a URL pattern to the view, open pivot_table_app/urls.py and add the corresponding URL pattern to the urlpatterns list:

    from django.urls import path
    from . import views
    urlpatterns = [
      path('', views.home, name='pivot_table'),
    ]
    
  7. Register the application’s URL patterns at the project level. Go analytics_project/urls.py and append a new URL pattern:

    from django.contrib import admin
    from django.urls import path, include
    urlpatterns = [
       path('admin/', admin.site.urls),
       path('', include('pivot_table_app.urls')),
    ]
    

    This line of code makes all the URL patterns from pivot_table_app accessible by ‘/’ within the project.

  8. Open the command line and start the Django development server locally:

    python manage.py runserver

    Unless specified otherwise, the server runs on 8000 port by default. 

  9. Open http://localhost:8000/ in the browser and see the result: the pivot table is rendered on the page and filled with data. Slice and dice the fields to experience the full power of reporting. To stop the Django development server, press Ctrl+C.

Run a Django project sample with WebDataRocks Pivot Table

  1. Download the project as a .zip archive or clone the sample from GitHub:
    git clone https://github.com/WebDataRocks/pivot-django
    cd pivot-django
  2. Open the command line and start the Django development server locally:
    python manage.py runserver
  3. Open http://localhost:8000/ in the browser and see the result: the pivot table is rendered on the page. Add your data, configure a report, and start gaining insights right away.

    To stop the Django development server, press Ctrl+C.

See also