Chartjs-Array value is not being passed to the plugin

by

1👍

✅

Try change 

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true,
        scaleFontStyle: "bold",
        scaleFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif",
        scaleFontSize: 9,
        tooltipFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif",
        scaleShowHorizontalLines: false,
        scaleShowVerticalLines: false,
        barValueSpacing : 3,
        scaleLabel : "<%= value + '%' %>"
    });
};

to 

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true,
    scaleFontStyle: "bold",
    scaleFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif",
    scaleFontSize: 9,
    tooltipFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif",
    scaleShowHorizontalLines: false,
    scaleShowVerticalLines: false,
    barValueSpacing : 3,
    scaleLabel : "<%= value + '%' %>"
});

window.onload may have already triggered when your ajax success, so move it out of that function.

0👍

Try writing the contents of the window.onload = function() { // } just after the barchartData variable is defined. You don’t need the window.onload thing here. Your code will probably look like this:

$(document).ready( function() {
    var deudaColumns = ["deudor_name", "deuda"];
    var obj = "";
    $.getJSON( "getDeuda.php", function(data) {
        var DeudaArray = [];
        var json = JSON.stringify(data);
        obj = jQuery.parseJSON(json);

        var obj_total = obj.length;        
        for (var i = 0; i < obj_total ; i++ )
        {
            var lineaHija = [];
            for (var x = 0; x < deudaColumns.length; x++ ) {
                lineaHija.push(obj[i][deudaColumns[x]]);
            }
            DeudaArray.push(lineaHija);
        }
        console.log(DeudaArray[4][0]);

        var deudorLabels = [];
        for (var i = 0; i < DeudaArray.length; i++ )
        {
            deudorLabels.push(DeudaArray[i][0]);
        }

        console.log(deudorLabels);
        var deudordeudas = [];
        for (var i = 0; i < DeudaArray.length; i++ )
        {
            deudordeudas.push(DeudaArray[i][1]);
        }
        console.log(deudordeudas[1]);

        // Bar Chart
        var barChartData = {
            labels : [DeudaArray[0][0], DeudaArray[1][0], DeudaArray[2][0], DeudaArray[3][0], DeudaArray[4][0]],
            datasets : [
                    {
                        label: "Usuarios Que Tienen Deuda",
                        fillColor : "rgba(12,12,12,0.45)",
                        strokeColor : "rgba(12,12,12,0.65)",
                        highlightFill: "rgba(155,155,155,0.75)",
                        highlightStroke: "rgba(155,155,155,1)",
                        data : [DeudaArray[0][1], DeudaArray[1][1], DeudaArray[2][1], DeudaArray[3][1], DeudaArray[4][1]]
                    }
                ]

            };
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx).Bar(barChartData, {
                responsive : true,
                scaleFontStyle: "bold",
                scaleFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif",
                scaleFontSize: 9,
                tooltipFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif",
                scaleShowHorizontalLines: false,
                scaleShowVerticalLines: false,
                barValueSpacing : 3,
                scaleLabel : "<%= value + '%' %>"
            });
    });
});

Leave a comment