Highchart Data not getting displayed after looping through data from database

Question

I am trying to get data from database and display it dynamically onto the highchart series data. For this i am using the following code:

$(function () {
                $.ajax({
                    url: "/WebApi/MIPResource_DistrictWise",
                    cache: false,
                    success: function (data) {
                        var categories ;
                        var i;
                        for (i = 0; i < data.length; i++) {
                            categories += data[i].DISTRICT_NAME;

                        }
                        alert(categories);

                        // var xx = [][][];
                        // var data = "";
                        // var i;
                        // for (i = 0; i < xx.length; i++) {
                        // data += xx[i];
                        // }

                        Highcharts.chart('MIPDistrictWise', {
                            chart: {
                                type: 'bar'
                            },
                            title: {
                                text: 'MIP Resource Requirement <br> (District Wise)'
                            },
                            xAxis: {
                                categories: categories
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Total Resources Required'
                                }
                            },
                            legend: {
                                reversed: true
                            },

                            plotOptions: {
                                series: {
                                    stacking: 'percent',
                                    borderWidth: 1,
                                    groupPadding: 0,//add here
                                    pointPadding: 0//add here

                                },
                                bar: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
                                        color: 'white'

                                    }
                                }
                            },
                            series: [{
                                name: 'TVET',
                                data: [5, 3, 4, 7, 2, 4, 7, 2]
                            }, {
                                name: 'IGGs',
                                data: [2, 2, 3, 2, 1, 4, 7, 2]
                            }, {
                                name: 'CIF',
                                data: [3, 4, 4, 2, 5, 4, 7, 2]
                            }]
                        });

                    }

                });
            });

In the "alert" it shows names of the districts correctly but there is an additional keyword of "undefined" in the start with them, also showing the following error in console panel:Uncaught TypeError: Cannot read property 'parts/Globals.js' of undefined.i want to display name of categories dynamically from the database.

score 0 · Answer 1 · answered May 06 '19 at 06:34

You need to check your loop

                        for (i = 0; i < data.length; i++) {
                        categories += data[i].DISTRICT_NAME;// Here some of the string output are undefined

                    }

So you might need to check the

data[i].DISTRICT_NAME

is undefined or not inside your loop. I'm attaching the link how to check undefined in javascript below.

JS: How to check if a variable is NOT undefined

Highchart Data not getting displayed after looping through data from database

1 Answers1