Charts

Preparations

Chart.js homepage: https://www.chartjs.org/docs/latest/

base.html: just before /head include Chart.js from a CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

---

Simple chart

views.py

import json
    
@login_required
def chart_simple(request):
    species = DBSpecies.objects.filter(species_owner=request.user)
    labels = [specie.species_name for specie in species]
    labels.append('NO SPECIE')
    data = [DBFossil.objects.filter(fossil_species=specie).count() for specie in species]
    data.append(DBFossil.objects.filter(fossil_owner=request.user, fossil_species__isnull=True).count())

    chart_data = {
        'labels': labels,
        'datasets': [{
            'label': 'Number of fossils in species',
            'data': data,
            'backgroundColor': '#00ADB5',
            'borderColor': '#EEEEEE',
            'pointBackgroundColor': 'white',
            'pointBorderColor': '#000000'
        }
        ]
    }

    return render(request, 'app_fossils/chart_simple.html', {'chart_data': json.dumps(chart_data)})

urls.py

path('chart_simple/', chart_simple, name='chart-simple'),

chart_simple.html

{% extends 'base.html' %}
{% block title %} Chart simple {% endblock %}
{% load static %}
{% block content %}

<canvas id="myChart"></canvas>

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chartData = {{ chart_data|safe }};
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Number of fossils in species'
                }
            },
        }
    });
</script>

{% endblock %}

---

Multi chart

views.py

import json
from django.db.models import Min, Max, Avg

@login_required
def chart_multi(request):
    species = DBSpecies.objects.filter(species_owner=request.user)
    fossil_ages = {'youngest': [], 'oldest': [],'average': []}

    for specie in species:
        fossils = DBFossil.objects.filter(fossil_species=specie)

        youngest_fossil = fossils.filter(fossil_age_in_years=fossils.aggregate(Min('fossil_age_in_years'))['fossil_age_in_years__min'])
        if youngest_fossil:
            fossil_ages['youngest'].append(float(youngest_fossil.first().fossil_age_in_years))
        else:
            fossil_ages['youngest'].append(None)

        oldest_fossil = fossils.filter(fossil_age_in_years=fossils.aggregate(Max('fossil_age_in_years'))['fossil_age_in_years__max'])
        if oldest_fossil:
            fossil_ages['oldest'].append(float(oldest_fossil.first().fossil_age_in_years))
        else:
            fossil_ages['oldest'].append(None)

        average_age = fossils.aggregate(Avg('fossil_age_in_years'))['fossil_age_in_years__avg']
        if average_age:
            fossil_ages['average'].append(float(average_age))
        else:
            fossil_ages['average'].append(None)

    labels = [specie.species_name for specie in species]

    chart_data = {
        'labels': labels,
        'datasets': [{
            'label': 'Oldest age',
            'data': fossil_ages['oldest'],
            'borderColor': '#0081C9',
            'backgroundColor': '#0081C9',
            'yAxisID': 'y',
        },
        {
            'label': 'Average age',
            'data': fossil_ages['average'],
            'borderColor': '#5BC0F8',
            'backgroundColor': '#5BC0F8',
            'yAxisID': 'y',
        },
        {
            'label': 'Youngest age',
            'data': fossil_ages['youngest'],
            'borderColor': '#86E5FF',
            'backgroundColor': '#86E5FF',
            'yAxisID': 'y',
        }
        ]
    }

    return render(request, 'app_fossils/chart_multi.html', {'chart_data': json.dumps(chart_data)})

urls.py

path('chart_multi/', chart_multi, name='chart-multi'),

chart_multi.html

{% extends 'base.html' %}
{% block title %} Chart multi {% endblock %}
{% load static %}
{% block content %}

<canvas id="myChart"></canvas>

<script>
    var chart_data = {{ chart_data|safe }};
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: chart_data,
        options: {
        scales: {
            yAxes: [{
            ticks: {
                beginAtZero: true
            },
            id: 'y',
            position: 'left',
            }]
        },
        plugins: {
            title: {
                display: true,
                text: 'Display oldest, average and youngest age values for each specie'
            }
        },
        }
    });
    </script>

{% endblock %}