Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

505
Visualizações
Uncaught TypeError: Cannot read property 'label' of undefined Morris.js

I have a bar chart and a date picker Bootstrap
My bar chart works perfectly, it loads the data when selecting a day. But in developer tool i'm having these annoying errors:

Uncaught Type Error: Cannot read property 'label' of undefined Morris 1590 Uncaught Type Error: Cannot read property 'length' of undefined Morris 424

I would like to know how to solve this. I don't want to have those errors there.

     function hourString(hour) {
     if (hour === 0) {
         return "12:00 am";
     }
     if (hour < 12) {
         return hour + ":00 am";
     }
     if (hour === 12) {
         return "12:00 pm";
     }
     return (hour - 12) + ":00 pm";
 }

  var ordersPackChart =
     Morris.Bar({
         element: 'morris-bar-chart',
         data: [],
         xkey: 'y',
         ykeys: ['a'],
         ymax: 1000,
         labels: ['Pack per hour'],
         hideHover: true,
         resize: true,
         barColors: ['#ed5565'],
         parseTime: false
     });

 function packResult(historydate, result) {
     result = JSON.parse(result);

     var data = [];
     for (var hour = 6; hour < 24; hour++) {

         var numberPack = 0;
         for (var i = 0; i < result.Result.length; i++) {
             if (result.Result[i].PACK_HOUR == hour) {
                 numberPack = result.Result[i].NUM_ORDER_PACK;
                 break;
             }
         }

         data.push({ y: hourString(hour), a: numberPack });
     }

     ordersPackChart.setData(data);
 }


 $(document).ready(function () {        
     $("#fromdate").datepicker({
         autoclose: true
     }).change(dateChanged)
       .on('changeDate', dateChanged);
      });

 function dateChanged(ev) {
     $(this).datepicker('hide');

     var day = $('#fromdate').val();

     $.ajax({
         type: "GET",
         url: '@Url.Action("GetQueryResult")',
         context: document.body,
         data: {
             querySetName: 'dashboard-packorder-statistics',
             queryName: 'OrderPack',
             historydate: day
         },
         success: function (result) {
             packResult(ordersPackChart.HISTORY_DATE, result);
         },
         error: function (xhr) {
             var message = "ErrorStatus: " + xhr.status + "  ReadyState: " + xhr.readyState;
         }
     });
 }

 // Reload the Morris chart
 jQuery(function ($) {
     $('#fromdate').on('change', function () {
         ordersPackChart.options.fromdate = $(this).is('changeDate');
         ordersPackChart.redraw();
     });
 });
over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

I fix my problem. Every time my mouse was hovering in the chart with no data was giving those errors. SO I fixed that. And also I was calling the event of the datepicker twice.

These are my changes

       function hourString(hour) {
     if (hour === 0) {
         return "12:00 am";
     }
     if (hour < 12) {
         return hour + ":00 am";
     }
     if (hour === 12) {
         return "12:00 pm";
     }
     return (hour - 12) + ":00 pm";
 }

  var ordersPackChart;

 function packResult(historydate, result) {
     result = JSON.parse(result);

     var data = [];
     for (var hour = 6; hour < 24; hour++) {

         var numberPack = 0;
         for (var i = 0; i < result.Result.length; i++) {
             if (result.Result[i].PACK_HOUR == hour) {
                 numberPack = result.Result[i].NUM_ORDER_PACK;
                 break;
             }
         }

         data.push({ y: hourString(hour), a: numberPack });
     }

     if (ordersPackChart != null) {
         ordersPackChart.setData(data);
     } else {
         ordersPackChart =
             Morris.Bar({
                 element: 'morris-bar-chart',
                 data: data,
                 xkey: 'y',
                 ykeys: ['a'],
                 ymax: 1000,
                 labels: ['Pack per hour'],
                 hideHover: true,
                 resize: true,
                 barColors: ['#ed5565'],
                 parseTime: false
             });
     }
 }


 $(document).ready(function () {        
     $("#fromdate").datepicker({
         autoclose: true
     }).change(dateChanged);
 });

 var currentDay;

 function dateChanged(ev) {
     $(this).datepicker('hide');

     var day = $('#fromdate').val();
     if (day == currentDay)
         return;

     currentDay = day;

     $.ajax({
         type: "GET",
         url: '@Url.Action("GetQueryResult")',
         context: document.body,
         data: {
             querySetName: 'dashboard-packorder-statistics',
             queryName: 'OrderPack',
             historydate: day
         },
         success: function (result) {
             packResult(day, result);
         },
         error: function (xhr) {
             var message = "ErrorStatus: " + xhr.status + "  ReadyState: " + xhr.readyState;
         }
     });
 }
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda