.
All the code has been uploaded to a GitHub repository. It also contains the steps you need to take to install and run the project locally on your PC. The project lives within a Python Virtual Environment..
Why would you want to do this tutorial.
If you want an additional layer of security, I suppose you could password protect the files, but there are services out there that can crack these for you. Also the solution is inelegant.
What about version control? If there is a regular report coming out, there has to be a version control system in place, by either having the version in the file name or embedded somewhere in the file.
The report that you want isn't available on MS Office. Ever tried doing a Gantt chart on MS Office using conditional formatting? Not fun. The charting library we will be looking at have a variety of reports many of which are not available in MS Office..
The Solution
The solution will be a basic dashboard that can be accessed using a web browser. It will be designed on top of the Python Django web framework. The reports will be created on the ChartJS.
Assumptions.
So Here We Go!
You need to start off with Python and Django already installed. This will keep the directory structure from being another level deeper than necessary. Your future self will thank you, because it is slightly better organized. Open a command prompt.
> pip install django > django-admin startproject dashboards > cd dashboards > virtuanenv venv > venv\scripts\activate (venv) > pip install django (venv) > python manage.py runserver
>>IMAGE.
(venv) > django-admin startapp charts
A URL dispatcher associates functions with requests that come in. A request in this case is when a browser (client) asks a web server for a page (resource). Python functions are associated with URLs.
from django.urls import path, include urlpatterns = [ path('', include('charts.urls')), path('admin/', admin.site.urls), ]
from django.urls import path from . import views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), ].
from django.http import HttpResponse from django.views import View class IndexView(View): def get(self, request): return HttpResponse('Hello Views')
Templates).
Another important point is, If you want to get a web page with all the design work already thought of, a front end design framework can save you lots and lots of time and tears. As a standard, I use the Bootstrap framework just because there is such a good support community out there. Bootstrap changes the default formatting of the styles in your webpage so that all you have to do is just write standard HTML and it will give you a professional looking output.
Setting Up Templates
You need to tell Django where to look for your template files. It would also help if all the template files were in the same place.
Create a
template directory in the
charts folder to hold the files that will be sent as pages to the webserver. To get Django to know where to look for the templates, these need to be added to
DIRS value in the
settings.py file.
'DIRS': [os.path.join(BASE_DIR, 'charts/templates')],
Once this is done, you can directly render template files from code. Create an index.html file in the templates directory. Put in the starter bootstrap template at
from django.shortcuts import render from django.views import View class IndexView(View): def get(self, request): return render(request, 'index.html')
ChartJs is a JavaScript charting library to implement high quality web based (SVG) charts. The charts are formatted for the web right out of the box. The library is loaded by including in the the
<HEAD>...</HEAD> section of the HTML page.
<head> ... <script src=""></script> ... </head>
Create an API View that will use chart data json).
from django.http import HttpResponse, JsonResponse from django.views import View import random class APIViewPie(View): def get(self, request): values = [random.randint(1,100) for _ in range(3)] labels = ['Red Lorries', 'Yellow Lorries', 'Blue Lorries'] label = "Distribution of Lorries" backgroundColor = ["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"] data = { 'datasets': [{ 'label': label, 'data': values, 'backgroundColor': backgroundColor, }], 'labels': labels } return JsonResponse(data)
The view returns data for an arbitrary report, but also returns random numbers so different values are output when the report is refreshed.
The report is embedded into the HTML through JavaScript. This is the most popular way to embed graphics that have been generated by JavaScript into HTML.
<canvas id="bar" width="300" height="300"></canvas> <script type="text/javascript"> var endpoint = '/api/bar'; $.ajax({ method: "GET", url: endpoint, success: function(data){ var ctx = document.getElementById("bar").getContext("2d"); options = {title: {display: true,text: "Lorries per Month"}, responsive: true,scales:{xAxes: [{stacked: true}],yAxes: [{stacked: true}]}} var myBarChart = new Chart(ctx, { type: 'bar',data: data,options: options,});}, error: function(error_data){ console.log("error"); console.log(error_data);}}); </script>.
Where do we go from here?.
Build more reports. There are a wide variety of reports to choose from and this is just one of many.
As I mentioned, all the code has been uploaded into the Github repository..