I have successfully implemented a bar chart along with a date picker using Bootstrap. The bar chart loads data accurately when selecting a specific day. However, upon inspecting the developer tools, I encounter the following errors:
Uncaught Type Error: Cannot read property 'label' of undefined Morris 1590 Uncaught Type Error: Cannot read property 'length' of undefined Morris 424
I am seeking guidance on how to resolve these errors as I aim to eliminate them completely.
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();
});
});