Django uses pyecharts (5) django joins echarts_incremental update_fixed length

5. Django front-end and back-end separation_timed incremental update chart fixed-length data
1. Install djangorestframework
linux pip3 install djangorestframework
windows pip install djangorestframework
2. Create a new Django Project
$ django-admin startproject pyecharts_django_demo_5
Create an application

$ python manage.py startapp demo
Register the application in pyecharts_django_demo_5/settings.py

# pyecharts_django_demo_5/settings.py
INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
> ‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘demo’, # <— app name
‘rest_framework ‘,
]
Add ‘demo.urls’ in pyecharts_django_demo_5/urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include

urlpatterns = [
path(‘admin/’, admin.site.urls),
url(r’^demo/’, include(‘demo.urls’))
]

3. Write HTML code for drawing
Create a templates folder under the root directory folder first, create a new index.html, and the core of timing refresh lies in the setInterval method of html.
File directory situation
__pycache__ db.sqlite3 demo manage.py pyecharts_django_demo_5 templates
index.html

3. Write Django and pyecharts code to render the chart
Save the following code to demo/views.py
Backend code Changes need to be made accordingly

Edit the demo/urls.py file (if not, create a new one)

from django.conf.urls import url
from . import views

urlpatterns = [
url(r’^line/$’, views.ChartView.as_view(), name=’demo’),
url(r’^lineUpdate/$’, views.ChartUpdateView .as_view(), name=’demo’),
url(r’^index/$’, views.IndexView.as_view(), name=’demo’),
]

demo. view.
from django.shortcuts import render

# Create your views here.
import json
from random import randrange

from django.http import HttpResponse
from rest_framework.views import APIView

from pyecharts.charts import Line, Bar
from pyecharts import options as opts

cnt = 0 #Define how many sets of data there are when the line is initialized

# Create your views here.
def response_as_json(data):
json_str = json.dumps(data)
respOnse= HttpResponse(
json_str,
content_type=” application/json”,
)
response[“Access-Control-Allow-Origin”] = “*”
return response

def json_response(data, code=200):
data = {
“code”: code,
“msg”: “success”,
“data”: data ,
}
return response_as_json(data)

def json_error(error_string=”error”, code=500, **kwargs):
data = {
“code”: code,
“msg”: error_string,
> “data”: {}
}
data. update(kwargs)
return response_as_json(data)

JsOnResponse= json_response
JsOnError= json_error

def line_base() -> Line:
global cnt
cnt = 9
line = (
Line()
.add_xaxis(list(range(cnt + 1 )))
.add_yaxis(series_name=””, y_axis=[randrange(0, 100) for _ in range(10)])
.set_global_opts(
title_opts=opts.TitleOpts(title=” Dynamic data”),
xaxis_opts=opts.AxisOpts(type_=”value”,
name=”time”,
),
yaxis_opts=opts.AxisOpts(type_=”value”)
)
.dump_options()
)
return line

def bar_base() -> Bar:
c = (
Bar()
.add_xaxis([“shirt”, “cardigan”, “chiffon shirt”, ” Pants”, “High heels”, “Socks”])
.add_yaxis(“Business A”, [randrange(0, 100) for _ in range(6)])
.add_yaxis(“Business B”, [randrange(0, 100) for _ in range(6)])
.set_global_opts(title_opts=opts.TitleOpts(title=”Bar-Basic Example”, subtitle=”I am subtitle”))
.dump_options()
)
return c

class ChartView(APIView):
def get(self, request, *args, **kwargs):
# print(json. loads(line_base()))
return JsonResponse (json. loads(line_base()))

class ChartViewBar(APIView):
def get(self, request, *args, **kwargs):
return JsonResponse(json. loads(bar_base()))

class ChartUpdateView(APIView):
def get(self, request, *args, **kwargs):
global cnt
cnt = cnt + 1
print({” name”: cnt, “value”: randrange(0, 100)})
return JsonResponse({“name”: cnt, “value”: randrange(0, 100)})

class IndexView(APIView):
def get(self, request, *args, **kwargs):
return HttpResponse(cOntent=open(“./templates/index.html”) .read())
4. Run the project
$ python manage.py runserver
Use a browser to open http://127.0.0.1:8000/demo/index to access the service
http: //127.0.0.1:8000/demo/line returns data in json format