CODEWITHSUNDEEP
javascripthtmlchart.js
Koushik J
Koushik J

Reputation: 662

Charts Js Stacked Bar Graph displays no values?

I have a javascript map like this..

var Severity = {
3M:[0, 3, 1, 0, 0],
5T:[0, 0, 1, 0, 0],
6S:[0, 0, 2, 0, 0]
}

And a JS function to call Stacked Chart Bar. Here I have a created a JS function which takes id and a map from jsp page. Map structure is same as above defined. I want to display graph where in x axis the data is the keys in map and in y axes is the stacked up data of 5 elements.

function StackedBar(id,Severity) {

    var label = Object.keys(Severity); // getting the labels

    var Critical = [];
    var High = [];
    var Medium = [];
    var Low = [];
    var Others = [];


    for(let i=0;i<label.length;i++){    //assigning the data to arrays created
        Critical.push(Severity[label[i]][0]);
        High.push(Severity[label[i]][1]);
        Medium.push(Severity[label[i]][2]);
        Low.push(Severity[label[i]][3]);
        Others.push(Severity[label[i]][4]);
    }

    var ctxL = document.getElementById(id).getContext('2d');   //id from the html canvas
    var chart = new Chart(ctxL, {
        type: 'bar',
        data: {
            labels: label, 
            datasets: [
                {
                label: 'Critical',
                data: Critical,
                backgroundColor: '#aa000e'
            },
                {
                label: 'High',
                data: High,
                backgroundColor: '#e65905'
            },
                {
                label: 'Medium',
                data: Medium,
                backgroundColor: '#e00ce6'
            },
                {
                label: 'Low',
                data: Low,
                backgroundColor: '#b8ab16'
            },
                {
                label: 'Others',
                data: Others,
                backgroundColor: '#00aaaa'
            }
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'right' 
            },
            scales: {
                xAxes: [{
                    stacked: true 
                }],
                yAxes: [{
                    stacked: true 
                }]
            }
        }
    });
}

Here graph displays and i get label in x axes...but graph values doesn't show and i get following error.. Cannot read property '0' of undefined

Html

<canvas id="overall"></canvas>
<script>StackedBar('overall',Overall);</script>

I wanted to know what went wrong and want me to help fix this issue...

Upvotes: 0

Views: 153

Answers (1)

Justin Otto
Justin Otto

Reputation: 584

I put the above together into one file and it works (although I had to change "Overall" to "Severity" in the call). So I'd expect that something you are using might not match your example above.

The version I used:

<html>
<body>
    <canvas id="overall"></canvas>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    var Severity = {
        "3M": [0, 3, 1, 0, 0],
        "5T": [0, 0, 1, 0, 0],
        "6S": [0, 0, 2, 0, 0]
    };
</script>
<script>
    function StackedBar(id, Severity) {

        var label = Object.keys(Severity); // getting the labels

        var Critical = [];
        var High = [];
        var Medium = [];
        var Low = [];
        var Others = [];


        for (let i = 0; i < label.length; i++) {    //assigning the data to arrays created
            Critical.push(Severity[label[i]][0]);
            High.push(Severity[label[i]][1]);
            Medium.push(Severity[label[i]][2]);
            Low.push(Severity[label[i]][3]);
            Others.push(Severity[label[i]][4]);
        }

        var ctxL = document.getElementById(id).getContext('2d');   //id from the html canvas
        var chart = new Chart(ctxL, {
            type: 'bar',
            data: {
                labels: label,
                datasets: [
                    {
                        label: 'Critical',
                        data: Critical,
                        backgroundColor: '#aa000e'
                    },
                    {
                        label: 'High',
                        data: High,
                        backgroundColor: '#e65905'
                    },
                    {
                        label: 'Medium',
                        data: Medium,
                        backgroundColor: '#e00ce6'
                    },
                    {
                        label: 'Low',
                        data: Low,
                        backgroundColor: '#b8ab16'
                    },
                    {
                        label: 'Others',
                        data: Others,
                        backgroundColor: '#00aaaa'
                    }
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'right'
                },
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });
    }
</script>
<script>StackedBar('overall', Severity);</script>

</html>

Upvotes: 1

Related Questions