Uncaught TypeError: Cannot read property 'label' of undefined when No Data In Graphs

Question

Error:

  morris.min.js:6 Uncaught TypeError: Cannot read property 'label' of undefined
at d.b.Bar.d.hoverContentForRow (morris.min.js:6)
at d.b.Bar.d.onHoverMove (morris.min.js:6)
at morris.min.js:6
at d.b.EventEmitter.a.fire (morris.min.js:6)
at HTMLDivElement.<anonymous> (morris.min.js:6)
at HTMLDivElement.dispatch (jquery.min.js?v=1.6.10:3)
at HTMLDivElement.r.handle (jquery.min.js?v=1.6.10:3)

• error appear when data in graphs is null.
• how can i solve this problem

error is bar graphs

js code

var httpRequest = $http({
  method: 'GET',
  url: root_url,
}).success(function(json3, status) {
  $scope.res3 = json3.data;


  Morris.Bar({
    element: 'chart_priority',
    data: json3.data, // use returned data to plot the graph,
    xkey: 'priority',
    ykeys: ['value'],
    labels: ['Logs'],
    hideHover: 'auto',
    resize: true,
    //
  });
});

morris js where error were thrown

      d.prototype.hoverContentForRow = function(a) {
        var b, c, d, e, f, g, h, i;
        for (d = this.data[a],
        b = "<div class='morris-hover-row-label'>" + d.label + "</div>",
        i = d.y,
        c = g = 0,
        h = i.length; h > g; c = ++g)
            f = i[c],
            b += "<div class='morris-hover-point' style='color: " + this.colorFor(d, c, "label") + "'>\n  " + this.options.labels[c] + ":\n  " + this.yLabelFormat(f) + "\n</div>";
        return "function" == typeof this.options.hoverCallback && (b = this.options.hoverCallback(a, this.options, b, d.src)),
        e = this.left + (a + .5) * this.width / this.data.length,
        [b, e]
    }
    ,

• solution i need how can solve the label undefined problem in morris js.

• when data for certain ajax call is null.

solution i also tried

  There are few more things here.

Lets take the below timeline of events.

First time Morris.Line is rendered with proper .data via ajax Second time , When the data object is empty, Chart is completely un-usable Third time, when we render on the same chart with data via ajax. nothing happens. Like you have suggested, i can handle it in the UI. Everyone who implements or encounters such situation have to implement this placeholder message by themselves. Instead, if we can handle it in the Library itself then everyone can get benefited from it and library is more defensive.

Lets go with placeholder approach

First time, Morris.Line is rendered with data from ajax Second time, data is empty. Instead of calling .setData() hide the div element that is rendered/managed by Morris and show a placeholder message using span. Third time, when data is correct, remove the span and re-render the Morris.Line I'd recommend to implement this feature within the library itself so that library is more defensive to such runtime problems.

Answer 1

Solution that worked for me

              method: 'GET',
                url: root_url
            }).success(function (json3, status) {
                $scope.res3 = json3.data;


                if(json3.length==0 ||json3.data==undefined)
                {
                   // alert("data undefined");
                    $("#chart_priority").parent().attr("class","hide");
                       $("#prioritys").hide();
                    var priority_graph=[ { label:"Logs", value:0 } ];
                }
                else
                {
                   $("#chart_priority").parent().attr("class","show");

                    var   priority_graphs=json3.data;

            }
                Morris.Bar({  
                element: 'chart_priority',
                data:json3.data?priority_graphs:priority_graph,
                //data:json3.data,
                label:'Logs',
                xkey: 'priority',
                ykeys: ['value'],
                labels: ['Logs'],

                });