django dashboard

We already have django and django-dash installed

Create the project

django-admin startproject trello_dash

Modify the initial App

cd trello_dash


 vi trello_dash/

Find the section INSTALLED_APPS and make it look like this.



vi trello_dash/

Make the file look like this

from django.contrib import admin
from django.urls import path, include
from dashing.utils import router

urlpatterns = [


At this point we should be able to test the app.

In a command window

python runserver

The App Should start and we can access our dashboard using this url

New App

In Django we now need a new App.

python startapp disp1

We Now create a file in the disp1 directory called

# -*- encoding: utf-8 -*-
from dashing.widgets import NumberWidget
from random import randint

users = randint(50, 100)

class NewClientsWidget(NumberWidget):
    title = 'New Users'

    def get_value(self):
        global users
        users += 1
        return users

    def get_detail(self):
        global users
        return '{} actives'.format(users/3)

    def get_more_info(self):
        global users
        return '{} fakes'.format(users/10)

I now modify the in the disp1 App to look like this

from .widget import NewClientsWidget

With the new App having a Widget - we need up update the Main Projects

from disp1 import NewClientsWidget
router.register(NewClientsWidget, 'custom_widget')

Note: this is the Name of the class in the file

Static Files

We need to setup and configure the static directory. But first we need to create it.

In the Project directory (the one with create a directory

mkdir static

We now need to update the Application - to do this - we edit

These are the static settings

STATIC_URL = '/static/'

    os.path.join(BASE_DIR, 'static'),

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

Create a New Piece of JavaScript

In the static directory create a JavaScript File.

var myDashboard = new Dashboard();
myDashboard.addWidget('customWidget', 'Number', {
    getData: function () {
        var self = this;
        Dashing.utils.get('custom_widget', function(data) {
            $.extend(self.scope, data);
    interval: 3000


Nice Django Options

Staticfiles get put in the projects directory collectstatic