Привет! Я пытаюсь создать диаграммы, показывающие количество данных для страны, пола и поля организации, которые будут меняться при фильтрации данных. Может ли кто-нибудь помочь мне с этим, я все еще новичок в веб-разработке, и это это мой первый проект. Я хочу показать это в index. html file
index. html
<!DOCTYPE html>
<html lang="en">
{% load widget_tweaks %}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard - SB Admin</title>
<link href="static/css/styles.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Start Bootstrap</a><button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button
><!-- Navbar Search-->
<!-- Navbar-->
<ul class="navbar-nav ml-auto ml-md-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">Settings</a><a class="dropdown-item" href="#">Activity Log</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="login.html">Logout</a>
</div>
</li>
</ul>
</nav>
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading">Core</div>
<a class="nav-link" href="index.html"
><div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
Dashboard</a
>
<div class="sb-sidenav-menu-heading">Interface</div>
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts"
><div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
Layouts
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div
></a>
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="layout-static.html">Static Navigation</a><a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a></nav>
</div>
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages"
><div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
Pages
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div
></a>
<div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth"
>Authentication
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div
></a>
<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">
<nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="login.html">Login</a><a class="nav-link" href="register.html">Register</a><a class="nav-link" href="password.html">Forgot Password</a></nav>
</div>
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError"
>Error
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div
></a>
<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">
<nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="401.html">401 Page</a><a class="nav-link" href="404.html">404 Page</a><a class="nav-link" href="500.html">500 Page</a></nav>
</div>
</nav>
</div>
<div class="sb-sidenav-menu-heading">Addons</div>
<a class="nav-link" href="charts.html"
><div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
Charts</a
><a class="nav-link" href="tables.html"
><div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
Tables</a
>
</div>
</div>
<div class="sb-sidenav-footer">
<div class="small">Logged in as:</div>
Start Bootstrap
</div>
</nav>
</div>
<div id="layoutSidenav_content">
<main>
<div class="container-fluid">
<h1 class="mt-4">Dashboard</h1>
<ol class="breadcrumb mb-4">
</ol>
<hr />
<form method="get">
<div class="well">
<h4 style="margin-top: 0">Filter</h4>
<div class="row">
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.first_name.label_tag }}
{% render_field filter.form.first_name class="form-control" %}
</div>
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.last_Name.label_tag }}
{% render_field filter.form.last_Name class="form-control" %}
</div>
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.country.label_tag }}
{% render_field filter.form.country class="form-control" %}
</div>
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.gender.label_tag }}
{% render_field filter.form.gender class="form-control" %}
</div>
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.trainer.label_tag }}
{% render_field filter.form.trainer class="form-control" %}
</div>
<div>
<legend class="col-form-label col-sm-2 pt-0">Organization:</legend>
{% for choice in filter.form.organization %}
<label class= "checkbox-inline">
{{ choice.tag}} {{ choice.choice_label }}
</label>
{% endfor %}
</div>
<div>
<legend class="col-form-label col-sm-2 pt-0">Session:</legend>
{% for choice in filter.form.host_participant %}
<label class= "checkbox-inline"></label>
{{ choice.tag}} {{ choice.choice_label }}
</label>
{% endfor %}
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</form>
<div class="card mb-4">
<div class="card-header"><i class="fas fa-table mr-1"></i>DataTable Example</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<th>Participant Code</th>
<th>First name</th>
<th>Surname</th>
<th>Country</th>
<th>Gender</th>
<th>Organization</th>
</tr>
</thead>
<tbody>
{% for participant in filter.qs %}
<tr>
<td>{{participant.country}}{{participant.id}}</td>
<td>{{ participant.first_name }}</td>
<td>{{ participant.last_Name }}</td>
<td>{{ participant.country }}</td>
<td>{{ participant.gender }}</td>
<td>{{ participant.get_organization }}</td>
<!--<td>{{participant.trainer}}</td>
<!---- <td>
{%for session in participant.host_participant.all %}
{{ session}}
{%empty%}
<em class="text-muted">No session</em>
{%endfor%}
</td>
<!--<td>${{ session.participant }}</td>-->
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<!-- Core plugin JavaScript-->
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="/static/vendor/chart.js/Chart.min.js"></script>
<script src="/static/vendor/datatables/jquery.dataTables.js"></script>
<script src="/static/vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- Custom scripts for all pages-->
<script src="/static/js/sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="/static/js/demo/datatables-demo.js"></script>
<script src="/static/js/demo/chart-area-demo.js"></script>
</body>
</html>
views.py class Index (ListView): template_name = 'index. html '
model = Participant
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['filter'] = ParticipantFilter(self.request.GET, queryset=self.get_queryset())
change_list_template = 'change_list_graph.html'
return context
filter.py
from .models import Participant, Session, Organization
import django_filters
from django import forms
class ParticipantFilter(django_filters.FilterSet):
first_name = django_filters.CharFilter(lookup_expr='icontains')
organization = django_filters.ModelMultipleChoiceFilter(queryset= Organization.objects.all(), widget=forms.CheckboxSelectMultiple)
host_participant = django_filters.ModelMultipleChoiceFilter(queryset = Session.objects.all(), widget=forms.CheckboxSelectMultiple)
class Meta:
model = Participant
fields = ['first_name', 'last_Name', 'country', 'gender','organization', 'trainer', 'host_participant' ]