{"id":20893,"date":"2021-06-09T10:08:05","date_gmt":"2021-06-09T09:08:05","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=20893"},"modified":"2026-01-13T11:20:04","modified_gmt":"2026-01-13T11:20:04","slug":"python-angular-and-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/python-angular-and-highcharts\/","title":{"rendered":"Python, Angular, and Highcharts"},"content":{"rendered":"<p>In this article, we will create a bar chart to visualize the department table of student count.<br \/>\nWe will show you how to integrate <a href=\"https:\/\/www.djangoproject.com\/\" target=\"_blank\" rel=\"noopener\">Django<\/a>, a high-level Python Web framework,<br \/>\nSqlite(DataBase) with Angular Framework to populate the data using the official <a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\" target=\"_blank\" rel=\"noopener\">Highcharts Angular wrapper<\/a>.<\/p>\n<p>Let\u2019s get started.<\/p>\n<p>There are three main parts to create this project. The first part is to set up a Python environment with Python Web framework and Sqlite(DataBase). The second part is to make the app. The third part is to create an Angular project with Highcharts by using the official Highcharts Angular wrapper.<\/p>\n<h2>Set up a Python environment<\/h2>\n<p>There are 6 steps in the first part:<br \/>\n1. <a href=\"https:\/\/www.python.org\/downloads\/\" target=\"_blank\" rel=\"noopener\">Install python<\/a>.<\/p>\n<p>2. Create the local environment for project <code>D:\\Django-Angular-Highcharts&gt;python -m venv myenv<\/code><br \/>\nThe result is the <b>myenv<\/b> folder<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-21634\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/06\/08111603\/The-result-is-the-myenv-folder.jpg\" alt=\"The result is the myenv folder\" width=\"268\" height=\"107\" \/><\/p>\n<p>3. Activate the local python environment. Before installing or using packages in the virtual environment, activating the local python environment is necessary. Activating a virtual setting will put the virtual environment-specific python and pip executables into your shell&#8217;s PATH <code>D:\\Django-Angular-Highcharts&gt;myenv\\Scripts\\activate<\/code><\/p>\n<p>4. Install django with command <code>(myenv) D:\\Django-Angular-Highcharts&gt;pip install django<\/code><\/p>\n<p>5. Install the django rest framework. <code>(myenv) D:\\Django-Angular-Highcharts&gt;pip install djangorestframework<\/code><\/p>\n<p>6. Create the project(DjangoProject) <code>(myenv) D:\\Django-Angular-Highcharts&gt;django-admin startproject DjangoAPI<\/code><br \/>\nHere is a picture of the folder structure created by <b>django-admin<\/b>:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-21636\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/06\/08111854\/the-folder-structure-created-by-django-admin.jpg\" alt=\"The folder structure created by django-admin\" width=\"226\" height=\"217\" \/><\/p>\n<p>You can find below a short description of each folder:<\/p>\n<ul>\n<li><b>manage.py<\/b>: A command-line utility that lets you interact with this Django project in various ways. It allows us to create applications, work with databases, and start the development web server.<\/li>\n<li><b>__init__.py<\/b>: An empty file that tells Python that this directory should be considered a Python package.<\/li>\n<li><b>settings.py<\/b>: Settings\/configuration for this Django project. Django settings will tell you all about how settings work. We can use settings.py for registering any created applications, the static files\u2019 location, database configuration details, etc.<\/li>\n<li><b>Urls.py<\/b>: This could contain your application urls mapping , defining url mapping of your application.<\/li>\n<li><b>asgi.py<\/b>: An entry-point for ASGI-compatible web servers to serve your project.<\/li>\n<li><b>wsgi.py<\/b>: An entry-point for WSGI-compatible web servers to serve your project(Is used to help Django application communicates with the webserver)<\/li>\n<\/ul>\n<p>7. Now, it is time to check if the project was created successfully. To do that just run <code>(myenv) D:\\Django-Angular-HighCharts\\DjangoAPI&gt;python manage.py runserver<\/code>.<br \/>\nThen, check the result using this link <b>http:\/\/127.0.0.1:8000\/<\/b> on a browser. Here is the result in the folder <b>db.sqlite3<\/b> following the execution of the previous command:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-21639\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/06\/08112214\/the-folder-db.sqlite.jpg\" alt=\"The folder db.sqlite\" width=\"383\" height=\"244\" \/><\/p>\n<p>8. The last step in this section is to set up a database. Just download the <b>sqlite<\/b> <b>https:\/\/sqlitestudio.pl\/<\/b>, then Open <b>SQLiteStudio<\/b> and add the <b>db.sqlite<\/b> database<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-21640\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/06\/08112413\/db.sqlite-database.gif\" alt=\"db.sqlite database\" width=\"957\" height=\"647\" \/><\/p>\n<p><i><b>Remark<\/b><br \/>\nsqlite database is the default database, which comes by default in settings.py; however, feel free to use any other databases <\/i><\/p>\n<pre>DATABASES = {\r\n    'default': {\r\n        'ENGINE': 'django.db.backends.sqlite3',\r\n        'NAME': BASE_DIR \/ 'db.sqlite3',\r\n    }\r\n}<\/pre>\n<h2>Let\u2019s create the application<\/h2>\n<p>1. First, let\u2019s install CORS by running the pip <code>install django-cors-headers<\/code> command to allow the communication between Angular and Django, <b>django-cors-headers<\/b> and django rest framework need to be registered in <b>settings.py<\/b>, which is inside <b>DjangoApi<\/b> project.<\/p>\n<pre>INSTALLED_APPS = [\r\n    'django.contrib.admin',\r\n    'django.contrib.auth',\r\n    'django.contrib.contenttypes',\r\n    'django.contrib.sessions',\r\n    'django.contrib.messages',\r\n    'django.contrib.staticfiles',\r\n    'corsheaders',\r\n    'rest_framework'\r\n]<\/pre>\n<p>Don\u2019t forget to add <code>corsheaders.middleware.CorsMiddleware<\/code> in the middleware array and <code>CORS_ORIGIN_ALLOW_ALL=True<\/code> in the same file i.e <b>setting.py<\/b><br \/>\n<code>CORS_ORIGIN_ALLOW_ALL=True<\/code><\/p>\n<pre>MIDDLEWARE = [\r\n    'corsheaders.middleware.CorsMiddleware',\r\n    'django.middleware.security.SecurityMiddleware',\r\n    'django.contrib.sessions.middleware.SessionMiddleware',\r\n    'django.middleware.common.CommonMiddleware',\r\n    'django.middleware.csrf.CsrfViewMiddleware',\r\n    'django.contrib.auth.middleware.AuthenticationMiddleware',\r\n    'django.contrib.messages.middleware.MessageMiddleware',\r\n    'django.middleware.clickjacking.XFrameOptionsMiddleware',\r\n]<\/pre>\n<p>2. Let&#8217;s create our app inside DjangoAPI project <code>(myenv) D:\\Django-Angular\\DjangoAPI&gt;python manage.py<\/code> startapp Department<br \/>\nThen register the <code>Department.apps.DepartmentConfig<\/code>, into the DjangoApi project\u2019s <b>setting.py<\/b> file<\/p>\n<pre>INSTALLED_APPS = [\r\n    'django.contrib.admin',\r\n    'django.contrib.auth',\r\n    'django.contrib.contenttypes',\r\n    'django.contrib.sessions',\r\n    'django.contrib.messages',\r\n    'django.contrib.staticfiles',\r\n    'Department.apps.DepartmentConfig',\r\n    'corsheaders',\r\n    'rest_framework'\r\n]<\/pre>\n<p>3. Now, let\u2019s create a model for the application in models.py file of the application<\/p>\n<pre>from django.db import models\r\n class Departments(models.Model):\r\n \r\n    DepartmentId=models.AutoField(primary_key=True)\r\n    DepartmentName=models.CharField(max_length=100)\r\n    StudentCount=models.CharField(max_length=100)<\/pre>\n<p>4. Create the migrations for your app(Department) <code>(myenv) D:\\Django-Angular\\DjangoAPI&gt;python manage.py makemigrations Department<\/code><br \/>\nThe result is an <b>initial.py<\/b> file inside the migrations folder to track will go into the database.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-21643\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/06\/08113621\/result-of-the-migrations-for-your-app.jpg\" alt=\"result of the migrations for your app\" width=\"269\" height=\"219\" \/><\/p>\n<p>The same command will generate a database with the name \u201ddb\u201d with no tables.<\/p>\n<p>5. Commit those changes to the database <code>(myenv) D:\\Django-Angular\\DjangoAPI&gt;python manage.py migrate Department<\/code><br \/>\nYou will see two tables, one for the migrations and the one for our app.<\/p>\n<p>6. Create <b>serializers.py<\/b> to serialize the python data model to any data type. We imported <b>serializers<\/b> from <b>rest_framework<\/b> and <b>Departments<\/b> from <b>Department.model<\/b><\/p>\n<pre>from rest_framework import serializers\r\nfrom Department.models import Departments\r\n \r\nclass DepartmentSerializer(serializers.ModelSerializer):\r\n    class Meta:\r\n        model=Departments\r\n        fields=('DepartmentId','DepartmentName','StudentCount')<\/pre>\n<p>7. Create the views for the application in <b>views.py<\/b>. The data is serialized and converted into JSON format.<\/p>\n<pre>from django.shortcuts import render\r\nfrom django.views.decorators.csrf import csrf_exempt\r\nfrom rest_framework.parsers import JSONParser\r\nfrom django.http.response import JsonResponse \r\nfrom Department.models import Departments\r\nfrom Department.serializers import DepartmentSerializer\r\n \r\n# Create your views here.\r\n@csrf_exempt\r\ndef departmentApi(request,id=0):\r\n    if request.method=='GET':\r\n        departments=Departments.objects.all()\r\n        department_serializer=DepartmentSerializer(departments,many=True)\r\n        return JsonResponse(department_serializer.data,safe=False)<\/pre>\n<p>8. Let\u2019s create the <b>urls.py<\/b> file; this file is in charge of mapping the project\u2019s routes and paths. In this case, the purpose of the <b>utls.py<\/b> is to fetch the data department<\/p>\n<pre>from django.conf.urls import url\r\nfrom Department import views\r\nfrom django.conf.urls.static import static\r\nfrom django.conf import settings\r\nurlpatterns=[\r\n    url(r'^department\/$',views.departmentApi)\r\n   ]<\/pre>\n<p>9. To configure any URL, it is necessary to register the <b>url.py<\/b> of app(Department) into the main project(DjangoAPI). Keep in mind that DjangoAPI is a project, and Department is the application.<\/p>\n<pre>url(r'^',include('Department.urls'))\r\nfrom django.contrib import admin\r\nfrom django.urls import path\r\nfrom django.conf.urls import url,include\r\n \r\nurlpatterns = [\r\n    path('admin\/', admin.site.urls),\r\n    url(r'^',include('Department.urls'))\r\n]<\/pre>\n<h2>Set up an Angular project with Highcharts<\/h2>\n<p>1. To set up an Angular project, follow angular instructions <a href=\"https:\/\/angular.io\/guide\/setup-local\" target=\"_blank\" rel=\"noopener\">Setting up the local environment and workspace<\/a>. To visualize the data, include the official <a href=\"https:\/\/github.com\/highcharts\/highcharts-angular\" target=\"_blank\" rel=\"noopener\">Highcharts Angular wrapper<\/a> Highcharts Angular wrapper, then import the Highcharts module:<\/p>\n<ol>\n<li>To install highcharts-angular and the Highcharts library, just run the following instruction: <code>npm install highcharts-angular --save<\/code><\/li>\n<li>To import the package go to app.module.ts file and import the module <b>HighchartsChartModule<\/b> from the <b>highcharts-angular<\/b> package.<\/li>\n<li>To build Highcharts charts, install Highcharts: <code>npm install highcharts --save<\/code><\/li>\n<\/ol>\n<p>Next, in the <b>app.component.ts<\/b>, in top lines where other imports are, add another one for <code>Highcharts:import * as Highcharts from 'highcharts';<\/code><\/p>\n<p><i><b>Remark<\/b><br \/>\nThe Django development server is running on http:\/\/127.0.0.1:8000 (<a href=\"https:\/\/gist.github.com\/588e74ba15c6a17ae8de6e2836f49da2.git\" target=\"_blank\" rel=\"noopener\">check the code on Github<\/a>) <\/i><\/p>\n<p>2. The last step is to initialize the chart data and options by adding the <b>highcharts-chart<\/b> directive and some property binding into <b>app.component.html<\/b>:<\/p>\n<pre>&lt;highcharts-chart *ngIf=\"chartOptions\"\r\n  [Highcharts]=\"Highcharts\"\r\n  [options]=\"chartOptions\"\r\n  style=\"width: 100%; height: 400px; display: block;\"&gt;\r\n&lt;\/highcharts-chart&gt;<\/pre>\n<p>And here is the final result:<br \/>\nAs you can see on the GIF below, the bar chart gets the data from the database<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-21650\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/06\/08132024\/Final-result.gif\" alt=\"The final result\" width=\"849\" height=\"360\" \/><\/p>\n<p>Well, that is it. Now, you know how to combine Django, a high-level Python Web framework,<br \/>\nSqlite(DataBase) with Angular Framework, and the official Highcharts Angular.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create interactive charts with python, Django, Angular, and Highcharts<\/p>\n","protected":false},"author":249,"featured_media":21950,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[822,1031,885],"coauthors":[779],"class_list":["post-20893","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-angular","tag-javascript","tag-python"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/249"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20893"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20893\/revisions"}],"predecessor-version":[{"id":29348,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20893\/revisions\/29348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21950"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20893"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}