informaticaD4P-2017/templates/statistieken.phtml

<?php include '__header.phtml'; ?>
<a class="btn btn-default pull-left" href="rekeningen/<?= $rekeningnr ?>" role="button">Terug</a>
<canvas id="grafiek" height="100"></canvas>
<?php
if (!$statistieken) {
    ?>

    <div class="alert alert-danger" role="alert"><b>Fout!</b> Dit is niet een aan jouw account gekoppelde rekening.</div>
    <?php

} else {
    ?>

<a class="btn btn-default pull-left" href="rekeningen/<?= $rekeningnr?>" role="button">Terug</a>
<canvas id="myChart" height="100"></canvas>
<script>
    Chart.defaults.global.legend.display = false;//Geen legenda
    var grafiek = document.getElementById("grafiek");
    var myChart = new Chart(grafiek, {
        type: "line",
        options: {
            title: {
                display: true,
                text: "Saldo van de afgelopen maand"
            },
            scales: {
                xAxes: [{
                        type: "time",
                        unit: "day",
                        time: {
                            displayFormats: {
                                "day": "D MMM"
                            }
                        }
                    }],
                yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                }]
            }
        },
        data: {
            //Laad de dagen in
            labels: <?php echo json_encode($statistieken['x-as']); ?>,
            datasets: [{
                    label: "Saldo",
                    //Laad de saldo's in
                    data: <?php echo json_encode($statistieken['y-as']); ?>,
                    borderWidth: 2,
                    lineTension: 0, //Rechte lijnen
                    fill: false,
                    borderColor: "black",
                    pointRadius: 5,
                    pointBorderColor: "rgba(0, 0, 0, 0)", //Onzichtbare punten
                    pointBackgroundColor: "rgba(0, 0, 0, 0)",
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "black"
                }]
        }
    });

<?php 
} ?>
</script>
<?php include '__footer.phtml'; ?>