<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script defer src="/UdLosesSubjects/public/js/graphics.js"></script>
<link rel="stylesheet" href="/UdLosesSubjects/public/css/graphics.css">
<link rel="stylesheet" href="/UdLosesSubjects/public/colors.css">
<link rel="stylesheet" href="/UdLosesSubjects/public/menu.css">
<link rel="stylesheet" href="/UdLosesSubjects/public/app.css">
<script src="https://code.highcharts.com/highcharts-more.js"></script>


<!-- <div id="container" data-series='[{"y":29.9,"id":"min"},71.5,106.4,129.2,144.0,176.0,135.6,148.5,{"y":216.4,"id":"max"},194.1,95.6,54.4]'></div> -->



<div style="display: flex; flex-wrap: wrap; gap: 2em;">
    <div style="flex: 1 1 45%;">
        <div id="container" data-series='<?= json_encode($promedioPorPeriodo) ?>'></div>
    </div>
    <div style="flex: 1 1 45%;">
        <div id="container1" data-series='<?= json_encode($promedioPorPeriodo) ?>'></div>
    </div>
    <div style="flex: 1 1 45%;">
        <div id="container2" data-series='<?= json_encode($distribucionPorEstado) ?>'></div>
    </div>
    <div style="flex: 1 1 45%;">
        <div id="container3" data-series='<?= json_encode($distribucionPorEstado) ?>'></div>
    </div>
    <div style="flex: 1 1 45%;">
        <div id="container4" data-series='<?= json_encode($rendimientoPorMateria) ?>'></div>
    </div>
    <div style="flex: 1 1 45%;">
        <div id="container5" data-series='<?= json_encode($rendimientoPorMateria) ?>'></div>
    </div>
    <div style="flex: 1 1 45%;">
        <div id="container6" data-series='<?= json_encode($getTop5EstudiantesRendimiento) ?>'></div>
    </div>
    <div style="flex: 1 1 45%;">
        <div id="container7" data-series='<?= json_encode($getTop5EstudiantesRendimiento) ?>'></div>
    </div>
    <div style="flex: 1 1 45%;">
        <div id="container8" data-series='<?= json_encode($getTop5EstudiantesPeorRendimiento) ?>'></div>
    </div>
</div>



