Reisacher-Forderung/templates/forderungen/dashboard.html

{% extends "base/base.html" %}
{% block content %}

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

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

<script>
  var CHART_COLORS = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
  };

  var ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['  < 2 Wochen',
        ' 2 - 4 Wochen',
        ' 4 - 6 Wochen',
        ' 6 - 12 Wochen',
        ' noch nicht fällig',
        '> 12 Wochen'],
      datasets: [{
        label: 'Verkauf',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: CHART_COLORS.red
      },
    {
        label: 'Service',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: CHART_COLORS.blue
      },
      {
        label: 'TZ',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: CHART_COLORS.green
      },{
        label: 'Sonstige',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: CHART_COLORS.yellow
      }]
    },
    options: {
      plugins: {
        title: {
          display: true,
          text: 'Chart.js Bar Chart - Stacked'
        },
      },
      responsive: true,
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true
        }
      }
    }
  });
</script>

{% endblock %}