Bar Chart cannot read data and label in laravel

Question

I'm a beginner working with Chart.js and I'm having a problem with label and data. My chart didn't show up. This is my codes. I'm using laravel framework. And sqlite database.

This is my codes

var labelGrafik = [];
        for(var i=0; i<totunsur; i++){
            var arr1 = [];
            var ket = $('#unsur-'+i).val();
            arr1.push(ket);
            labelGrafik.push(arr1);
        }

        var dataGrafik = [];
        for(var i=0; i<totunsur; i++){
            var arr2 = [];
            var value = $('#mean-'+i).val();
            arr2.push(value);
            dataGrafik.push(arr2);
        }

        var barchart = document.getElementById('flot-bar2-chart-ikm');
        var chart = new Chart(barchart, {
        type: 'bar',
        data: {
            labels: labelGrafik,
            datasets: [{
            label: 'Data Penjualan',
            data: dataGrafik,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)'
            ],
            borderWidth: 2
            }]
        }
        });

Can anybody help?

Answer 1

I can see that your for loop looks malformed in terms of your use of the arr1 and arr2 arrays. Here are edits to your code

 var labelGrafik = []; for(var i=0; i<totunsur; i++){ var ket = $('#unsur-'+i).val(); labelGrafik.push(ket); } var dataGrafik = []; for(var i=0; i<totunsur; i++){ var value = $('#mean-'+i).val(); dataGrafik.push(value); } var barchart = document.getElementById('flot-bar2-chart-ikm'); var chart = new Chart(barchart, { type: 'bar', data: { labels: labelGrafik, datasets: [{ label: 'Data Penjualan', data: dataGrafik, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(255,99,132,1)', 'rgba(255,99,132,1)', 'rgba(255,99,132,1)', 'rgba(255,99,132,1)', 'rgba(255,99,132,1)', 'rgba(255,99,132,1)', 'rgba(255,99,132,1)' ], borderWidth: 2 }] } });