1838 lines
65 KiB
JavaScript
1838 lines
65 KiB
JavaScript
function getKeyValue(business_unit_id, cond_field1, sel_field1, sel_field2, table_name, selected_div) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "get_key_value.php",
|
|
data: {
|
|
cond_column_value: business_unit_id,
|
|
cond_column_name: cond_field1,
|
|
field1: sel_field1,
|
|
field2: sel_field2,
|
|
table_name: table_name
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if (data != null) {
|
|
var content = '<option value=""></option>';
|
|
for (var i = 0; i < data.length; i++) {
|
|
content += '<option value="' + data[i].key + '">' + data[i].value + '</option>'
|
|
}
|
|
$('#' + selected_div).html(content);
|
|
$('#' + selected_div).trigger('chosen:updated');
|
|
}
|
|
},
|
|
error: function (data) { }
|
|
});
|
|
}
|
|
jQuery(function ($) {
|
|
$('#id-disable-check').on('click', function () {
|
|
var inp = $('#form-input-readonly').get(0);
|
|
if (inp.hasAttribute('disabled')) {
|
|
inp.setAttribute('readonly', 'true');
|
|
inp.removeAttribute('disabled');
|
|
inp.value = "This text field is readonly!";
|
|
} else {
|
|
inp.setAttribute('disabled', 'disabled');
|
|
inp.removeAttribute('readonly');
|
|
inp.value = "This text field is disabled!";
|
|
}
|
|
});
|
|
if (!ace.vars['touch']) {
|
|
$('.chosen-select').chosen({
|
|
allow_single_deselect: true
|
|
});
|
|
$(window)
|
|
.off('resize.chosen')
|
|
.on('resize.chosen', function () {
|
|
$('.chosen-select').each(function () {
|
|
var $this = $(this);
|
|
$this.next().css({
|
|
'width': $this.parent().width()
|
|
});
|
|
})
|
|
}).trigger('resize.chosen');
|
|
//resize chosen on sidebar collapse/expand
|
|
$(document).on('settings.ace.chosen', function (e, event_name, event_val) {
|
|
if (event_name != 'sidebar_collapsed') return;
|
|
$('.chosen-select').each(function () {
|
|
var $this = $(this);
|
|
$this.next().css({
|
|
'width': $this.parent().width()
|
|
});
|
|
})
|
|
});
|
|
$('#chosen-multiple-style .btn').on('click', function (e) {
|
|
var target = $(this).find('input[type=radio]');
|
|
var which = parseInt(target.val());
|
|
if (which == 2) $('#form-field-select-4').addClass('tag-input-style');
|
|
else $('#form-field-select-4').removeClass('tag-input-style');
|
|
});
|
|
}
|
|
$('[data-rel=tooltip]').tooltip({
|
|
container: 'body'
|
|
});
|
|
$('[data-rel=popover]').popover({
|
|
container: 'body'
|
|
});
|
|
autosize($('textarea[class*=autosize]'));
|
|
$('textarea.limited').inputlimiter({
|
|
remText: '%n character%s remaining...',
|
|
limitText: 'max allowed : %n.'
|
|
});
|
|
//"jQuery UI Slider"
|
|
//range slider tooltip example
|
|
$("#slider-range").css('height', '180px').slider({
|
|
orientation: "vertical",
|
|
range: true,
|
|
min: 0,
|
|
max: 100,
|
|
values: [17, 67],
|
|
slide: function (event, ui) {
|
|
var val = ui.values[$(ui.handle).index() - 1] + "";
|
|
if (!ui.handle.firstChild) {
|
|
$("<div class='tooltip right in' style='display:none;left:16px;top:-6px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>")
|
|
.prependTo(ui.handle);
|
|
}
|
|
$(ui.handle.firstChild).show().children().eq(1).text(val);
|
|
}
|
|
}).find('span.ui-slider-handle').on('blur', function () {
|
|
$(this.firstChild).hide();
|
|
});
|
|
$("#slider-range-max").slider({
|
|
range: "max",
|
|
min: 1,
|
|
max: 10,
|
|
value: 2
|
|
});
|
|
$("#slider-eq > span").css({
|
|
width: '90%',
|
|
'float': 'left',
|
|
margin: '15px'
|
|
}).each(function () {
|
|
// read initial values from markup and remove that
|
|
var value = parseInt($(this).text(), 10);
|
|
$(this).empty().slider({
|
|
value: value,
|
|
range: "min",
|
|
animate: true
|
|
});
|
|
});
|
|
$("#slider-eq > span.ui-slider-purple").slider('disable'); //disable third item
|
|
$('#id-input-file-1 , #id-input-file-2').ace_file_input({
|
|
no_file: 'No File ...',
|
|
btn_choose: 'Choose',
|
|
btn_change: 'Change',
|
|
droppable: false,
|
|
onchange: null,
|
|
thumbnail: false //| true | large
|
|
//whitelist:'gif|png|jpg|jpeg'
|
|
//blacklist:'exe|php'
|
|
//onchange:''
|
|
//
|
|
});
|
|
//pre-show a file name, for example a previously selected file
|
|
//$('#id-input-file-1').ace_file_input('show_file_list', ['myfile.txt'])
|
|
//datepicker plugin
|
|
//link
|
|
$('.date-picker').datepicker({
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
})
|
|
//show datepicker when clicking on the icon
|
|
.next().on(ace.click_event, function () {
|
|
$(this).prev().focus();
|
|
});
|
|
//chosen plugin inside a modal will have a zero width because the select element is originally hidden
|
|
//and its width cannot be determined.
|
|
//so we set the width after modal is show
|
|
$('#modal-form').on('shown.bs.modal', function () {
|
|
if (!ace.vars['touch']) {
|
|
$(this).find('.chosen-container').each(function () {
|
|
$(this).find('a:first-child').css('width', '210px');
|
|
$(this).find('.chosen-drop').css('width', '210px');
|
|
$(this).find('.chosen-search input').css('width', '180px');
|
|
});
|
|
}
|
|
})
|
|
/**
|
|
//or you can activate the chosen plugin after modal is shown
|
|
//this way select element becomes visible with dimensions and chosen works as expected
|
|
$('#modal-form').on('shown', function () {
|
|
$(this).find('.modal-chosen').chosen();
|
|
})
|
|
*/
|
|
$(document).one('ajaxloadstart.page', function (e) {
|
|
autosize.destroy('textarea[class*=autosize]')
|
|
$('.limiterBox,.autosizejs').remove();
|
|
$('.daterangepicker.dropdown-menu,.colorpicker.dropdown-menu,.bootstrap-datetimepicker-widget.dropdown-menu').remove();
|
|
});
|
|
});
|
|
|
|
function prepareChart(chartType, chartData, labels, header) {
|
|
var color = Chart.helpers.color;
|
|
Chart.defaults.global.pointHitDetectionRadius = 1;
|
|
var customTooltips = function (tooltip) {
|
|
// Tooltip Element
|
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
|
if (!tooltipEl) {
|
|
tooltipEl = document.createElement('div');
|
|
tooltipEl.id = 'chartjs-tooltip';
|
|
tooltipEl.innerHTML = '<table></table>';
|
|
this._chart.canvas.parentNode.appendChild(tooltipEl);
|
|
}
|
|
// Hide if no tooltip
|
|
if (tooltip.opacity === 0) {
|
|
tooltipEl.style.opacity = 0;
|
|
return;
|
|
}
|
|
// Set caret Position
|
|
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
|
if (tooltip.yAlign) {
|
|
tooltipEl.classList.add(tooltip.yAlign);
|
|
} else {
|
|
tooltipEl.classList.add('no-transform');
|
|
}
|
|
|
|
function getBody(bodyItem) {
|
|
return bodyItem.lines;
|
|
}
|
|
// Set Text
|
|
if (tooltip.body) {
|
|
var titleLines = tooltip.title || [];
|
|
var bodyLines = tooltip.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 = tooltip.labelColors[i];
|
|
var style = 'background:' + colors.backgroundColor;
|
|
style += '; border-color:' + colors.borderColor;
|
|
style += '; border-width: 2px';
|
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
|
});
|
|
innerHtml += '</tbody>';
|
|
var tableRoot = tooltipEl.querySelector('table');
|
|
tableRoot.innerHTML = innerHtml;
|
|
}
|
|
var positionY = this._chart.canvas.offsetTop;
|
|
var positionX = this._chart.canvas.offsetLeft;
|
|
// Display, position, and set styles for font
|
|
tooltipEl.style.opacity = 1;
|
|
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
|
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
|
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
|
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
|
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
|
};
|
|
if (chartType == 'bar') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: window.chartColors.green,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'doughnut') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
],
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'line') {
|
|
var data = chartData;
|
|
console.log('chart data: ' + chartData[0]);
|
|
// get the dataset label names count
|
|
var dataset_labels_count = chartData[(chartData.length) - 1].length;
|
|
var lc_data = [];
|
|
var lc_label = [];
|
|
var j = 0;
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
lc_label[j] = chartData[i][j];
|
|
}
|
|
}
|
|
// for (var i = 0; i < dataset_labels_count; i++) {
|
|
// for(var j = 0; j < chartData.length; j++){
|
|
// console.log("chart Data: "+chartData[j][i]);
|
|
// lc_data[i][j] = chartData[j][i];
|
|
// }
|
|
// }
|
|
for (var i = 0; i < data.length - 1; i++) {
|
|
for (var j = 0; j < i; j++) {
|
|
const tmp = data[i][j];
|
|
data[i][j] = data[j][i];
|
|
data[j][i] = tmp;
|
|
}
|
|
}
|
|
console.log('labels: ' + lc_label);
|
|
console.log('data: ' + data[1]);
|
|
const background_color = [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
];
|
|
var datasets_array = []
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
datasets_array.push({
|
|
label: lc_label[j],
|
|
data: data[j],
|
|
borderColor: background_color[j]
|
|
});
|
|
}
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: datasets_array
|
|
};
|
|
}
|
|
if (chartType == 'line') {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// chart.destroy();
|
|
}
|
|
|
|
function prepareChart1(chartType, chartData, labels, header) {
|
|
var color = Chart.helpers.color;
|
|
Chart.defaults.global.pointHitDetectionRadius = 1;
|
|
var customTooltips = function (tooltip) {
|
|
// Tooltip Element
|
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
|
if (!tooltipEl) {
|
|
tooltipEl = document.createElement('div');
|
|
tooltipEl.id = 'chartjs-tooltip';
|
|
tooltipEl.innerHTML = '<table></table>';
|
|
this._chart.canvas.parentNode.appendChild(tooltipEl);
|
|
}
|
|
// Hide if no tooltip
|
|
if (tooltip.opacity === 0) {
|
|
tooltipEl.style.opacity = 0;
|
|
return;
|
|
}
|
|
// Set caret Position
|
|
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
|
if (tooltip.yAlign) {
|
|
tooltipEl.classList.add(tooltip.yAlign);
|
|
} else {
|
|
tooltipEl.classList.add('no-transform');
|
|
}
|
|
|
|
function getBody(bodyItem) {
|
|
return bodyItem.lines;
|
|
}
|
|
// Set Text
|
|
if (tooltip.body) {
|
|
var titleLines = tooltip.title || [];
|
|
var bodyLines = tooltip.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 = tooltip.labelColors[i];
|
|
var style = 'background:' + colors.backgroundColor;
|
|
style += '; border-color:' + colors.borderColor;
|
|
style += '; border-width: 2px';
|
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
|
});
|
|
innerHtml += '</tbody>';
|
|
var tableRoot = tooltipEl.querySelector('table');
|
|
tableRoot.innerHTML = innerHtml;
|
|
}
|
|
var positionY = this._chart.canvas.offsetTop;
|
|
var positionX = this._chart.canvas.offsetLeft;
|
|
// Display, position, and set styles for font
|
|
tooltipEl.style.opacity = 1;
|
|
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
|
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
|
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
|
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
|
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
|
};
|
|
if (chartType == 'bar') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: window.chartColors.green,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'doughnut') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
],
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'line') {
|
|
var data = chartData;
|
|
console.log('chart data: ' + chartData[0]);
|
|
// get the dataset label names count
|
|
var dataset_labels_count = chartData[(chartData.length) - 1].length;
|
|
var lc_data = [];
|
|
var lc_label = [];
|
|
var j = 0;
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
lc_label[j] = chartData[i][j];
|
|
}
|
|
}
|
|
// for (var i = 0; i < dataset_labels_count; i++) {
|
|
// for(var j = 0; j < chartData.length; j++){
|
|
// console.log("chart Data: "+chartData[j][i]);
|
|
// lc_data[i][j] = chartData[j][i];
|
|
// }
|
|
// }
|
|
for (var i = 0; i < data.length - 1; i++) {
|
|
for (var j = 0; j < i; j++) {
|
|
const tmp = data[i][j];
|
|
data[i][j] = data[j][i];
|
|
data[j][i] = tmp;
|
|
}
|
|
}
|
|
console.log('labels: ' + lc_label);
|
|
console.log('data: ' + data[1]);
|
|
const background_color = [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
];
|
|
var datasets_array = []
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
datasets_array.push({
|
|
label: lc_label[j],
|
|
data: data[j],
|
|
borderColor: background_color[j]
|
|
});
|
|
}
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: datasets_array
|
|
};
|
|
}
|
|
if (chartType == 'line') {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// chart.destroy();
|
|
}
|
|
|
|
function prepareChart2(chartType, chartData, labels, header, chartData1, chartData2, chartData3, chartData4) {
|
|
var color = Chart.helpers.color;
|
|
Chart.defaults.global.pointHitDetectionRadius = 1;
|
|
var customTooltips = function (tooltip) {
|
|
// Tooltip Element
|
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
|
if (!tooltipEl) {
|
|
tooltipEl = document.createElement('div');
|
|
tooltipEl.id = 'chartjs-tooltip';
|
|
tooltipEl.innerHTML = '<table></table>';
|
|
this._chart.canvas.parentNode.appendChild(tooltipEl);
|
|
}
|
|
// Hide if no tooltip
|
|
if (tooltip.opacity === 0) {
|
|
tooltipEl.style.opacity = 0;
|
|
return;
|
|
}
|
|
// Set caret Position
|
|
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
|
if (tooltip.yAlign) {
|
|
tooltipEl.classList.add(tooltip.yAlign);
|
|
} else {
|
|
tooltipEl.classList.add('no-transform');
|
|
}
|
|
|
|
function getBody(bodyItem) {
|
|
return bodyItem.lines;
|
|
}
|
|
// Set Text
|
|
if (tooltip.body) {
|
|
var titleLines = tooltip.title || [];
|
|
var bodyLines = tooltip.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 = tooltip.labelColors[i];
|
|
var style = 'background:' + colors.backgroundColor;
|
|
style += '; border-color:' + colors.borderColor;
|
|
style += '; border-width: 2px';
|
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
|
});
|
|
innerHtml += '</tbody>';
|
|
var tableRoot = tooltipEl.querySelector('table');
|
|
tableRoot.innerHTML = innerHtml;
|
|
}
|
|
var positionY = this._chart.canvas.offsetTop;
|
|
var positionX = this._chart.canvas.offsetLeft;
|
|
// Display, position, and set styles for font
|
|
tooltipEl.style.opacity = 1;
|
|
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
|
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
|
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
|
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
|
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
|
};
|
|
if (chartType == 'bar') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 2016,
|
|
backgroundColor: window.chartColors.green,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 2017,
|
|
backgroundColor: window.chartColors.red,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 2018,
|
|
backgroundColor: window.chartColors.yellow,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 2019,
|
|
backgroundColor: window.chartColors.blue,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData3,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 2020,
|
|
backgroundColor: window.chartColors.orange,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData4,
|
|
hoverOffset: 4
|
|
}
|
|
]
|
|
};
|
|
} else if (chartType == 'doughnut') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
],
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'line') {
|
|
var data = chartData;
|
|
console.log('chart data: ' + chartData[0]);
|
|
// get the dataset label names count
|
|
var dataset_labels_count = chartData[(chartData.length) - 1].length;
|
|
var lc_data = [];
|
|
var lc_label = [];
|
|
var j = 0;
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
lc_label[j] = chartData[i][j];
|
|
}
|
|
}
|
|
// for (var i = 0; i < dataset_labels_count; i++) {
|
|
// for(var j = 0; j < chartData.length; j++){
|
|
// console.log("chart Data: "+chartData[j][i]);
|
|
// lc_data[i][j] = chartData[j][i];
|
|
// }
|
|
// }
|
|
for (var i = 0; i < data.length - 1; i++) {
|
|
for (var j = 0; j < i; j++) {
|
|
const tmp = data[i][j];
|
|
data[i][j] = data[j][i];
|
|
data[j][i] = tmp;
|
|
}
|
|
}
|
|
console.log('labels: ' + lc_label);
|
|
console.log('data: ' + data[1]);
|
|
const background_color = [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
];
|
|
var datasets_array = []
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
datasets_array.push({
|
|
label: lc_label[j],
|
|
data: data[j],
|
|
borderColor: background_color[j]
|
|
});
|
|
}
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: datasets_array
|
|
};
|
|
}
|
|
if (chartType == 'line') {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// chart.destroy();
|
|
}
|
|
|
|
function prepareChart3(chartType, chartData, labels, header, chartData1, chartData2, chartData3) {
|
|
var color = Chart.helpers.color;
|
|
Chart.defaults.global.pointHitDetectionRadius = 1;
|
|
var customTooltips = function (tooltip) {
|
|
// Tooltip Element
|
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
|
if (!tooltipEl) {
|
|
tooltipEl = document.createElement('div');
|
|
tooltipEl.id = 'chartjs-tooltip';
|
|
tooltipEl.innerHTML = '<table></table>';
|
|
this._chart.canvas.parentNode.appendChild(tooltipEl);
|
|
}
|
|
// Hide if no tooltip
|
|
if (tooltip.opacity === 0) {
|
|
tooltipEl.style.opacity = 0;
|
|
return;
|
|
}
|
|
// Set caret Position
|
|
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
|
if (tooltip.yAlign) {
|
|
tooltipEl.classList.add(tooltip.yAlign);
|
|
} else {
|
|
tooltipEl.classList.add('no-transform');
|
|
}
|
|
|
|
function getBody(bodyItem) {
|
|
return bodyItem.lines;
|
|
}
|
|
// Set Text
|
|
if (tooltip.body) {
|
|
var titleLines = tooltip.title || [];
|
|
var bodyLines = tooltip.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 = tooltip.labelColors[i];
|
|
var style = 'background:' + colors.backgroundColor;
|
|
style += '; border-color:' + colors.borderColor;
|
|
style += '; border-width: 2px';
|
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
|
});
|
|
innerHtml += '</tbody>';
|
|
var tableRoot = tooltipEl.querySelector('table');
|
|
tableRoot.innerHTML = innerHtml;
|
|
}
|
|
var positionY = this._chart.canvas.offsetTop;
|
|
var positionX = this._chart.canvas.offsetLeft;
|
|
// Display, position, and set styles for font
|
|
tooltipEl.style.opacity = 1;
|
|
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
|
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
|
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
|
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
|
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
|
};
|
|
if (chartType == 'bar') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 2021,
|
|
backgroundColor: window.chartColors.green,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 2020,
|
|
backgroundColor: window.chartColors.red,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 2019,
|
|
backgroundColor: window.chartColors.yellow,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 2018,
|
|
backgroundColor: window.chartColors.blue,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData3,
|
|
hoverOffset: 4
|
|
}
|
|
]
|
|
};
|
|
} else if (chartType == 'doughnut') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
],
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'line') {
|
|
var data = chartData;
|
|
console.log('chart data: ' + chartData[0]);
|
|
// get the dataset label names count
|
|
var dataset_labels_count = chartData[(chartData.length) - 1].length;
|
|
var lc_data = [];
|
|
var lc_label = [];
|
|
var j = 0;
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
lc_label[j] = chartData[i][j];
|
|
}
|
|
}
|
|
// for (var i = 0; i < dataset_labels_count; i++) {
|
|
// for(var j = 0; j < chartData.length; j++){
|
|
// console.log("chart Data: "+chartData[j][i]);
|
|
// lc_data[i][j] = chartData[j][i];
|
|
// }
|
|
// }
|
|
for (var i = 0; i < data.length - 1; i++) {
|
|
for (var j = 0; j < i; j++) {
|
|
const tmp = data[i][j];
|
|
data[i][j] = data[j][i];
|
|
data[j][i] = tmp;
|
|
}
|
|
}
|
|
console.log('labels: ' + lc_label);
|
|
console.log('data: ' + data[1]);
|
|
const background_color = [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
];
|
|
var datasets_array = []
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
datasets_array.push({
|
|
label: lc_label[j],
|
|
data: data[j],
|
|
borderColor: background_color[j]
|
|
});
|
|
}
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: datasets_array
|
|
};
|
|
}
|
|
if (chartType == 'line') {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// chart.destroy();
|
|
}
|
|
|
|
function prepareChart4(chartType, chartData, labels, header, chartData1, chartData2, chartData3, chartData4) {
|
|
var color = Chart.helpers.color;
|
|
Chart.defaults.global.pointHitDetectionRadius = 1;
|
|
var customTooltips = function (tooltip) {
|
|
// Tooltip Element
|
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
|
if (!tooltipEl) {
|
|
tooltipEl = document.createElement('div');
|
|
tooltipEl.id = 'chartjs-tooltip';
|
|
tooltipEl.innerHTML = '<table></table>';
|
|
this._chart.canvas.parentNode.appendChild(tooltipEl);
|
|
}
|
|
// Hide if no tooltip
|
|
if (tooltip.opacity === 0) {
|
|
tooltipEl.style.opacity = 0;
|
|
return;
|
|
}
|
|
// Set caret Position
|
|
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
|
if (tooltip.yAlign) {
|
|
tooltipEl.classList.add(tooltip.yAlign);
|
|
} else {
|
|
tooltipEl.classList.add('no-transform');
|
|
}
|
|
|
|
function getBody(bodyItem) {
|
|
return bodyItem.lines;
|
|
}
|
|
// Set Text
|
|
if (tooltip.body) {
|
|
var titleLines = tooltip.title || [];
|
|
var bodyLines = tooltip.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 = tooltip.labelColors[i];
|
|
var style = 'background:' + colors.backgroundColor;
|
|
style += '; border-color:' + colors.borderColor;
|
|
style += '; border-width: 2px';
|
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
|
});
|
|
innerHtml += '</tbody>';
|
|
var tableRoot = tooltipEl.querySelector('table');
|
|
tableRoot.innerHTML = innerHtml;
|
|
}
|
|
var positionY = this._chart.canvas.offsetTop;
|
|
var positionX = this._chart.canvas.offsetLeft;
|
|
// Display, position, and set styles for font
|
|
tooltipEl.style.opacity = 1;
|
|
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
|
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
|
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
|
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
|
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
|
};
|
|
if (chartType == 'bar') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'TOTAL YELLOW',
|
|
backgroundColor: window.chartColors.yellow,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 'TOTAL WHITE',
|
|
backgroundColor: window.chartColors.white,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 'TOTAL BLUE',
|
|
backgroundColor: window.chartColors.blue,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
},
|
|
{
|
|
label: 'TOTAL RED',
|
|
backgroundColor: window.chartColors.red,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData3,
|
|
hoverOffset: 4
|
|
}
|
|
]
|
|
};
|
|
} else if (chartType == 'doughnut') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
],
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'line') {
|
|
var data = chartData;
|
|
console.log('chart data: ' + chartData[0]);
|
|
// get the dataset label names count
|
|
var dataset_labels_count = chartData[(chartData.length) - 1].length;
|
|
var lc_data = [];
|
|
var lc_label = [];
|
|
var j = 0;
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
lc_label[j] = chartData[i][j];
|
|
}
|
|
}
|
|
// for (var i = 0; i < dataset_labels_count; i++) {
|
|
// for(var j = 0; j < chartData.length; j++){
|
|
// console.log("chart Data: "+chartData[j][i]);
|
|
// lc_data[i][j] = chartData[j][i];
|
|
// }
|
|
// }
|
|
for (var i = 0; i < data.length - 1; i++) {
|
|
for (var j = 0; j < i; j++) {
|
|
const tmp = data[i][j];
|
|
data[i][j] = data[j][i];
|
|
data[j][i] = tmp;
|
|
}
|
|
}
|
|
console.log('labels: ' + lc_label);
|
|
console.log('data: ' + data[1]);
|
|
const background_color = [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
];
|
|
var datasets_array = []
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
datasets_array.push({
|
|
label: lc_label[j],
|
|
data: data[j],
|
|
borderColor: background_color[j]
|
|
});
|
|
}
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: datasets_array
|
|
};
|
|
}
|
|
if (chartType == 'line') {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// chart.destroy();
|
|
}
|
|
|
|
function prepareChart5(chartType, chartData, labels, header, chartData1, chartData2, chartData3, chartData4, chartData5) {
|
|
var color = Chart.helpers.color;
|
|
Chart.defaults.global.pointHitDetectionRadius = 1;
|
|
var customTooltips = function (tooltip) {
|
|
// Tooltip Element
|
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
|
if (!tooltipEl) {
|
|
tooltipEl = document.createElement('div');
|
|
tooltipEl.id = 'chartjs-tooltip';
|
|
tooltipEl.innerHTML = '<table></table>';
|
|
this._chart.canvas.parentNode.appendChild(tooltipEl);
|
|
}
|
|
// Hide if no tooltip
|
|
if (tooltip.opacity === 0) {
|
|
tooltipEl.style.opacity = 0;
|
|
return;
|
|
}
|
|
// Set caret Position
|
|
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
|
if (tooltip.yAlign) {
|
|
tooltipEl.classList.add(tooltip.yAlign);
|
|
} else {
|
|
tooltipEl.classList.add('no-transform');
|
|
}
|
|
|
|
function getBody(bodyItem) {
|
|
return bodyItem.lines;
|
|
}
|
|
// Set Text
|
|
if (tooltip.body) {
|
|
var titleLines = tooltip.title || [];
|
|
var bodyLines = tooltip.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 = tooltip.labelColors[i];
|
|
var style = 'background:' + colors.backgroundColor;
|
|
style += '; border-color:' + colors.borderColor;
|
|
style += '; border-width: 2px';
|
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
|
});
|
|
innerHtml += '</tbody>';
|
|
var tableRoot = tooltipEl.querySelector('table');
|
|
tableRoot.innerHTML = innerHtml;
|
|
}
|
|
var positionY = this._chart.canvas.offsetTop;
|
|
var positionX = this._chart.canvas.offsetLeft
|
|
// Display, position, and set styles for font
|
|
tooltipEl.style.opacity = 1;
|
|
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
|
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
|
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
|
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
|
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
|
};
|
|
if (chartType == 'bar') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: new Date().getFullYear() - 5,
|
|
backgroundColor: window.chartColors.green,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 4,
|
|
backgroundColor: window.chartColors.red,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData1,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 3,
|
|
backgroundColor: window.chartColors.yellow,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData2,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 2,
|
|
backgroundColor: window.chartColors.blue,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData3,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear() - 1,
|
|
backgroundColor: window.chartColors.orange,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData4,
|
|
hoverOffset: 4
|
|
}, {
|
|
label: new Date().getFullYear(),
|
|
backgroundColor: window.chartColors.purple,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData5,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
// if(chartData.length==0){
|
|
// barChartData.datasets.splice(0,1);
|
|
// }
|
|
// else if(chartData1.length==0){
|
|
// barChartData.datasets.splice(1,1);
|
|
// }
|
|
// else if(chartData2.length==0){
|
|
// barChartData.datasets.splice(2,1);
|
|
// }
|
|
// else if(chartData3.length==0){
|
|
// barChartData.datasets.splice(3,1);
|
|
// }
|
|
// else if(chartData4.length==0){
|
|
// barChartData.datasets.splice(4,1);
|
|
// }
|
|
// else{
|
|
// barChartData.datasets.splice(5,1);
|
|
// }
|
|
} else if (chartType == 'doughnut') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
],
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'line') {
|
|
var data = chartData;
|
|
console.log('chart data: ' + chartData[0]);
|
|
// get the dataset label names count
|
|
var dataset_labels_count = chartData[(chartData.length) - 1].length;
|
|
var lc_data = [];
|
|
var lc_label = [];
|
|
var j = 0;
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
lc_label[j] = chartData[i][j];
|
|
}
|
|
}
|
|
// for (var i = 0; i < dataset_labels_count; i++) {
|
|
// for(var j = 0; j < chartData.length; j++){
|
|
// console.log("chart Data: "+chartData[j][i]);
|
|
// lc_data[i][j] = chartData[j][i];
|
|
// }
|
|
// }
|
|
for (var i = 0; i < data.length - 1; i++) {
|
|
for (var j = 0; j < i; j++) {
|
|
const tmp = data[i][j];
|
|
data[i][j] = data[j][i];
|
|
data[j][i] = tmp;
|
|
}
|
|
}
|
|
console.log('labels: ' + lc_label);
|
|
console.log('data: ' + data[1]);
|
|
const background_color = [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
];
|
|
var datasets_array = []
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
datasets_array.push({
|
|
label: lc_label[j],
|
|
data: data[j],
|
|
borderColor: background_color[j]
|
|
});
|
|
}
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: datasets_array
|
|
};
|
|
}
|
|
if (chartType == 'line') {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// chart.destroy();
|
|
}
|
|
$('#startDate1').datepicker({
|
|
format: "mm-yyyy",
|
|
viewMode: "months",
|
|
minViewMode: "months"
|
|
});
|
|
$('#endDate1').datepicker({
|
|
format: "mm-yyyy",
|
|
viewMode: "months",
|
|
minViewMode: "months"
|
|
});
|
|
|
|
function open_pdf() {
|
|
html2canvas(document.getElementById("report_div"), {
|
|
onrendered: function (canvas) {
|
|
var img = canvas.toDataURL(); //image data of canvas
|
|
// var doc = new jsPDF('p','pt','a2');
|
|
var doc = new jsPDF('l', 'mm', [300, 350]);
|
|
doc.addImage(img, 10, 10);
|
|
doc.save('graph.pdf');
|
|
}
|
|
});
|
|
} |