$.ajax({
    url: "../../controller/detalle.php?op=grafico-ResumenRecordAcademico",
    type: "post",
    success: function (respuesta) {
        var data = JSON.parse(respuesta);
        var temas = [];
        var valores = [];
        for (let index = 0; index < data.length; index++) {
            temas.push(data[index][1]);
            valores.push(data[index][0]);
        }
        var areaChartDataEdad = {
            labels: temas,
            datasets: [
                {
                    label: 'Asignatura',
                    backgroundColor: 'rgba(60,141,188,0.9)',
                    borderColor: 'rgb(0,0,0)',
                    pointRadius: true,
                    pointColor: 'rgba(242, 242, 242, 242)',
                    pointStrokeColor: 'rgb(242,242,242)',
                    pointHighlightFill: '#f2f2f2',
                    pointHighlightStroke: 'rgb(242,242,242)',
                    data: valores
                }
            ]
        }
        //EDAD
        var barChartData = $.extend(true, {}, areaChartDataEdad)
        var temp0 = areaChartDataEdad.datasets[0]
        barChartData.datasets[0] = temp0
        //---------------------
        //- STACKED BAR CHART -
        //---------------------
        var stackedBarChartCanvas = $('#ResumenRecordAcademico').get(0).getContext('2d')
        var stackedBarChartData = $.extend(true, {}, barChartData)
        var stackedBarChartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                        stacked: true,
                    }],
                yAxes: [{
                        stacked: true
                    }]
            }
        }

        new Chart(stackedBarChartCanvas, {
            type: 'bar',
            data: stackedBarChartData,
            options: stackedBarChartOptions
        })
    }
});