Integration with Django

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

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

Integrate WebDataRocks Pivot Table into a new/existing Django application

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

Step 1. If you’re building an app from scratch, create a Django project by running the following commands:

django-admin startproject analytics_project
cd analytics_project

Step 2. Create a new application inside the project:

python manage.py startapp pivot_table_app

Step 3. Go to analytics_project/settings.py and register the app’s name to the INSTALLED_APPS list to make the app accessible at the project level:

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 you can always check the exact name of the application in the your_app/apps.py file.

Step 4. Add an app-specific template.

Start by creating a templates folder within the app’s directory (pivot_table_app). Here, we will keep the HTML templates for the application. Then, 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>

Note that you also can create templates at the project level.

Step 5. In pivot_table_app/views.py create 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')

Step 6. Open pivot_table_app/urls.py and map a URL pattern to the view in the urlpatterns list:

from django.urls import path
from . import views
urlpatterns = [
  path('', views.home, name='pivot_table'),
]

Step 7. Register the application’s URL patterns at the project level. Go to 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.

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

python manage.py runserver

The server runs on the 8000 port by default.

Step 9. Open http://localhost:8000/ in the browser and see the result: the pivot table is rendered on the page and filled with data.

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

Run a Django sample project with WebDataRocks Pivot Table

Step 1. Download or clone our sample project from GitHub:

git clone https://github.com/WebDataRocks/pivot-django
cd pivot-django

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

python manage.py runserver

Step 3. Open http://localhost:8000/ in the browser and see the result: the pivot table is rendered on the page.