Documentation menu
JS
JS React Angular Vue

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 3 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 3 version you can use with a specific version of Django.

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

On Windows

py manage.py startapp pivot_table_app

On macOS or Ubuntu/Linux

python3 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. 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 apps from the INSTALLED_APPS.

Step 5. 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 6. 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 7. 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 8. 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 9. Open the command line and start the Django development server locally:

On Windows

py manage.py runserver

On macOS or Ubuntu/Linux

python3 manage.py runserver

The server runs on the 8000 port by default.

Step 10. 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. 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. Learn about the migrate command.

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

On Windows

py manage.py runserver

On macOS or Ubuntu/Linux

python3 manage.py runserver

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

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

See also