I have 3 charts in jQuery function,
chart2 and chart3 get displayed but chart1 displays only after the complete function working ends. I am not sure why this so and not able to trace the actual issue. Any suggestions would be really appreciated.
Below is a set of code:
$(function () {
// Top Widgets Update
var current_date_time = new Date().getFullYear()
+ "-" + String(initial_month()).padStart(2, '0') +"-" +
String(new Date().getDate()-7).padStart(2, '0')
//Chart1 and top widget records data collection
var distinctaccounts = document.getElementById('distinctaccounts')
var spinner = document.getElementById("loader");
var map_records = get_distincts_records()
var piechart_bu_values = get_configured_accounts(map_records)
// spinner.style.display = 'block';
var acccount_tables = get_initial_records(current_date_time, currentDate(new Date()),0)
// spinner.style.display='none';
// visualizeData(piechart_bu_values, acccount_tables, current_date_time, spinner);
// var acccount_tables = get_accounts_records(current_date_time, currentDate(new Date()),0)
// visualizeData(piechart_bu_values, acccount_tables, current_date_time, spinner);
var histogram_chart = piechart_bu_values[0];
var table_org_name = groupbyTableRecordsOrg_name(acccount_tables);
var _complete_records = _drcords(table_org_name);
var _notify_records = _complete_records[0];
var event_actioned = _complete_records[1];
event_Records_Top_Widget(event_actioned);
get_time_to_process(acccount_tables);
document.getElementById('dateTimePicker').value = String(new Date().getDate()-7).padStart(2, '0')
+ "-" + monthNames[new Date().getMonth()] + "-" + new Date().getFullYear() + ' - '
+ String(new Date().getDate()).padStart(2, '0')
+ "-" + monthNames[new Date().getMonth()] + "-" + new Date().getFullYear();
document.getElementById('starttimeValue').value = current_date_time;
document.getElementById('endtimeValue').value = currentDate(new Date());
// Chart for presenting the event counts according to the business unit
var histogram_chart_element = document.getElementById('horizontal_chart').getContext('2d');
var line_chart = document.getElementById('line-chart').getContext('2d');
// Make the dashboard widgets sortable Using jquery UI
$('.connectedSortable').sortable({
placeholder: 'sort-highlight',
connectWith: '.connectedSortable',
handle: '.card-header, .nav-tabs',
forcePlaceholderSize: true,
zIndex: 999999
});
$('.connectedSortable .card-header, .connectedSortable .nav-tabs-custom').css('cursor', 'move');
//Top BU histogram update
var coloR = [];
for (var i = 0; i < Object.keys(histogram_chart).length; i++) {
coloR.push(bgcColor[i]);
}
var histogram_chart = {
labels: Object.keys(histogram_chart),
datasets: [
{
label: piechart_bu_values[1],
backgroundColor: coloR,
data: Object.values(histogram_chart),
}
]
};
var histogram_chart_Options = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false,
},
tooltips: {
// Disable the on-canvas tooltip
enabled: false,
custom: function (tooltipModel) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = "<table style='font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
" +
" border-collapse: collapse;
" +
" width: 100%;border: 1px solid #ddd;
" +
" padding: 8px;'></table>";
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltipModel.yAlign) {
tooltipEl.classList.add(tooltipModel.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
var titleLines = tooltipModel.title || piechart_bu_values[1];
var bodyLines = tooltipModel.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function (title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function (body, i) {
var colors = tooltipModel.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<div style="word-wrap: break-word;">';
for (accountid in piechart_bu_values[1]) {
var data = piechart_bu_values[1][accountid].substring(0, piechart_bu_values[1][accountid].indexOf('['));
innerHtml += '<tr><td style="word-break: ' +
'break-all; overflow: auto;overflow:scroll;background-color: rgba(161,213,104,0.73);">' +
piechart_bu_values[1][accountid].substring(0, piechart_bu_values[1][accountid].indexOf('['))
+ '(' + piechart_bu_values[0][data] + ')' +
' </td></tr>';
}
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
tooltipEl.style.pointerEvents = 'none';
}
}
// tooltips: {
// enabled: true,
// mode: 'single',
// callbacks: {
// label: function(tooltipItems, data) {
// return piechart_bu_values[1];
// }
// }
// }
};
// This will get the first returned node in the jQuery collection.
new Chart(histogram_chart_element, {type: 'pie',data: histogram_chart,options: histogram_chart_Options})
// Get Records from Tables
var acccount_table = groupbyMultiple(acccount_tables);
var data = acccount_table;
data = sortBy(data, { prop: "date" });
var salesGraphChart = update_notify_remediate_chart(line_chart, event_actioned, _notify_records);
var ctx = document.getElementById('remediate_notify_whitelist').getContext('2d');
ctx.canvas.width = 1000;
ctx.canvas.height = 300;
var cfg = {
data: {
datasets: [{
label: 'Notify',
backgroundColor: 'orange',
borderColor: 'orange',
data: generateSecondChartControlData(data, 'notify'),
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
},
{
label: 'Remediate',
backgroundColor: 'green',
borderColor: 'green',
data: generateSecondChartControlData(data,
'remediate'),
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
}
]
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
offset: true,
ticks: {
major: {
enabled: true,
fontStyle: 'bold'
},
source: 'data',
autoSkip: true,
autoSkipPadding: 75,
maxRotation: 0,
sampleSize: 100
},
afterBuildTicks: function (scale, ticks) {
var majorUnit = scale._majorUnit;
if (ticks == null) {
return 0;
}
var firstTick = ticks[0];
var i, ilen, val, tick, currMajor, lastMajor;
val = moment(ticks[0].value);
if ((majorUnit === 'minute' && val.second() === 0)
|| (majorUnit === 'hour' && val.minute() === 0)
|| (majorUnit === 'day' && val.hour() === 9)
|| (majorUnit === 'month' && val.date() <= 3 && val.isoWeekday() === 1)
|| (majorUnit === 'year' && val.month() === 0)) {
firstTick.major = true;
} else {
firstTick.major = false;
}
lastMajor = val.get(majorUnit);
for (i = 1, ilen = ticks.length; i < ilen; i++) {
tick = ticks[i];
val = moment(tick.value);
currMajor = val.get(majorUnit);
tick.major = currMajor !== lastMajor;
lastMajor = currMajor;
}
return ticks;
}
}],
yAxes: [{
gridLines: {
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Check Count'
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
callbacks: {
label: function (tooltipItem, myData) {
var label = myData.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += parseFloat(tooltipItem.value).toFixed(2);
return label;
}
}
}
}
};
var controlChart = new Chart(ctx, cfg);
// var records_without_date = remove_records(acccount_tables)
var records_without_date = groupbyTableRecords(acccount_tables);
tempTableGlobal = groupbyTableRecordsBYid(acccoun
