File: /home/salamatk/takarzan.ir/wp-content/plugins/luman-plus/assets/js/widgets.bundle.js
"use strict";
// Class definition
var KTCardsWidget1 = function () {
// Private methods
var initChart = function() {
var element = document.getElementById("kt_card_widget_1_chart");
if (!element) {
return;
}
var color = element.getAttribute('data-kt-chart-color');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var baseColor = KTUtil.isHexColor(color) ? color : KTUtil.getCssVariableValue('--bs-' + color);
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
var options = {
series: [{
name: 'Sales',
data: [30, 75, 55, 45, 30, 60, 75, 50],
margin: {
left: 5,
right: 5
}
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
},
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['35%'],
borderRadius: 6
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 4,
colors: ['transparent']
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
show: false
}
},
yaxis: {
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
fill: {
type: 'solid'
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
x: {
formatter: function (val) {
return "Feb: " + val
}
},
y: {
formatter: function (val) {
return val + "%"
}
}
},
colors: [baseColor, secondaryColor],
grid: {
borderColor: false,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
},
padding: {
top: 10,
left: 25,
right: 25
}
}
};
// Set timeout to properly get the parent elements width
var chart = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.render();
}, 300);
}
// Public methods
return {
init: function () {
initChart();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardsWidget1;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardsWidget1.init();
});
"use strict";
// Class definition
var KTCardsWidget10 = function () {
// Private methods
var initChart = function() {
var el = document.getElementById('kt_card_widget_10_chart');
if (!el) {
return;
}
var options = {
size: el.getAttribute('data-kt-size') ? parseInt(el.getAttribute('data-kt-size')) : 70,
lineWidth: el.getAttribute('data-kt-line') ? parseInt(el.getAttribute('data-kt-line')) : 11,
rotate: el.getAttribute('data-kt-rotate') ? parseInt(el.getAttribute('data-kt-rotate')) : 145,
//percent: el.getAttribute('data-kt-percent') ,
}
var canvas = document.createElement('canvas');
var span = document.createElement('span');
if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
// Init
drawCircle('#E4E6EF', options.lineWidth, 100 / 100);
drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, 100 / 150);
drawCircle(KTUtil.getCssVariableValue('--bs-success'), options.lineWidth, 100 / 250);
}
// Public methods
return {
init: function () {
initChart();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardsWidget10;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardsWidget10.init();
});
"use strict";
// Class definition
var KTCardWidget12 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_card_widget_12_chart");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
var lightColor = KTUtil.getCssVariableValue('--bs-success');
var options = {
series: [{
name: 'Sales',
data: [3.5, 5.7, 2.8, 5.9, 4.2, 5.6, 4.3, 4.5, 5.9, 4.5, 5.7, 4.8, 5.7]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 0
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
x: {
formatter: function (val) {
return "Feb " + val;
}
},
y: {
formatter: function (val) {
return val * "10" + "K"
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
padding: {
top: 0,
right: -20,
bottom: -20,
left: -20
},
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 2
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardWidget12;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardWidget12.init();
});
"use strict";
// Class definition
var KTCardWidget13 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_card_widget_13_chart");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
var lightColor = KTUtil.getCssVariableValue('--bs-success');
var options = {
series: [{
name: 'Shipments',
data: [1.5, 4.5, 2, 3, 2, 4, 2.5, 2, 2.5, 4, 3.5, 4.5, 2.5]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 0
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
x: {
formatter: function (val) {
return "Feb " + val;
}
},
y: {
formatter: function (val) {
return val * "10" + "K"
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
padding: {
top: 0,
right: -20,
bottom: -20,
left: -20
},
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 2
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardWidget13;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardWidget13.init();
});
"use strict";
// Class definition
var KTCardsWidget17 = function () {
// Private methods
var initChart = function() {
var el = document.getElementById('kt_card_widget_17_chart');
if (!el) {
return;
}
var options = {
size: el.getAttribute('data-kt-size') ? parseInt(el.getAttribute('data-kt-size')) : 70,
lineWidth: el.getAttribute('data-kt-line') ? parseInt(el.getAttribute('data-kt-line')) : 11,
rotate: el.getAttribute('data-kt-rotate') ? parseInt(el.getAttribute('data-kt-rotate')) : 145,
//percent: el.getAttribute('data-kt-percent') ,
}
var canvas = document.createElement('canvas');
var span = document.createElement('span');
if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
// Init
drawCircle('#E4E6EF', options.lineWidth, 100 / 100);
drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, 100 / 150);
drawCircle(KTUtil.getCssVariableValue('--bs-success'), options.lineWidth, 100 / 250);
}
// Public methods
return {
init: function () {
initChart();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardsWidget17;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardsWidget17.init();
});
"use strict";
// Class definition
var KTCardsWidget19 = function () {
// Private methods
var initChart = function() {
var el = document.getElementById('kt_card_widget_19_chart');
if (!el) {
return;
}
var options = {
size: el.getAttribute('data-kt-size') ? parseInt(el.getAttribute('data-kt-size')) : 70,
lineWidth: el.getAttribute('data-kt-line') ? parseInt(el.getAttribute('data-kt-line')) : 11,
rotate: el.getAttribute('data-kt-rotate') ? parseInt(el.getAttribute('data-kt-rotate')) : 145,
//percent: el.getAttribute('data-kt-percent') ,
}
var canvas = document.createElement('canvas');
var span = document.createElement('span');
if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
// Init
drawCircle('#E4E6EF', options.lineWidth, 100 / 100);
drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, 100 / 150);
drawCircle(KTUtil.getCssVariableValue('--bs-success'), options.lineWidth, 100 / 250);
}
// Public methods
return {
init: function () {
initChart();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardsWidget19;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardsWidget19.init();
});
"use strict";
// Class definition
var KTCardsWidget4 = function () {
// Private methods
var initChart = function() {
var el = document.getElementById('kt_card_widget_4_chart');
if (!el) {
return;
}
var options = {
size: el.getAttribute('data-kt-size') ? parseInt(el.getAttribute('data-kt-size')) : 70,
lineWidth: el.getAttribute('data-kt-line') ? parseInt(el.getAttribute('data-kt-line')) : 11,
rotate: el.getAttribute('data-kt-rotate') ? parseInt(el.getAttribute('data-kt-rotate')) : 145,
//percent: el.getAttribute('data-kt-percent') ,
}
var canvas = document.createElement('canvas');
var span = document.createElement('span');
if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
// Init
drawCircle('#E4E6EF', options.lineWidth, 100 / 100);
drawCircle(KTUtil.getCssVariableValue('--bs-danger'), options.lineWidth, 100 / 150);
drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, 100 / 250);
}
// Public methods
return {
init: function () {
initChart();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardsWidget4;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardsWidget4.init();
});
"use strict";
// Class definition
var KTCardsWidget6 = function () {
// Private methods
var initChart = function() {
var element = document.getElementById("kt_card_widget_6_chart");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
var options = {
series: [{
name: 'Sales',
data: [30, 60, 53, 45, 60, 75, 53]
}, ],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
},
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['55%'],
borderRadius: 6
}
},
legend: {
show: false,
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 9,
colors: ['transparent']
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
tickPlacement: 'between'
},
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
show: false
}
},
yaxis: {
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
fill: {
type: 'solid'
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
x: {
formatter: function (val) {
return 'Feb: ' + val;
}
},
y: {
formatter: function (val) {
return val + "%"
}
}
},
colors: [baseColor, secondaryColor],
grid: {
padding: {
left: 10,
right: 10
},
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
var chart = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.render();
}, 300);
}
// Public methods
return {
init: function () {
initChart();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardsWidget6;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardsWidget6.init();
});
"use strict";
// Class definition
var KTCardWidget8 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_card_widget_8_chart");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
var lightColor = KTUtil.getCssVariableValue('--bs-success');
var options = {
series: [{
name: 'Sales',
data: [4.5, 5.7, 2.8, 5.9, 4.2, 5.6, 5.2, 4.5, 5.9, 4.5, 5.7, 4.8, 5.7]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 0
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
x: {
formatter: function (val) {
return "Feb " + val;
}
},
y: {
formatter: function (val) {
return "$" + val + "K"
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
padding: {
top: 0,
right: -20,
bottom: -20,
left: -20
},
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 2
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardWidget8;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardWidget8.init();
});
"use strict";
// Class definition
var KTCardWidget9 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_card_widget_9_chart");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
var lightColor = KTUtil.getCssVariableValue('--bs-success');
var options = {
series: [{
name: 'Visitors',
data: [1.5, 2.5, 2, 3, 2, 4, 2.5, 2, 2.5, 4, 2.5, 4.5, 2.5]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 0
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
x: {
formatter: function (val) {
return "Feb " + val;
}
},
y: {
formatter: function (val) {
return val + "K"
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
padding: {
top: 0,
right: -20,
bottom: -20,
left: -20
},
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 2
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardWidget9;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardWidget9.init();
});
"use strict";
// Class definition
var KTChartsWidget1 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_1");
if (!element) {
return;
}
var negativeColor = element.hasAttribute('data-kt-negative-color') ? element.getAttribute('data-kt-negative-color') : KTUtil.getCssVariableValue('--bs-success');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var options = {
series: [{
name: 'Subscribed',
data: [20, 30, 20, 40, 60, 75, 65, 18, 10, 5, 15, 40, 60, 18, 35, 55, 20]
}, {
name: 'Unsubscribed',
data: [-20, -15, -5, -20, -30, -15, -10, -8, -5, -5, -10, -25, -15, -5, -10, -5, -15]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
stacked: true,
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
//horizontal: false,
columnWidth: "35%",
barHeight: "70%",
borderRadius: [6, 6]
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['Jan 5', 'Jan 7', 'Jan 9', 'Jan 11', 'Jan 13', 'Jan 15', 'Jan 17', 'Jan 19', 'Jan 20', 'Jan 21', 'Jan 23', 'Jan 24', 'Jan 25', 'Jan 26', 'Jan 24', 'Jan 28', 'Jan 29'],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
tickAmount: 10,
labels: {
//rotate: -45,
//rotateAlways: true,
style: {
colors: [labelColor],
fontSize: '12px'
}
},
crosshairs: {
show: false
}
},
yaxis: {
min: -50,
max: 80,
tickAmount: 6,
labels: {
style: {
colors: [labelColor],
fontSize: '12px'
},
formatter: function (val) {
return parseInt(val) + "K"
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px',
borderRadius: 4
},
y: {
formatter: function (val) {
if (val > 0) {
return val + 'K';
} else {
return Math.abs(val) + 'K';
}
}
}
},
colors: [baseColor, negativeColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget1;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget1.init();
});
"use strict";
// Class definition
var KTChartsWidget10 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, chartSelector, data, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var options = {
series: [{
name: 'Achieved Target',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['22%'],
borderRadius: 5,
dataLabels: {
position: "top" // top, center, bottom
},
startingShape: 'flat'
},
},
legend: {
show: false
},
dataLabels: {
enabled: true,
offsetY: -30,
style: {
fontSize: '13px',
colors: [labelColor]
},
formatter: function(val) {
return val + "K";
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Metals', 'Energy', 'Agro', 'Machines', 'Transport', 'Textile', 'Wood'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
},
crosshairs: {
fill: {
gradient: {
opacityFrom: 0,
opacityTo: 0
}
}
}
},
yaxis: {
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
},
formatter: function (val) {
return parseInt(val) + "K"
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return + val + "K"
}
}
},
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-primary-light')],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [30, 18, 43, 70, 13, 37, 23];
initChart(chart1, '#kt_charts_widget_10_tab_1', '#kt_charts_widget_10_chart_1', chart1Data, true);
var chart2Data = [25, 55, 35, 50, 45, 20, 31];
initChart(chart2, '#kt_charts_widget_10_tab_2', '#kt_charts_widget_10_chart_2', chart2Data, false);
var chart3Data = [45, 15, 35, 70, 45, 50, 21];
initChart(chart3, '#kt_charts_widget_10_tab_3', '#kt_charts_widget_10_chart_3', chart3Data, false);
var chart4Data = [15, 55, 25, 50, 25, 60, 31];
initChart(chart4, '#kt_charts_widget_10_tab_4', '#kt_charts_widget_10_chart_4', chart4Data, false);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
initChart(chart1, '#kt_charts_widget_10_tab_1', '#kt_charts_widget_10_chart_1', chart1Data, chart1.rendered);
initChart(chart2, '#kt_charts_widget_10_tab_2', '#kt_charts_widget_10_chart_2', chart2Data, chart2.rendered);
initChart(chart3, '#kt_charts_widget_10_tab_3', '#kt_charts_widget_10_chart_3', chart3Data, chart3.rendered);
initChart(chart4, '#kt_charts_widget_10_tab_4', '#kt_charts_widget_10_chart_4', chart4Data, chart4.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget10;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget10.init();
});
"use strict";
// Class definition
var KTChartsWidget11 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, chartSelector, data, initByDefault) {
var element = document.querySelector(chartSelector);
var height = parseInt(KTUtil.css(element, 'height'));
if (!element) {
return;
}
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-success');
var options = {
series: [{
name: 'Deliveries',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['', 'Apr 02', 'Apr 06', 'Apr 06', 'Apr 05', 'Apr 06', 'Apr 10', 'Apr 08', 'Apr 09', 'Apr 14', 'Apr 10', 'Apr 12', 'Apr 18', 'Apr 14',
'Apr 15', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 02', 'Apr 06', 'Apr 18', 'Apr 05', 'Apr 06', 'Apr 10', 'Apr 08', 'Apr 22', 'Apr 14', 'Apr 11', 'Apr 12', ''
],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
tickAmount: 5,
labels: {
rotate: 0,
rotateAlways: true,
style: {
colors: labelColor,
fontSize: '13px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '13px'
}
}
},
yaxis: {
tickAmount: 4,
max: 24,
min: 10,
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return + val
}
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 3,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [16, 19, 19, 16, 16, 14, 15, 15, 17, 17, 19, 19, 18, 18, 20, 20, 18, 18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 20, 20, 22];
initChart(chart1, '#kt_charts_widget_11_tab_1', '#kt_charts_widget_11_chart_1', chart1Data, false);
var chart2Data = [18, 18, 20, 20, 18, 18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 18, 20, 20, 22, 15, 18, 18, 17, 17, 15, 15, 17, 17, 19, 17];
initChart(chart2, '#kt_charts_widget_11_tab_2', '#kt_charts_widget_11_chart_2', chart2Data, false);
var chart3Data = [17, 20, 20, 19, 19, 17, 17, 19, 19, 21, 21, 19, 19, 21, 21, 18, 18, 16, 17, 17, 19, 19, 21, 21, 19, 19, 17, 17, 18, 18];
initChart(chart3, '#kt_charts_widget_11_tab_3', '#kt_charts_widget_11_chart_3', chart3Data, true);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
initChart(chart1, '#kt_charts_widget_11_tab_1', '#kt_charts_widget_11_chart_1', chart1Data, chart1.rendered);
initChart(chart2, '#kt_charts_widget_11_tab_2', '#kt_charts_widget_11_chart_2', chart2Data, chart2.rendered);
initChart(chart3, '#kt_charts_widget_11_tab_3', '#kt_charts_widget_11_chart_3', chart3Data, chart3.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget11;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget11.init();
});
"use strict";
// Class definition
var KTChartsWidget12 = function () {
// Private methods
var initChart = function(tabSelector, chartSelector, data, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var options = {
series: [{
name: 'Deliveries',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['22%'],
borderRadius: 5,
dataLabels: {
position: "top" // top, center, bottom
},
startingShape: 'flat'
},
},
legend: {
show: false
},
dataLabels: {
enabled: true,
offsetY: -28,
style: {
fontSize: '13px',
colors: labelColor
},
formatter: function(val) {
return val + "K";
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Grossey', 'Pet Food', 'Flowers', 'Restaurant', 'Kids Toys', 'Clothing', 'Still Water'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
},
crosshairs: {
fill: {
gradient: {
opacityFrom: 0,
opacityTo: 0
}
}
}
},
yaxis: {
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
},
formatter: function(val) {
return val + "K";
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return + val + 'K'
}
}
},
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-primary-light')],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
var chart = new ApexCharts(element, options);
var init = false;
var tab = document.querySelector(tabSelector);
if (initByDefault === true) {
chart.render();
init = true;
}
tab.addEventListener('shown.bs.tab', function (event) {
if (init == false) {
chart.render();
init = true;
}
})
}
// Public methods
return {
init: function () {
initChart('#kt_charts_widget_12_tab_1', '#kt_charts_widget_12_chart_1', [54, 42, 75, 110, 23, 87, 50], true);
initChart('#kt_charts_widget_12_tab_2', '#kt_charts_widget_12_chart_2', [25, 55, 35, 50, 45, 20, 31], false);
initChart('#kt_charts_widget_12_tab_3', '#kt_charts_widget_12_chart_3', [45, 15, 35, 70, 45, 50, 21], false);
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget12;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget12.init();
});
"use strict";
// Class definition
var KTChartsWidget13 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_13_chart");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
})
);
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set(
"cursor",
am5xy.XYCursor.new(root, {
behavior: "none"
})
);
cursor.lineY.set("visible", false);
// The data
var data = [
{
year: "2003",
cars: 1587,
motorcycles: 650,
bicycles: 121,
},
{
year: "2004",
cars: 1567,
motorcycles: 683,
bicycles: 146,
},
{
year: "2005",
cars: 1617,
motorcycles: 691,
bicycles: 138,
},
{
year: "2006",
cars: 1630,
motorcycles: 642,
bicycles: 127,
},
{
year: "2007",
cars: 1660,
motorcycles: 699,
bicycles: 105,
},
{
year: "2008",
cars: 1683,
motorcycles: 721,
bicycles: 109,
},
{
year: "2009",
cars: 1691,
motorcycles: 737,
bicycles: 112,
},
{
year: "2010",
cars: 1298,
motorcycles: 680,
bicycles: 101,
},
{
year: "2011",
cars: 1275,
motorcycles: 664,
bicycles: 97,
},
{
year: "2012",
cars: 1246,
motorcycles: 648,
bicycles: 93,
},
{
year: "2013",
cars: 1318,
motorcycles: 697,
bicycles: 111,
},
{
year: "2014",
cars: 1213,
motorcycles: 633,
bicycles: 87,
},
{
year: "2015",
cars: 1199,
motorcycles: 621,
bicycles: 79,
},
{
year: "2016",
cars: 1110,
motorcycles: 210,
bicycles: 81,
},
{
year: "2017",
cars: 1165,
motorcycles: 232,
bicycles: 75,
},
{
year: "2018",
cars: 1145,
motorcycles: 219,
bicycles: 88,
},
{
year: "2019",
cars: 1163,
motorcycles: 201,
bicycles: 82,
},
{
year: "2020",
cars: 1180,
motorcycles: 285,
bicycles: 87,
},
{
year: "2021",
cars: 1159,
motorcycles: 277,
bicycles: 71,
},
];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "year",
startLocation: 0.5,
endLocation: 0.5,
renderer: am5xy.AxisRendererX.new(root, {}),
tooltip: am5.Tooltip.new(root, {}),
})
);
xAxis.get("renderer").grid.template.setAll({
disabled: true,
strokeOpacity: 0
});
xAxis.get("renderer").labels.template.setAll({
fontWeight: "400",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {}),
})
);
yAxis.get("renderer").grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
strokeWidth: 1,
strokeOpacity: 1,
strokeDasharray: [3]
});
yAxis.get("renderer").labels.template.setAll({
fontWeight: "400",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function createSeries(name, field, color) {
var series = chart.series.push(
am5xy.LineSeries.new(root, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
stacked: true,
valueYField: field,
categoryXField: "year",
fill: am5.color(color),
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "[bold]{name}[/]\n{categoryX}: {valueY}",
}),
})
);
series.fills.template.setAll({
fillOpacity: 0.5,
visible: true,
});
series.data.setAll(data);
series.appear(1000);
}
createSeries("Cars", "cars", KTUtil.getCssVariableValue('--bs-primary'));
createSeries("Motorcycles", "motorcycles", KTUtil.getCssVariableValue('--bs-success'));
createSeries("Bicycles", "bicycles", KTUtil.getCssVariableValue('--bs-warning'));
// Add scrollbar
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
var scrollbarX = chart.set(
"scrollbarX",
am5.Scrollbar.new(root, {
orientation: "horizontal",
marginBottom: 25,
height: 8
})
);
// Create axis ranges
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
var rangeDataItem = xAxis.makeDataItem({
category: "2016",
endCategory: "2021",
});
var range = xAxis.createAxisRange(rangeDataItem);
rangeDataItem.get("grid").setAll({
stroke: am5.color(KTUtil.getCssVariableValue('--bs-gray-200')),
strokeOpacity: 0.5,
strokeDasharray: [3],
});
rangeDataItem.get("axisFill").setAll({
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-200')),
fillOpacity: 0.1,
});
rangeDataItem.get("label").setAll({
inside: true,
text: "Fines increased",
rotation: 90,
centerX: am5.p100,
centerY: am5.p100,
location: 0,
paddingBottom: 10,
paddingRight: 15,
});
var rangeDataItem2 = xAxis.makeDataItem({
category: "2021",
});
var range2 = xAxis.createAxisRange(rangeDataItem2);
rangeDataItem2.get("grid").setAll({
stroke: am5.color(KTUtil.getCssVariableValue('--bs-danger')),
strokeOpacity: 1,
strokeDasharray: [3],
});
rangeDataItem2.get("label").setAll({
inside: true,
text: "Fee introduced",
rotation: 90,
centerX: am5.p100,
centerY: am5.p100,
location: 0,
paddingBottom: 10,
paddingRight: 15,
});
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
chart.appear(1000, 100);
}
am5.ready(function () {
init();
}); // end am5.ready()
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget13;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget13.init();
});
"use strict";
// Class definition
var KTChartsWidget14 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_14_chart");
if (!element) {
return;
}
am5.ready(function () {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
innerRadius: am5.percent(20),
startAngle: -90,
endAngle: 180,
})
);
// Data
var data = [
{
category: "Research",
value: 80,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-info')),
},
},
{
category: "Marketing",
value: 35,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')),
},
},
{
category: "Distribution",
value: 92,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
},
},
{
category: "Human Resources",
value: 68,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
},
},
];
// Add cursor
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
var cursor = chart.set(
"cursor",
am5radar.RadarCursor.new(root, {
behavior: "zoomX",
})
);
cursor.lineY.set("visible", false);
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {
//minGridDistance: 50
});
xRenderer.labels.template.setAll({
radius: 10
});
xRenderer.grid.template.setAll({
forceHidden: true,
});
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: xRenderer,
min: 0,
max: 100,
strictMinMax: true,
numberFormat: "#'%'",
tooltip: am5.Tooltip.new(root, {})
})
);
xAxis.get("renderer").labels.template.setAll({
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500')),
fontWeight: "500",
fontSize: 16,
});
var yRenderer = am5radar.AxisRendererRadial.new(root, {
minGridDistance: 20,
});
yRenderer.labels.template.setAll({
centerX: am5.p100,
fontWeight: "500",
fontSize: 18,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500')),
templateField: "columnSettings",
});
yRenderer.grid.template.setAll({
forceHidden: true,
});
var yAxis = chart.yAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: yRenderer,
})
);
yAxis.data.setAll(data);
// Create series
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
var series1 = chart.series.push(
am5radar.RadarColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
clustered: false,
valueXField: "full",
categoryYField: "category",
fill: root.interfaceColors.get("alternativeBackground"),
})
);
series1.columns.template.setAll({
width: am5.p100,
fillOpacity: 0.08,
strokeOpacity: 0,
cornerRadius: 20,
});
series1.data.setAll(data);
var series2 = chart.series.push(
am5radar.RadarColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
clustered: false,
valueXField: "value",
categoryYField: "category",
})
);
series2.columns.template.setAll({
width: am5.p100,
strokeOpacity: 0,
tooltipText: "{category}: {valueX}%",
cornerRadius: 20,
templateField: "columnSettings",
});
series2.data.setAll(data);
// Animate chart and series in
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
series1.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget14;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget14.init();
});
"use strict";
// Class definition
var KTChartsWidget15 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_15_chart");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
//wheelX: "panX",
//wheelY: "zoomX",
layout: root.verticalLayout,
})
);
// Data
var colors = chart.get("colors");
var data = [
{
country: "US",
visits: 725,
icon: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "UK",
visits: 625,
icon: "https://www.amcharts.com/wp-content/uploads/flags/united-kingdom.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "China",
visits: 602,
icon: "https://www.amcharts.com/wp-content/uploads/flags/china.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "Japan",
visits: 509,
icon: "https://www.amcharts.com/wp-content/uploads/flags/japan.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "Germany",
visits: 322,
icon: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "France",
visits: 214,
icon: "https://www.amcharts.com/wp-content/uploads/flags/france.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "India",
visits: 204,
icon: "https://www.amcharts.com/wp-content/uploads/flags/india.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
}
},
{
country: "Spain",
visits: 200,
icon: "https://www.amcharts.com/wp-content/uploads/flags/spain.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "Italy",
visits: 165,
icon: "https://www.amcharts.com/wp-content/uploads/flags/italy.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "Russia",
visits: 152,
icon: "https://www.amcharts.com/wp-content/uploads/flags/russia.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "Norway",
visits: 125,
icon: "https://www.amcharts.com/wp-content/uploads/flags/norway.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
{
country: "Canada",
visits: 99,
icon: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg",
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))
}
},
];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "country",
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 30,
}),
bullet: function (root, axis, dataItem) {
return am5xy.AxisBullet.new(root, {
location: 0.5,
sprite: am5.Picture.new(root, {
width: 24,
height: 24,
centerY: am5.p50,
centerX: am5.p50,
src: dataItem.dataContext.icon,
}),
});
},
})
);
xAxis.get("renderer").labels.template.setAll({
paddingTop: 20,
fontWeight: "400",
fontSize: 10,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
xAxis.get("renderer").grid.template.setAll({
disabled: true,
strokeOpacity: 0
});
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {}),
})
);
yAxis.get("renderer").grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
strokeWidth: 1,
strokeOpacity: 1,
strokeDasharray: [3]
});
yAxis.get("renderer").labels.template.setAll({
fontWeight: "400",
fontSize: 10,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(
am5xy.ColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
valueYField: "visits",
categoryXField: "country"
})
);
series.columns.template.setAll({
tooltipText: "{categoryX}: {valueY}",
tooltipY: 0,
strokeOpacity: 0,
templateField: "columnSettings",
});
series.columns.template.setAll({
strokeOpacity: 0,
cornerRadiusBR: 0,
cornerRadiusTR: 6,
cornerRadiusBL: 0,
cornerRadiusTL: 6,
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}
am5.ready(function () {
init();
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget15;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget15.init();
});
"use strict";
// Class definition
var KTChartsWidget16 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_16_chart");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout,
})
);
var colors = chart.get("colors");
var data = [
{
country: "US",
visits: 725,
},
{
country: "UK",
visits: 625,
},
{
country: "China",
visits: 602,
},
{
country: "Japan",
visits: 509,
},
{
country: "Germany",
visits: 322,
},
{
country: "France",
visits: 214,
},
{
country: "India",
visits: 204,
},
{
country: "Spain",
visits: 198,
},
{
country: "Italy",
visits: 165,
},
{
country: "Russia",
visits: 130,
},
{
country: "Norway",
visits: 93,
},
{
country: "Canada",
visits: 41,
},
];
prepareParetoData();
function prepareParetoData() {
var total = 0;
for (var i = 0; i < data.length; i++) {
var value = data[i].visits;
total += value;
}
var sum = 0;
for (var i = 0; i < data.length; i++) {
var value = data[i].visits;
sum += value;
data[i].pareto = (sum / total) * 100;
}
}
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "country",
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 30,
}),
})
);
xAxis.get("renderer").labels.template.setAll({
paddingTop: 10,
fontWeight: "400",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
xAxis.get("renderer").grid.template.setAll({
disabled: true,
strokeOpacity: 0
});
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {}),
})
);
yAxis.get("renderer").labels.template.setAll({
paddingLeft: 10,
fontWeight: "400",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
yAxis.get("renderer").grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
strokeWidth: 1,
strokeOpacity: 1,
strokeDasharray: [3]
});
var paretoAxisRenderer = am5xy.AxisRendererY.new(root, {
opposite: true,
});
var paretoAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: paretoAxisRenderer,
min: 0,
max: 100,
strictMinMax: true,
})
);
paretoAxis.get("renderer").labels.template.setAll({
fontWeight: "400",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
paretoAxisRenderer.grid.template.set("forceHidden", true);
paretoAxis.set("numberFormat", "#'%");
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(
am5xy.ColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
valueYField: "visits",
categoryXField: "country",
})
);
series.columns.template.setAll({
tooltipText: "{categoryX}: {valueY}",
tooltipY: 0,
strokeOpacity: 0,
cornerRadiusTL: 6,
cornerRadiusTR: 6,
});
series.columns.template.adapters.add(
"fill",
function (fill, target) {
return chart
.get("colors")
.getIndex(series.dataItems.indexOf(target.dataItem));
}
);
// pareto series
var paretoSeries = chart.series.push(
am5xy.LineSeries.new(root, {
xAxis: xAxis,
yAxis: paretoAxis,
valueYField: "pareto",
categoryXField: "country",
stroke: am5.color(KTUtil.getCssVariableValue('--bs-dark')),
maskBullets: false,
})
);
paretoSeries.bullets.push(function () {
return am5.Bullet.new(root, {
locationY: 1,
sprite: am5.Circle.new(root, {
radius: 5,
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
stroke: am5.color(KTUtil.getCssVariableValue('--bs-dark'))
}),
});
});
series.data.setAll(data);
paretoSeries.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}
am5.ready(function () {
init();
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget16;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget16.init();
});
"use strict";
// Class definition
var KTChartsWidget17 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_17_chart");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
// start and end angle must be set both for chart and series
var chart = root.container.children.push(
am5percent.PieChart.new(root, {
startAngle: 180,
endAngle: 360,
layout: root.verticalLayout,
innerRadius: am5.percent(50),
})
);
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
// start and end angle must be set both for chart and series
var series = chart.series.push(
am5percent.PieSeries.new(root, {
startAngle: 180,
endAngle: 360,
valueField: "value",
categoryField: "category",
alignLabels: false,
})
);
series.labels.template.setAll({
fontWeight: "400",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
series.states.create("hidden", {
startAngle: 180,
endAngle: 180,
});
series.slices.template.setAll({
cornerRadius: 5,
});
series.ticks.template.setAll({
forceHidden: true,
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([
{ value: 10, category: "One", fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')) },
{ value: 9, category: "Two", fill: am5.color(KTUtil.getCssVariableValue('--bs-success')) },
{ value: 6, category: "Three", fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')) },
{ value: 5, category: "Four", fill: am5.color(KTUtil.getCssVariableValue('--bs-warning')) },
{ value: 4, category: "Five", fill: am5.color(KTUtil.getCssVariableValue('--bs-info')) },
{ value: 3, category: "Six", fill: am5.color(KTUtil.getCssVariableValue('--bs-secondary')) }
]);
series.appear(1000, 100);
}
am5.ready(function () {
init();
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget17;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget17.init();
});
"use strict";
// Class definition
var KTChartsWidget18 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_18_chart");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var options = {
series: [{
name: 'Spent time',
data: [54, 42, 75, 110, 23, 87, 50]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['28%'],
borderRadius: 5,
dataLabels: {
position: "top" // top, center, bottom
},
startingShape: 'flat'
},
},
legend: {
show: false
},
dataLabels: {
enabled: true,
offsetY: -28,
style: {
fontSize: '13px',
colors: [labelColor]
},
formatter: function(val) {
return val;// + "H";
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['QA Analysis', 'Marketing', 'Web Dev', 'Maths', 'Front-end Dev', 'Physics', 'Phylosophy'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
},
crosshairs: {
fill: {
gradient: {
opacityFrom: 0,
opacityTo: 0
}
}
}
},
yaxis: {
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
},
formatter: function(val) {
return val + "H";
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return + val + ' hours'
}
}
},
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-primary-light')],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget18;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget18.init();
});
"use strict";
// Class definition
var KTChartsWidget19 = (function () {
// Private methods
var initChart1 = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_19_chart_1");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
innerRadius: am5.percent(20),
startAngle: -90,
endAngle: 180,
})
);
// Data
var data = [
{
category: "Research",
value: 80,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-info')),
},
},
{
category: "Marketing",
value: 35,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')),
},
},
{
category: "Distribution",
value: 92,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
},
},
{
category: "Human Resources",
value: 68,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
},
},
];
// Add cursor
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
var cursor = chart.set(
"cursor",
am5radar.RadarCursor.new(root, {
behavior: "zoomX",
})
);
cursor.lineY.set("visible", false);
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {
//minGridDistance: 50
});
xRenderer.labels.template.setAll({
radius: 10
});
xRenderer.grid.template.setAll({
forceHidden: true,
});
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: xRenderer,
min: 0,
max: 100,
strictMinMax: true,
numberFormat: "#'%'",
tooltip: am5.Tooltip.new(root, {}),
})
);
xAxis.get("renderer").labels.template.setAll({
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500')),
fontWeight: "500",
fontSize: 16,
});
var yRenderer = am5radar.AxisRendererRadial.new(root, {
minGridDistance: 20,
});
yRenderer.labels.template.setAll({
centerX: am5.p100,
fontWeight: "500",
fontSize: 18,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500')),
templateField: "columnSettings",
});
yRenderer.grid.template.setAll({
forceHidden: true,
});
var yAxis = chart.yAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: yRenderer,
})
);
yAxis.data.setAll(data);
// Create series
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
var series1 = chart.series.push(
am5radar.RadarColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
clustered: false,
valueXField: "full",
categoryYField: "category",
fill: root.interfaceColors.get("alternativeBackground"),
})
);
series1.columns.template.setAll({
width: am5.p100,
fillOpacity: 0.08,
strokeOpacity: 0,
cornerRadius: 20,
});
series1.data.setAll(data);
var series2 = chart.series.push(
am5radar.RadarColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
clustered: false,
valueXField: "value",
categoryYField: "category",
})
);
series2.columns.template.setAll({
width: am5.p100,
strokeOpacity: 0,
tooltipText: "{category}: {valueX}%",
cornerRadius: 20,
templateField: "columnSettings",
});
series2.data.setAll(data);
// Animate chart and series in
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
series1.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);
}
am5.ready(function () {
init();
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
var initChart2 = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_19_chart_2");
var root;
if (!element) {
return;
}
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
innerRadius: am5.percent(20),
startAngle: -90,
endAngle: 180,
})
);
// Data
var data = [
{
category: "Research",
value: 40,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-info')),
},
},
{
category: "Marketing",
value: 50,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')),
},
},
{
category: "Distribution",
value: 80,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
},
},
{
category: "Human Resources",
value: 70,
full: 100,
columnSettings: {
fillOpacity: 1,
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
},
},
];
// Add cursor
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
var cursor = chart.set(
"cursor",
am5radar.RadarCursor.new(root, {
behavior: "zoomX",
})
);
cursor.lineY.set("visible", false);
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {
//minGridDistance: 50
});
xRenderer.labels.template.setAll({
radius: 10
});
xRenderer.grid.template.setAll({
forceHidden: true,
});
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: xRenderer,
min: 0,
max: 100,
strictMinMax: true,
numberFormat: "#'%'",
tooltip: am5.Tooltip.new(root, {}),
})
);
var yRenderer = am5radar.AxisRendererRadial.new(root, {
minGridDistance: 20,
});
yRenderer.labels.template.setAll({
centerX: am5.p100,
fontWeight: "500",
fontSize: 18,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500')),
templateField: "columnSettings",
});
yRenderer.grid.template.setAll({
forceHidden: true,
});
var yAxis = chart.yAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: yRenderer,
})
);
yAxis.data.setAll(data);
// Create series
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
var series1 = chart.series.push(
am5radar.RadarColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
clustered: false,
valueXField: "full",
categoryYField: "category",
fill: root.interfaceColors.get("alternativeBackground"),
})
);
series1.columns.template.setAll({
width: am5.p100,
fillOpacity: 0.08,
strokeOpacity: 0,
cornerRadius: 20,
});
series1.data.setAll(data);
var series2 = chart.series.push(
am5radar.RadarColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
clustered: false,
valueXField: "value",
categoryYField: "category",
})
);
series2.columns.template.setAll({
width: am5.p100,
strokeOpacity: 0,
tooltipText: "{category}: {valueX}%",
cornerRadius: 20,
templateField: "columnSettings",
});
series2.data.setAll(data);
// Animate chart and series in
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
series1.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);
}
am5.ready(function () {
init();
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart1();
initChart2();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget19;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget19.init();
});
"use strict";
// Class definition
var KTChartsWidget2 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_2");
if (!element) {
return;
}
var color = element.getAttribute('data-kt-chart-color');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-800');
var strokeColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var lightColor = KTUtil.getCssVariableValue('--bs-' + color + '-light');
var options = {
series: [{
name: 'Overview',
data: [15, 15, 45, 45, 25, 25, 55, 55, 20, 20, 37]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
show: false,
position: 'front',
stroke: {
color: strokeColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
min: 0,
max: 60,
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val
}
}
},
colors: [lightColor],
markers: {
colors: lightColor,
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart();
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget2;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget2.init();
});
"use strict";
// Class definition
var KTChartsWidget20 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_20");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-danger');
var lightColor = KTUtil.getCssVariableValue('--bs-danger');
var chartInfo = element.getAttribute('data-kt-chart-info');
var options = {
series: [{
name: chartInfo,
data: [34.5,34.5,35,35,35.5,35.5,35,35,35.5,35.5,35,35,34.5,34.5,35,35,35.4,35.4,35]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 19', 'Apr 21', ''],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
tickAmount: 6,
labels: {
rotate: 0,
rotateAlways: true,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
max: 36.3,
min: 33,
tickAmount: 6,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
},
formatter: function (val) {
return '$' + parseInt(10 * val)
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return '$' + parseInt(10 * val)
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget20;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget20.init();
});
"use strict";
// Class definition
var KTChartsWidget21 = (function () {
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_21");
if (!element) {
return;
}
var options = {
"type": "serial",
"theme": "light",
"legend": {
"equalWidths": false,
"useGraphSettings": true,
"valueAlign": "left",
"valueWidth": 120
},
"dataProvider": [{
"date": "2012-01-01",
"distance": 227,
"townName": "New York",
"townName2": "New York",
"townSize": 25,
"latitude": 40.71,
"duration": 408
}, {
"date": "2012-01-02",
"distance": 371,
"townName": "Washington",
"townSize": 14,
"latitude": 38.89,
"duration": 482
}, {
"date": "2012-01-03",
"distance": 433,
"townName": "Wilmington",
"townSize": 6,
"latitude": 34.22,
"duration": 562
}, {
"date": "2012-01-04",
"distance": 345,
"townName": "Jacksonville",
"townSize": 7,
"latitude": 30.35,
"duration": 379
}, {
"date": "2012-01-05",
"distance": 480,
"townName": "Miami",
"townName2": "Miami",
"townSize": 10,
"latitude": 25.83,
"duration": 501
}, {
"date": "2012-01-06",
"distance": 386,
"townName": "Tallahassee",
"townSize": 7,
"latitude": 30.46,
"duration": 443
}, {
"date": "2012-01-07",
"distance": 348,
"townName": "New Orleans",
"townSize": 10,
"latitude": 29.94,
"duration": 405
}, {
"date": "2012-01-08",
"distance": 238,
"townName": "Houston",
"townName2": "Houston",
"townSize": 16,
"latitude": 29.76,
"duration": 309
}, {
"date": "2012-01-09",
"distance": 218,
"townName": "Dalas",
"townSize": 17,
"latitude": 32.8,
"duration": 287
}, {
"date": "2012-01-10",
"distance": 349,
"townName": "Oklahoma City",
"townSize": 11,
"latitude": 35.49,
"duration": 485
}, {
"date": "2012-01-11",
"distance": 603,
"townName": "Kansas City",
"townSize": 10,
"latitude": 39.1,
"duration": 890
}, {
"date": "2012-01-12",
"distance": 534,
"townName": "Denver",
"townName2": "Denver",
"townSize": 18,
"latitude": 39.74,
"duration": 810
}, {
"date": "2012-01-13",
"townName": "Salt Lake City",
"townSize": 12,
"distance": 425,
"duration": 670,
"latitude": 40.75,
"dashLength": 8,
"alpha": 0.4
}, {
"date": "2012-01-14",
"latitude": 36.1,
"duration": 470,
"townName": "Las Vegas",
"townName2": "Las Vegas"
}, {
"date": "2012-01-15"
}, {
"date": "2012-01-16"
}, {
"date": "2012-01-17"
}, {
"date": "2012-01-18"
}, {
"date": "2012-01-19"
}],
"valueAxes": [{
"id": "distanceAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"title": "distance"
}, {
"id": "latitudeAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "right"
}, {
"id": "durationAxis",
"duration": "mm",
"durationUnits": {
"hh": "h ",
"mm": "min"
},
"axisAlpha": 0,
"gridAlpha": 0,
"inside": true,
"position": "right",
"title": "duration"
}],
"graphs": [{
"alphaField": "alpha",
"balloonText": "[[value]] miles",
"dashLengthField": "dashLength",
"fillAlphas": 0.7,
"legendPeriodValueText": "total: [[value.sum]] mi",
"legendValueText": "[[value]] mi",
"title": "distance",
"type": "column",
"valueField": "distance",
"valueAxis": "distanceAxis"
}, {
"balloonText": "latitude:[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"useLineColorForBulletBorder": true,
"bulletColor": "#FFFFFF",
"bulletSizeField": "townSize",
"dashLengthField": "dashLength",
"descriptionField": "townName",
"labelPosition": "right",
"labelText": "[[townName2]]",
"legendValueText": "[[value]]/[[description]]",
"title": "latitude/city",
"fillAlphas": 0,
"valueField": "latitude",
"valueAxis": "latitudeAxis"
}, {
"bullet": "square",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 1,
"dashLengthField": "dashLength",
"legendValueText": "[[value]]",
"title": "duration",
"fillAlphas": 0,
"valueField": "duration",
"valueAxis": "durationAxis"
}],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": false,
"zoomable": false
},
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"autoGridCount": false,
"axisColor": "#555555",
"gridAlpha": 0.1,
"gridColor": "#FFFFFF",
"gridCount": 50
},
"export": {
"enabled": true
}
};
var chart = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.render();
}, 200);
}
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget21;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget21.init();
});
"use strict";
// Class definition
var KTChartsWidget22 = function () {
// Private methods
var initChart = function(tabSelector, chartSelector, data, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var options = {
series: data,
chart: {
fontFamily: 'inherit',
type: 'donut',
width: 250,
},
plotOptions: {
pie: {
donut: {
size: '50%',
labels: {
value: {
fontSize: '10px'
}
}
}
}
},
colors: [
KTUtil.getCssVariableValue('--bs-info'),
KTUtil.getCssVariableValue('--bs-success'),
KTUtil.getCssVariableValue('--bs-primary'),
KTUtil.getCssVariableValue('--bs-danger')
],
stroke: {
width: 0
},
labels: ['Sales', 'Sales', 'Sales', 'Sales'],
legend: {
show: false,
},
fill: {
type: 'false',
}
};
var chart = new ApexCharts(element, options);
var init = false;
var tab = document.querySelector(tabSelector);
if (initByDefault === true) {
chart.render();
init = true;
}
tab.addEventListener('shown.bs.tab', function (event) {
if (init == false) {
chart.render();
init = true;
}
})
}
// Public methods
return {
init: function () {
initChart('#kt_chart_widgets_22_tab_1', '#kt_chart_widgets_22_chart_1', [20, 100, 15, 25], true);
initChart('#kt_chart_widgets_22_tab_2', '#kt_chart_widgets_22_chart_2', [70, 13, 11, 2], false);
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget22;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget22.init();
});
// Class definition
var KTChartsWidget23 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_23");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
layout: root.verticalLayout,
})
);
var data = [
{
year: "2016",
income: 23.5,
expenses: 21.1,
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
},
},
{
year: "2017",
income: 26.2,
expenses: 30.5,
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
},
},
{
year: "2018",
income: 30.1,
expenses: 34.9,
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
},
},
{
year: "2019",
income: 29.5,
expenses: 31.1,
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
},
},
{
year: "2020",
income: 30.6,
expenses: 28.2,
strokeSettings: {
strokeWidth: 3,
strokeDasharray: [5, 5],
},
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
},
},
{
year: "2021",
income: 40.6,
expenses: 28.2,
strokeSettings: {
strokeWidth: 3,
strokeDasharray: [5, 5],
},
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
},
},
{
year: "2022",
income: 34.1,
expenses: 32.9,
strokeSettings: {
strokeWidth: 3,
strokeDasharray: [5, 5],
},
columnSettings: {
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
},
},
];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "year",
renderer: am5xy.AxisRendererX.new(root, {}),
//tooltip: am5.Tooltip.new(root, {}),
})
);
xAxis.data.setAll(data);
xAxis.get("renderer").labels.template.setAll({
paddingTop: 20,
fontWeight: "400",
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
});
xAxis.get("renderer").grid.template.setAll({
disabled: true,
strokeOpacity: 0,
});
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
min: 0,
extraMax: 0.1,
renderer: am5xy.AxisRendererY.new(root, {}),
})
);
yAxis.get("renderer").labels.template.setAll({
paddingTop: 0,
fontWeight: "400",
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
});
yAxis.get("renderer").grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
strokeWidth: 1,
strokeOpacity: 1,
strokeDasharray: [3],
});
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series1 = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "income",
categoryXField: "year",
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "{name} in {categoryX}: {valueY} {info}",
}),
})
);
series1.columns.template.setAll({
tooltipY: am5.percent(10),
templateField: "columnSettings",
});
series1.data.setAll(data);
var series2 = chart.series.push(
am5xy.LineSeries.new(root, {
name: "Expenses",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "expenses",
categoryXField: "year",
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
stroke: am5.color(KTUtil.getCssVariableValue("--bs-success")),
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "{name} in {categoryX}: {valueY} {info}",
}),
})
);
series2.strokes.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue("--bs-success")),
});
series2.strokes.template.setAll({
strokeWidth: 3,
templateField: "strokeSettings",
});
series2.data.setAll(data);
series2.bullets.push(function () {
return am5.Bullet.new(root, {
sprite: am5.Circle.new(root, {
strokeWidth: 3,
stroke: am5.color(KTUtil.getCssVariableValue("--bs-success")),
radius: 5,
fill: am5.color(KTUtil.getCssVariableValue("--bs-success-light")),
}),
});
});
series1.columns.template.setAll({
strokeOpacity: 0,
cornerRadiusBR: 0,
cornerRadiusTR: 6,
cornerRadiusBL: 0,
cornerRadiusTL: 6,
});
chart.set("cursor", am5xy.XYCursor.new(root, {}));
chart.get("cursor").lineX.setAll({ visible: false });
chart.get("cursor").lineY.setAll({ visible: false });
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(
am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50,
})
);
legend.data.setAll(chart.series.values);
legend.labels.template.setAll({
fontWeight: "600",
fontSize: 14,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
chart.appear(1000, 100);
series1.appear();
}
am5.ready(function () {
init();
}); // end am5.ready()
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget23;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget23.init();
});
// Class definition
var KTChartsWidget24 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === 'undefined') {
return;
}
var element = document.getElementById("kt_charts_widget_24");
if (!element) {
return;
}
var root;
var init = function() {
var usData = [{
"age": "0 to 5",
"male": 10175713,
"female": 9736305
}, {
"age": "5 to 9",
"male": 10470147,
"female": 10031835
}, {
"age": "10 to 14",
"male": 10561873,
"female": 10117913
}, {
"age": "15 to 17",
"male": 6447043,
"female": 6142996
}, {
"age": "18 to 21",
"male": 9349745,
"female": 8874664
}, {
"age": "22 to 24",
"male": 6722248,
"female": 6422017
}, {
"age": "25 to 29",
"male": 10989596,
"female": 10708414
}, {
"age": "30 to 34",
"male": 10625791,
"female": 10557848
}, {
"age": "35 to 39",
"male": 9899569,
"female": 9956213
}, {
"age": "40 to 44",
"male": 10330986,
"female": 10465142
}, {
"age": "45 to 49",
"male": 10571984,
"female": 10798384
}, {
"age": "50 to 54",
"male": 11051409,
"female": 11474081
}, {
"age": "55 to 59",
"male": 10173646,
"female": 10828301
}, {
"age": "60 to 64",
"male": 8824852,
"female": 9590829
}, {
"age": "65 to 69",
"male": 6876271,
"female": 7671175
}, {
"age": "70 to 74",
"male": 4867513,
"female": 5720208
}, {
"age": "75 to 79",
"male": 3416432,
"female": 4313697
}, {
"age": "80 to 84",
"male": 2378691,
"female": 3432738
}, {
"age": "85 and Older",
"male": 2000771,
"female": 3937981
}];
var stateData = {
"AK": [{
"age": "0 to 5",
"male": 28346,
"female": 26607
}, {
"age": "10 to 14",
"male": 26350,
"female": 24821
}, {
"age": "15 to 17",
"male": 15929,
"female": 14735
}, {
"age": "18 to 21",
"male": 25360,
"female": 19030
}, {
"age": "22 to 24",
"male": 20755,
"female": 15663
}, {
"age": "25 to 29",
"male": 32415,
"female": 28259
}, {
"age": "30 to 34",
"male": 28232,
"female": 25272
}, {
"age": "35 to 39",
"male": 24217,
"female": 22002
}, {
"age": "40 to 44",
"male": 23429,
"female": 21968
}, {
"age": "45 to 49",
"male": 24764,
"female": 22784
}, {
"age": "5 to 9",
"male": 26276,
"female": 25063
}, {
"age": "50 to 54",
"male": 27623,
"female": 25503
}, {
"age": "55 to 59",
"male": 26300,
"female": 25198
}, {
"age": "60 to 64",
"male": 21798,
"female": 18970
}, {
"age": "65 to 69",
"male": 13758,
"female": 12899
}, {
"age": "70 to 74",
"male": 8877,
"female": 8269
}, {
"age": "75 to 79",
"male": 4834,
"female": 4894
}, {
"age": "80 to 84",
"male": 3015,
"female": 3758
}, {
"age": "85 and Older",
"male": 1882,
"female": 3520
}
],
"AL": [{
"age": "0 to 5",
"male": 150860,
"female": 144194
}, {
"age": "10 to 14",
"male": 161596,
"female": 156841
}, {
"age": "15 to 17",
"male": 98307,
"female": 94462
}, {
"age": "18 to 21",
"male": 142173,
"female": 136514
}, {
"age": "22 to 24",
"male": 99164,
"female": 101444
}, {
"age": "25 to 29",
"male": 154977,
"female": 159815
}, {
"age": "30 to 34",
"male": 150036,
"female": 156764
}, {
"age": "35 to 39",
"male": 141667,
"female": 152220
}, {
"age": "40 to 44",
"male": 155693,
"female": 159835
}, {
"age": "45 to 49",
"male": 156413,
"female": 163909
}, {
"age": "5 to 9",
"male": 156380,
"female": 149334
}, {
"age": "50 to 54",
"male": 166863,
"female": 178187
}, {
"age": "55 to 59",
"male": 156994,
"female": 169355
}, {
"age": "60 to 64",
"male": 140659,
"female": 156638
}, {
"age": "65 to 69",
"male": 112724,
"female": 128494
}, {
"age": "70 to 74",
"male": 79258,
"female": 96507
}, {
"age": "75 to 79",
"male": 55122,
"female": 75371
}, {
"age": "80 to 84",
"male": 36252,
"female": 53976
}, {
"age": "85 and Older",
"male": 25955,
"female": 55667
}
],
"AR": [{
"age": "0 to 5",
"male": 98246,
"female": 93534
}, {
"age": "10 to 14",
"male": 99707,
"female": 96862
}, {
"age": "15 to 17",
"male": 60521,
"female": 57735
}, {
"age": "18 to 21",
"male": 87209,
"female": 81936
}, {
"age": "22 to 24",
"male": 59114,
"female": 59387
}, {
"age": "25 to 29",
"male": 96190,
"female": 96573
}, {
"age": "30 to 34",
"male": 96273,
"female": 95632
}, {
"age": "35 to 39",
"male": 90371,
"female": 90620
}, {
"age": "40 to 44",
"male": 91881,
"female": 93777
}, {
"age": "45 to 49",
"male": 93238,
"female": 95476
}, {
"age": "5 to 9",
"male": 103613,
"female": 97603
}, {
"age": "50 to 54",
"male": 98960,
"female": 102953
}, {
"age": "55 to 59",
"male": 92133,
"female": 100676
}, {
"age": "60 to 64",
"male": 84082,
"female": 90243
}, {
"age": "65 to 69",
"male": 70121,
"female": 76669
}, {
"age": "70 to 74",
"male": 52154,
"female": 61686
}, {
"age": "75 to 79",
"male": 36856,
"female": 44371
}, {
"age": "80 to 84",
"male": 23098,
"female": 35328
}, {
"age": "85 and Older",
"male": 18146,
"female": 35234
}
],
"AZ": [{
"age": "0 to 5",
"male": 221511,
"female": 212324
}, {
"age": "10 to 14",
"male": 233530,
"female": 222965
}, {
"age": "15 to 17",
"male": 138926,
"female": 132399
}, {
"age": "18 to 21",
"male": 200240,
"female": 187786
}, {
"age": "22 to 24",
"male": 142852,
"female": 132457
}, {
"age": "25 to 29",
"male": 231488,
"female": 215985
}, {
"age": "30 to 34",
"male": 223754,
"female": 214946
}, {
"age": "35 to 39",
"male": 206718,
"female": 202482
}, {
"age": "40 to 44",
"male": 213591,
"female": 210621
}, {
"age": "45 to 49",
"male": 205830,
"female": 206081
}, {
"age": "5 to 9",
"male": 231249,
"female": 224385
}, {
"age": "50 to 54",
"male": 210386,
"female": 218328
}, {
"age": "55 to 59",
"male": 192614,
"female": 209767
}, {
"age": "60 to 64",
"male": 178325,
"female": 200313
}, {
"age": "65 to 69",
"male": 155852,
"female": 174407
}, {
"age": "70 to 74",
"male": 121878,
"female": 136840
}, {
"age": "75 to 79",
"male": 87470,
"female": 96953
}, {
"age": "80 to 84",
"male": 58553,
"female": 69559
}, {
"age": "85 and Older",
"male": 44321,
"female": 74242
}
],
"CA": [{
"age": "0 to 5",
"male": 1283763,
"female": 1228013
}, {
"age": "10 to 14",
"male": 1297819,
"female": 1245016
}, {
"age": "15 to 17",
"male": 811114,
"female": 773387
}, {
"age": "18 to 21",
"male": 1179739,
"female": 1100368
}, {
"age": "22 to 24",
"male": 883323,
"female": 825833
}, {
"age": "25 to 29",
"male": 1478557,
"female": 1387516
}, {
"age": "30 to 34",
"male": 1399835,
"female": 1348430
}, {
"age": "35 to 39",
"male": 1287803,
"female": 1271908
}, {
"age": "40 to 44",
"male": 1308311,
"female": 1309907
}, {
"age": "45 to 49",
"male": 1306719,
"female": 1303528
}, {
"age": "5 to 9",
"male": 1295030,
"female": 1240201
}, {
"age": "50 to 54",
"male": 1305323,
"female": 1330645
}, {
"age": "55 to 59",
"male": 1161821,
"female": 1223440
}, {
"age": "60 to 64",
"male": 975874,
"female": 1060921
}, {
"age": "65 to 69",
"male": 734814,
"female": 833926
}, {
"age": "70 to 74",
"male": 515115,
"female": 604615
}, {
"age": "75 to 79",
"male": 363282,
"female": 455568
}, {
"age": "80 to 84",
"male": 264126,
"female": 363937
}, {
"age": "85 and Older",
"male": 234767,
"female": 427170
}
],
"CO": [{
"age": "0 to 5",
"male": 173245,
"female": 163629
}, {
"age": "10 to 14",
"male": 179579,
"female": 170930
}, {
"age": "15 to 17",
"male": 102577,
"female": 98569
}, {
"age": "18 to 21",
"male": 152713,
"female": 139268
}, {
"age": "22 to 24",
"male": 116654,
"female": 108238
}, {
"age": "25 to 29",
"male": 204625,
"female": 188680
}, {
"age": "30 to 34",
"male": 200624,
"female": 188616
}, {
"age": "35 to 39",
"male": 183386,
"female": 175326
}, {
"age": "40 to 44",
"male": 184422,
"female": 173654
}, {
"age": "45 to 49",
"male": 174730,
"female": 172981
}, {
"age": "5 to 9",
"male": 179803,
"female": 173524
}, {
"age": "50 to 54",
"male": 183543,
"female": 187757
}, {
"age": "55 to 59",
"male": 170717,
"female": 179537
}, {
"age": "60 to 64",
"male": 150815,
"female": 155924
}, {
"age": "65 to 69",
"male": 111094,
"female": 119530
}, {
"age": "70 to 74",
"male": 72252,
"female": 80168
}, {
"age": "75 to 79",
"male": 49142,
"female": 59393
}, {
"age": "80 to 84",
"male": 31894,
"female": 43881
}, {
"age": "85 and Older",
"male": 26852,
"female": 50634
}
],
"CT": [{
"age": "0 to 5",
"male": 97647,
"female": 93798
}, {
"age": "10 to 14",
"male": 118032,
"female": 113043
}, {
"age": "15 to 17",
"male": 75546,
"female": 71687
}, {
"age": "18 to 21",
"male": 106966,
"female": 102763
}, {
"age": "22 to 24",
"male": 71125,
"female": 64777
}, {
"age": "25 to 29",
"male": 112189,
"female": 108170
}, {
"age": "30 to 34",
"male": 107223,
"female": 109096
}, {
"age": "35 to 39",
"male": 102424,
"female": 106008
}, {
"age": "40 to 44",
"male": 116664,
"female": 123744
}, {
"age": "45 to 49",
"male": 131872,
"female": 139406
}, {
"age": "5 to 9",
"male": 110043,
"female": 104940
}, {
"age": "50 to 54",
"male": 138644,
"female": 146532
}, {
"age": "55 to 59",
"male": 126670,
"female": 132895
}, {
"age": "60 to 64",
"male": 104701,
"female": 114339
}, {
"age": "65 to 69",
"male": 80178,
"female": 91052
}, {
"age": "70 to 74",
"male": 55237,
"female": 65488
}, {
"age": "75 to 79",
"male": 38844,
"female": 51544
}, {
"age": "80 to 84",
"male": 28908,
"female": 43036
}, {
"age": "85 and Older",
"male": 28694,
"female": 59297
}
],
"DC": [{
"age": "0 to 5",
"male": 20585,
"female": 19848
}, {
"age": "10 to 14",
"male": 12723,
"female": 11991
}, {
"age": "15 to 17",
"male": 7740,
"female": 7901
}, {
"age": "18 to 21",
"male": 22350,
"female": 25467
}, {
"age": "22 to 24",
"male": 15325,
"female": 19085
}, {
"age": "25 to 29",
"male": 35295,
"female": 41913
}, {
"age": "30 to 34",
"male": 32716,
"female": 35553
}, {
"age": "35 to 39",
"male": 23748,
"female": 24922
}, {
"age": "40 to 44",
"male": 21158,
"female": 20113
}, {
"age": "45 to 49",
"male": 19279,
"female": 18956
}, {
"age": "5 to 9",
"male": 14999,
"female": 15518
}, {
"age": "50 to 54",
"male": 19249,
"female": 19279
}, {
"age": "55 to 59",
"male": 17592,
"female": 18716
}, {
"age": "60 to 64",
"male": 14272,
"female": 17892
}, {
"age": "65 to 69",
"male": 9740,
"female": 13375
}, {
"age": "70 to 74",
"male": 8221,
"female": 9761
}, {
"age": "75 to 79",
"male": 5071,
"female": 7601
}, {
"age": "80 to 84",
"male": 3399,
"female": 5619
}, {
"age": "85 and Older",
"male": 3212,
"female": 7300
}
],
"DE": [{
"age": "0 to 5",
"male": 28382,
"female": 27430
}, {
"age": "10 to 14",
"male": 29482,
"female": 27484
}, {
"age": "15 to 17",
"male": 17589,
"female": 16828
}, {
"age": "18 to 21",
"male": 26852,
"female": 26911
}, {
"age": "22 to 24",
"male": 19006,
"female": 18413
}, {
"age": "25 to 29",
"male": 30933,
"female": 31146
}, {
"age": "30 to 34",
"male": 28602,
"female": 29431
}, {
"age": "35 to 39",
"male": 26498,
"female": 28738
}, {
"age": "40 to 44",
"male": 27674,
"female": 28519
}, {
"age": "45 to 49",
"male": 30582,
"female": 32924
}, {
"age": "5 to 9",
"male": 28224,
"female": 28735
}, {
"age": "50 to 54",
"male": 32444,
"female": 35052
}, {
"age": "55 to 59",
"male": 29048,
"female": 34377
}, {
"age": "60 to 64",
"male": 27925,
"female": 30017
}, {
"age": "65 to 69",
"male": 22767,
"female": 26707
}, {
"age": "70 to 74",
"male": 17121,
"female": 19327
}, {
"age": "75 to 79",
"male": 11479,
"female": 14264
}, {
"age": "80 to 84",
"male": 7473,
"female": 10353
}, {
"age": "85 and Older",
"male": 6332,
"female": 11385
}
],
"FL": [{
"age": "0 to 5",
"male": 552054,
"female": 529003
}, {
"age": "10 to 14",
"male": 582351,
"female": 558377
}, {
"age": "15 to 17",
"male": 363538,
"female": 345048
}, {
"age": "18 to 21",
"male": 528013,
"female": 498162
}, {
"age": "22 to 24",
"male": 385515,
"female": 368754
}, {
"age": "25 to 29",
"male": 641710,
"female": 622134
}, {
"age": "30 to 34",
"male": 602467,
"female": 602634
}, {
"age": "35 to 39",
"male": 579722,
"female": 585089
}, {
"age": "40 to 44",
"male": 623074,
"female": 639410
}, {
"age": "45 to 49",
"male": 659376,
"female": 677305
}, {
"age": "5 to 9",
"male": 567479,
"female": 543273
}, {
"age": "50 to 54",
"male": 687625,
"female": 723103
}, {
"age": "55 to 59",
"male": 626363,
"female": 685728
}, {
"age": "60 to 64",
"male": 566282,
"female": 651192
}, {
"age": "65 to 69",
"male": 517513,
"female": 589377
}, {
"age": "70 to 74",
"male": 407275,
"female": 470688
}, {
"age": "75 to 79",
"male": 305530,
"female": 361107
}, {
"age": "80 to 84",
"male": 219362,
"female": 281016
}, {
"age": "85 and Older",
"male": 184760,
"female": 314363
}
],
"GA": [{
"age": "0 to 5",
"male": 338979,
"female": 326326
}, {
"age": "10 to 14",
"male": 356404,
"female": 351833
}, {
"age": "15 to 17",
"male": 211908,
"female": 203412
}, {
"age": "18 to 21",
"male": 305617,
"female": 289233
}, {
"age": "22 to 24",
"male": 214032,
"female": 206526
}, {
"age": "25 to 29",
"male": 342885,
"female": 343115
}, {
"age": "30 to 34",
"male": 333159,
"female": 348125
}, {
"age": "35 to 39",
"male": 325121,
"female": 345251
}, {
"age": "40 to 44",
"male": 348120,
"female": 363703
}, {
"age": "45 to 49",
"male": 343559,
"female": 358754
}, {
"age": "5 to 9",
"male": 362147,
"female": 340071
}, {
"age": "50 to 54",
"male": 338424,
"female": 359362
}, {
"age": "55 to 59",
"male": 294734,
"female": 325653
}, {
"age": "60 to 64",
"male": 254497,
"female": 285276
}, {
"age": "65 to 69",
"male": 198714,
"female": 226714
}, {
"age": "70 to 74",
"male": 135107,
"female": 164091
}, {
"age": "75 to 79",
"male": 88135,
"female": 115830
}, {
"age": "80 to 84",
"male": 53792,
"female": 84961
}, {
"age": "85 and Older",
"male": 37997,
"female": 85126
}
],
"HI": [{
"age": "0 to 5",
"male": 46668,
"female": 44389
}, {
"age": "10 to 14",
"male": 42590,
"female": 41289
}, {
"age": "15 to 17",
"male": 24759,
"female": 23961
}, {
"age": "18 to 21",
"male": 39937,
"female": 32348
}, {
"age": "22 to 24",
"male": 35270,
"female": 28495
}, {
"age": "25 to 29",
"male": 58033,
"female": 48700
}, {
"age": "30 to 34",
"male": 51544,
"female": 47286
}, {
"age": "35 to 39",
"male": 44144,
"female": 42208
}, {
"age": "40 to 44",
"male": 45731,
"female": 43404
}, {
"age": "45 to 49",
"male": 44336,
"female": 44134
}, {
"age": "5 to 9",
"male": 44115,
"female": 40426
}, {
"age": "50 to 54",
"male": 46481,
"female": 46908
}, {
"age": "55 to 59",
"male": 45959,
"female": 47379
}, {
"age": "60 to 64",
"male": 42420,
"female": 43735
}, {
"age": "65 to 69",
"male": 34846,
"female": 36670
}, {
"age": "70 to 74",
"male": 22981,
"female": 25496
}, {
"age": "75 to 79",
"male": 15219,
"female": 18755
}, {
"age": "80 to 84",
"male": 11142,
"female": 17952
}, {
"age": "85 and Older",
"male": 13696,
"female": 22893
}
],
"IA": [{
"age": "0 to 5",
"male": 100400,
"female": 96170
}, {
"age": "10 to 14",
"male": 104674,
"female": 98485
}, {
"age": "15 to 17",
"male": 62452,
"female": 59605
}, {
"age": "18 to 21",
"male": 96966,
"female": 91782
}, {
"age": "22 to 24",
"male": 66307,
"female": 62504
}, {
"age": "25 to 29",
"male": 98079,
"female": 93653
}, {
"age": "30 to 34",
"male": 100924,
"female": 97248
}, {
"age": "35 to 39",
"male": 90980,
"female": 89632
}, {
"age": "40 to 44",
"male": 92961,
"female": 90218
}, {
"age": "45 to 49",
"male": 98877,
"female": 96654
}, {
"age": "5 to 9",
"male": 104279,
"female": 100558
}, {
"age": "50 to 54",
"male": 109267,
"female": 110142
}, {
"age": "55 to 59",
"male": 104021,
"female": 106042
}, {
"age": "60 to 64",
"male": 95379,
"female": 95499
}, {
"age": "65 to 69",
"male": 68276,
"female": 73624
}, {
"age": "70 to 74",
"male": 50414,
"female": 56973
}, {
"age": "75 to 79",
"male": 37867,
"female": 48121
}, {
"age": "80 to 84",
"male": 27523,
"female": 39851
}, {
"age": "85 and Older",
"male": 24949,
"female": 52170
}
],
"ID": [{
"age": "0 to 5",
"male": 58355,
"female": 56478
}, {
"age": "10 to 14",
"male": 62528,
"female": 59881
}, {
"age": "15 to 17",
"male": 36373,
"female": 33687
}, {
"age": "18 to 21",
"male": 45752,
"female": 45590
}, {
"age": "22 to 24",
"male": 34595,
"female": 30216
}, {
"age": "25 to 29",
"male": 53998,
"female": 52077
}, {
"age": "30 to 34",
"male": 54217,
"female": 52091
}, {
"age": "35 to 39",
"male": 51247,
"female": 47801
}, {
"age": "40 to 44",
"male": 49113,
"female": 49853
}, {
"age": "45 to 49",
"male": 48392,
"female": 48288
}, {
"age": "5 to 9",
"male": 63107,
"female": 59237
}, {
"age": "50 to 54",
"male": 51805,
"female": 52984
}, {
"age": "55 to 59",
"male": 49226,
"female": 51868
}, {
"age": "60 to 64",
"male": 47343,
"female": 47631
}, {
"age": "65 to 69",
"male": 38436,
"female": 38133
}, {
"age": "70 to 74",
"male": 26243,
"female": 28577
}, {
"age": "75 to 79",
"male": 18404,
"female": 20325
}, {
"age": "80 to 84",
"male": 11653,
"female": 15313
}, {
"age": "85 and Older",
"male": 9677,
"female": 16053
}
],
"IL": [{
"age": "0 to 5",
"male": 408295,
"female": 392900
}, {
"age": "10 to 14",
"male": 437688,
"female": 419077
}, {
"age": "15 to 17",
"male": 269202,
"female": 257213
}, {
"age": "18 to 21",
"male": 369219,
"female": 353570
}, {
"age": "22 to 24",
"male": 268501,
"female": 258559
}, {
"age": "25 to 29",
"male": 448001,
"female": 442418
}, {
"age": "30 to 34",
"male": 445416,
"female": 445729
}, {
"age": "35 to 39",
"male": 416265,
"female": 418999
}, {
"age": "40 to 44",
"male": 425825,
"female": 427573
}, {
"age": "45 to 49",
"male": 433177,
"female": 441116
}, {
"age": "5 to 9",
"male": 427121,
"female": 412238
}, {
"age": "50 to 54",
"male": 454039,
"female": 470982
}, {
"age": "55 to 59",
"male": 414948,
"female": 442280
}, {
"age": "60 to 64",
"male": 354782,
"female": 380640
}, {
"age": "65 to 69",
"male": 259363,
"female": 292899
}, {
"age": "70 to 74",
"male": 184622,
"female": 223905
}, {
"age": "75 to 79",
"male": 129016,
"female": 171743
}, {
"age": "80 to 84",
"male": 91973,
"female": 139204
}, {
"age": "85 and Older",
"male": 79446,
"female": 165817
}
],
"IN": [{
"age": "0 to 5",
"male": 215697,
"female": 205242
}, {
"age": "10 to 14",
"male": 229911,
"female": 221563
}, {
"age": "15 to 17",
"male": 139494,
"female": 132879
}, {
"age": "18 to 21",
"male": 198763,
"female": 194206
}, {
"age": "22 to 24",
"male": 140805,
"female": 131947
}, {
"age": "25 to 29",
"male": 210315,
"female": 208593
}, {
"age": "30 to 34",
"male": 211656,
"female": 210103
}, {
"age": "35 to 39",
"male": 201979,
"female": 200693
}, {
"age": "40 to 44",
"male": 212114,
"female": 212653
}, {
"age": "45 to 49",
"male": 216446,
"female": 219033
}, {
"age": "5 to 9",
"male": 226901,
"female": 214964
}, {
"age": "50 to 54",
"male": 232241,
"female": 237844
}, {
"age": "55 to 59",
"male": 217033,
"female": 228674
}, {
"age": "60 to 64",
"male": 186412,
"female": 197353
}, {
"age": "65 to 69",
"male": 140336,
"female": 156256
}, {
"age": "70 to 74",
"male": 99402,
"female": 116834
}, {
"age": "75 to 79",
"male": 68758,
"female": 88794
}, {
"age": "80 to 84",
"male": 47628,
"female": 72061
}, {
"age": "85 and Older",
"male": 39372,
"female": 83690
}
],
"KS": [{
"age": "0 to 5",
"male": 102716,
"female": 98004
}, {
"age": "10 to 14",
"male": 102335,
"female": 99132
}, {
"age": "15 to 17",
"male": 60870,
"female": 57957
}, {
"age": "18 to 21",
"male": 90593,
"female": 83299
}, {
"age": "22 to 24",
"male": 66512,
"female": 59368
}, {
"age": "25 to 29",
"male": 99384,
"female": 93840
}, {
"age": "30 to 34",
"male": 98020,
"female": 94075
}, {
"age": "35 to 39",
"male": 87763,
"female": 85422
}, {
"age": "40 to 44",
"male": 87647,
"female": 84970
}, {
"age": "45 to 49",
"male": 89233,
"female": 88877
}, {
"age": "5 to 9",
"male": 103861,
"female": 98642
}, {
"age": "50 to 54",
"male": 98398,
"female": 101197
}, {
"age": "55 to 59",
"male": 95861,
"female": 96152
}, {
"age": "60 to 64",
"male": 79440,
"female": 85124
}, {
"age": "65 to 69",
"male": 60035,
"female": 64369
}, {
"age": "70 to 74",
"male": 42434,
"female": 49221
}, {
"age": "75 to 79",
"male": 30967,
"female": 39425
}, {
"age": "80 to 84",
"male": 23026,
"female": 33863
}, {
"age": "85 and Older",
"male": 20767,
"female": 40188
}
],
"KY": [{
"age": "0 to 5",
"male": 142062,
"female": 134389
}, {
"age": "10 to 14",
"male": 147586,
"female": 138629
}, {
"age": "15 to 17",
"male": 87696,
"female": 83139
}, {
"age": "18 to 21",
"male": 128249,
"female": 121099
}, {
"age": "22 to 24",
"male": 90794,
"female": 85930
}, {
"age": "25 to 29",
"male": 140811,
"female": 139855
}, {
"age": "30 to 34",
"male": 142732,
"female": 142551
}, {
"age": "35 to 39",
"male": 137211,
"female": 136524
}, {
"age": "40 to 44",
"male": 145358,
"female": 145251
}, {
"age": "45 to 49",
"male": 148883,
"female": 150922
}, {
"age": "5 to 9",
"male": 143532,
"female": 139032
}, {
"age": "50 to 54",
"male": 156890,
"female": 163054
}, {
"age": "55 to 59",
"male": 147006,
"female": 156302
}, {
"age": "60 to 64",
"male": 129457,
"female": 139434
}, {
"age": "65 to 69",
"male": 100883,
"female": 112696
}, {
"age": "70 to 74",
"male": 71867,
"female": 83665
}, {
"age": "75 to 79",
"male": 47828,
"female": 62775
}, {
"age": "80 to 84",
"male": 31477,
"female": 46386
}, {
"age": "85 and Older",
"male": 23886,
"female": 51512
}
],
"LA": [{
"age": "0 to 5",
"male": 157642,
"female": 152324
}, {
"age": "10 to 14",
"male": 157781,
"female": 149752
}, {
"age": "15 to 17",
"male": 93357,
"female": 90227
}, {
"age": "18 to 21",
"male": 136496,
"female": 131202
}, {
"age": "22 to 24",
"male": 101438,
"female": 101480
}, {
"age": "25 to 29",
"male": 167414,
"female": 168886
}, {
"age": "30 to 34",
"male": 160094,
"female": 161424
}, {
"age": "35 to 39",
"male": 142182,
"female": 141813
}, {
"age": "40 to 44",
"male": 138717,
"female": 144789
}, {
"age": "45 to 49",
"male": 145906,
"female": 152340
}, {
"age": "5 to 9",
"male": 159193,
"female": 154320
}, {
"age": "50 to 54",
"male": 157743,
"female": 167125
}, {
"age": "55 to 59",
"male": 149001,
"female": 161295
}, {
"age": "60 to 64",
"male": 129265,
"female": 139378
}, {
"age": "65 to 69",
"male": 98404,
"female": 106844
}, {
"age": "70 to 74",
"male": 65845,
"female": 83779
}, {
"age": "75 to 79",
"male": 47365,
"female": 60745
}, {
"age": "80 to 84",
"male": 29452,
"female": 48839
}, {
"age": "85 and Older",
"male": 23861,
"female": 47535
}
],
"MA": [{
"age": "0 to 5",
"male": 187066,
"female": 178775
}, {
"age": "10 to 14",
"male": 205530,
"female": 195312
}, {
"age": "15 to 17",
"male": 129433,
"female": 123212
}, {
"age": "18 to 21",
"male": 207432,
"female": 213820
}, {
"age": "22 to 24",
"male": 140356,
"female": 135839
}, {
"age": "25 to 29",
"male": 235172,
"female": 237653
}, {
"age": "30 to 34",
"male": 216220,
"female": 221692
}, {
"age": "35 to 39",
"male": 196293,
"female": 202730
}, {
"age": "40 to 44",
"male": 218111,
"female": 231277
}, {
"age": "45 to 49",
"male": 237629,
"female": 249926
}, {
"age": "5 to 9",
"male": 191958,
"female": 186343
}, {
"age": "50 to 54",
"male": 247973,
"female": 260886
}, {
"age": "55 to 59",
"male": 227238,
"female": 241029
}, {
"age": "60 to 64",
"male": 189981,
"female": 211282
}, {
"age": "65 to 69",
"male": 146129,
"female": 164268
}, {
"age": "70 to 74",
"male": 100745,
"female": 123577
}, {
"age": "75 to 79",
"male": 70828,
"female": 92141
}, {
"age": "80 to 84",
"male": 52074,
"female": 81603
}, {
"age": "85 and Older",
"male": 49482,
"female": 104571
}
],
"MD": [{
"age": "0 to 5",
"male": 187617,
"female": 180105
}, {
"age": "10 to 14",
"male": 191787,
"female": 185380
}, {
"age": "15 to 17",
"male": 118027,
"female": 113549
}, {
"age": "18 to 21",
"male": 166991,
"female": 159589
}, {
"age": "22 to 24",
"male": 120617,
"female": 116602
}, {
"age": "25 to 29",
"male": 205555,
"female": 206944
}, {
"age": "30 to 34",
"male": 196824,
"female": 203989
}, {
"age": "35 to 39",
"male": 179340,
"female": 193957
}, {
"age": "40 to 44",
"male": 195388,
"female": 205570
}, {
"age": "45 to 49",
"male": 208382,
"female": 225458
}, {
"age": "5 to 9",
"male": 189781,
"female": 182034
}, {
"age": "50 to 54",
"male": 217574,
"female": 235604
}, {
"age": "55 to 59",
"male": 193789,
"female": 210582
}, {
"age": "60 to 64",
"male": 161828,
"female": 186524
}, {
"age": "65 to 69",
"male": 123204,
"female": 144193
}, {
"age": "70 to 74",
"male": 84114,
"female": 101563
}, {
"age": "75 to 79",
"male": 56755,
"female": 75715
}, {
"age": "80 to 84",
"male": 39615,
"female": 59728
}, {
"age": "85 and Older",
"male": 35455,
"female": 70809
}
],
"ME": [{
"age": "0 to 5",
"male": 33298,
"female": 32108
}, {
"age": "10 to 14",
"male": 38254,
"female": 36846
}, {
"age": "15 to 17",
"male": 24842,
"female": 23688
}, {
"age": "18 to 21",
"male": 35315,
"female": 33777
}, {
"age": "22 to 24",
"male": 23007,
"female": 21971
}, {
"age": "25 to 29",
"male": 37685,
"female": 38353
}, {
"age": "30 to 34",
"male": 36838,
"female": 37697
}, {
"age": "35 to 39",
"male": 35988,
"female": 37686
}, {
"age": "40 to 44",
"male": 42092,
"female": 42912
}, {
"age": "45 to 49",
"male": 47141,
"female": 49161
}, {
"age": "5 to 9",
"male": 38066,
"female": 35151
}, {
"age": "50 to 54",
"male": 53458,
"female": 55451
}, {
"age": "55 to 59",
"male": 51789,
"female": 55407
}, {
"age": "60 to 64",
"male": 47171,
"female": 49840
}, {
"age": "65 to 69",
"male": 37495,
"female": 39678
}, {
"age": "70 to 74",
"male": 26300,
"female": 28932
}, {
"age": "75 to 79",
"male": 18197,
"female": 22047
}, {
"age": "80 to 84",
"male": 12824,
"female": 18302
}, {
"age": "85 and Older",
"male": 10321,
"female": 20012
}
],
"MI": [{
"age": "0 to 5",
"male": 295157,
"female": 280629
}, {
"age": "10 to 14",
"male": 329983,
"female": 319870
}, {
"age": "15 to 17",
"male": 210017,
"female": 199977
}, {
"age": "18 to 21",
"male": 299937,
"female": 287188
}, {
"age": "22 to 24",
"male": 208270,
"female": 202858
}, {
"age": "25 to 29",
"male": 303606,
"female": 298013
}, {
"age": "30 to 34",
"male": 292780,
"female": 296303
}, {
"age": "35 to 39",
"male": 283925,
"female": 288526
}, {
"age": "40 to 44",
"male": 314544,
"female": 319923
}, {
"age": "45 to 49",
"male": 337524,
"female": 344097
}, {
"age": "5 to 9",
"male": 316345,
"female": 297675
}, {
"age": "50 to 54",
"male": 366054,
"female": 378332
}, {
"age": "55 to 59",
"male": 349590,
"female": 369347
}, {
"age": "60 to 64",
"male": 303421,
"female": 323815
}, {
"age": "65 to 69",
"male": 230810,
"female": 252455
}, {
"age": "70 to 74",
"male": 161676,
"female": 186453
}, {
"age": "75 to 79",
"male": 112555,
"female": 141554
}, {
"age": "80 to 84",
"male": 78669,
"female": 116914
}, {
"age": "85 and Older",
"male": 67110,
"female": 134669
}
],
"MN": [{
"age": "0 to 5",
"male": 178616,
"female": 170645
}, {
"age": "10 to 14",
"male": 180951,
"female": 174374
}, {
"age": "15 to 17",
"male": 110001,
"female": 104197
}, {
"age": "18 to 21",
"male": 148247,
"female": 144611
}, {
"age": "22 to 24",
"male": 108864,
"female": 103755
}, {
"age": "25 to 29",
"male": 185766,
"female": 180698
}, {
"age": "30 to 34",
"male": 189374,
"female": 184845
}, {
"age": "35 to 39",
"male": 166613,
"female": 160534
}, {
"age": "40 to 44",
"male": 172583,
"female": 171011
}, {
"age": "45 to 49",
"male": 184130,
"female": 182785
}, {
"age": "5 to 9",
"male": 185244,
"female": 176674
}, {
"age": "50 to 54",
"male": 202427,
"female": 203327
}, {
"age": "55 to 59",
"male": 187216,
"female": 189980
}, {
"age": "60 to 64",
"male": 157586,
"female": 160588
}, {
"age": "65 to 69",
"male": 114903,
"female": 121985
}, {
"age": "70 to 74",
"male": 81660,
"female": 92401
}, {
"age": "75 to 79",
"male": 57855,
"female": 72839
}, {
"age": "80 to 84",
"male": 42192,
"female": 58545
}, {
"age": "85 and Older",
"male": 37938,
"female": 73211
}
],
"MO": [{
"age": "0 to 5",
"male": 192851,
"female": 183921
}, {
"age": "10 to 14",
"male": 201273,
"female": 190020
}, {
"age": "15 to 17",
"male": 122944,
"female": 116383
}, {
"age": "18 to 21",
"male": 175782,
"female": 169076
}, {
"age": "22 to 24",
"male": 124584,
"female": 123027
}, {
"age": "25 to 29",
"male": 200511,
"female": 200134
}, {
"age": "30 to 34",
"male": 197781,
"female": 198735
}, {
"age": "35 to 39",
"male": 181485,
"female": 180002
}, {
"age": "40 to 44",
"male": 183318,
"female": 188038
}, {
"age": "45 to 49",
"male": 194538,
"female": 199735
}, {
"age": "5 to 9",
"male": 200091,
"female": 193196
}, {
"age": "50 to 54",
"male": 218663,
"female": 225083
}, {
"age": "55 to 59",
"male": 199513,
"female": 216459
}, {
"age": "60 to 64",
"male": 176036,
"female": 187668
}, {
"age": "65 to 69",
"male": 135605,
"female": 150815
}, {
"age": "70 to 74",
"male": 99845,
"female": 117802
}, {
"age": "75 to 79",
"male": 70734,
"female": 88769
}, {
"age": "80 to 84",
"male": 48118,
"female": 72085
}, {
"age": "85 and Older",
"male": 40331,
"female": 80497
}
],
"MS": [{
"age": "0 to 5",
"male": 100654,
"female": 97079
}, {
"age": "10 to 14",
"male": 107363,
"female": 101958
}, {
"age": "15 to 17",
"male": 62923,
"female": 60591
}, {
"age": "18 to 21",
"male": 94460,
"female": 94304
}, {
"age": "22 to 24",
"male": 63870,
"female": 58909
}, {
"age": "25 to 29",
"male": 96027,
"female": 98023
}, {
"age": "30 to 34",
"male": 95533,
"female": 98837
}, {
"age": "35 to 39",
"male": 88278,
"female": 92876
}, {
"age": "40 to 44",
"male": 93579,
"female": 97851
}, {
"age": "45 to 49",
"male": 92103,
"female": 98871
}, {
"age": "5 to 9",
"male": 104911,
"female": 100694
}, {
"age": "50 to 54",
"male": 98578,
"female": 106516
}, {
"age": "55 to 59",
"male": 94835,
"female": 101616
}, {
"age": "60 to 64",
"male": 80677,
"female": 91332
}, {
"age": "65 to 69",
"male": 64386,
"female": 72940
}, {
"age": "70 to 74",
"male": 46712,
"female": 56013
}, {
"age": "75 to 79",
"male": 32079,
"female": 42598
}, {
"age": "80 to 84",
"male": 19966,
"female": 32724
}, {
"age": "85 and Older",
"male": 14789,
"female": 32626
}
],
"MT": [{
"age": "0 to 5",
"male": 31021,
"female": 29676
}, {
"age": "10 to 14",
"male": 30960,
"female": 29710
}, {
"age": "15 to 17",
"male": 19558,
"female": 18061
}, {
"age": "18 to 21",
"male": 30975,
"female": 27314
}, {
"age": "22 to 24",
"male": 21419,
"female": 20153
}, {
"age": "25 to 29",
"male": 32300,
"female": 30805
}, {
"age": "30 to 34",
"male": 33167,
"female": 30964
}, {
"age": "35 to 39",
"male": 29772,
"female": 28999
}, {
"age": "40 to 44",
"male": 28538,
"female": 27311
}, {
"age": "45 to 49",
"male": 30820,
"female": 30608
}, {
"age": "5 to 9",
"male": 33641,
"female": 31763
}, {
"age": "50 to 54",
"male": 36761,
"female": 37476
}, {
"age": "55 to 59",
"male": 38291,
"female": 40028
}, {
"age": "60 to 64",
"male": 35306,
"female": 35021
}, {
"age": "65 to 69",
"male": 27786,
"female": 27047
}, {
"age": "70 to 74",
"male": 19708,
"female": 19938
}, {
"age": "75 to 79",
"male": 13344,
"female": 14751
}, {
"age": "80 to 84",
"male": 9435,
"female": 11392
}, {
"age": "85 and Older",
"male": 7361,
"female": 13519
}
],
"NC": [{
"age": "0 to 5",
"male": 311288,
"female": 299882
}, {
"age": "10 to 14",
"male": 333622,
"female": 316123
}, {
"age": "15 to 17",
"male": 194507,
"female": 185872
}, {
"age": "18 to 21",
"male": 299506,
"female": 275504
}, {
"age": "22 to 24",
"male": 207910,
"female": 196277
}, {
"age": "25 to 29",
"male": 317709,
"female": 324593
}, {
"age": "30 to 34",
"male": 311582,
"female": 323483
}, {
"age": "35 to 39",
"male": 308195,
"female": 319405
}, {
"age": "40 to 44",
"male": 334818,
"female": 349484
}, {
"age": "45 to 49",
"male": 331086,
"female": 345940
}, {
"age": "5 to 9",
"male": 325977,
"female": 316564
}, {
"age": "50 to 54",
"male": 334674,
"female": 355791
}, {
"age": "55 to 59",
"male": 308840,
"female": 341170
}, {
"age": "60 to 64",
"male": 270508,
"female": 303831
}, {
"age": "65 to 69",
"male": 225997,
"female": 254521
}, {
"age": "70 to 74",
"male": 154010,
"female": 186677
}, {
"age": "75 to 79",
"male": 106165,
"female": 139937
}, {
"age": "80 to 84",
"male": 68871,
"female": 104839
}, {
"age": "85 and Older",
"male": 50143,
"female": 110032
}
],
"ND": [{
"age": "0 to 5",
"male": 24524,
"female": 24340
}, {
"age": "10 to 14",
"male": 20939,
"female": 20728
}, {
"age": "15 to 17",
"male": 13197,
"female": 12227
}, {
"age": "18 to 21",
"male": 27439,
"female": 22447
}, {
"age": "22 to 24",
"male": 21413,
"female": 19299
}, {
"age": "25 to 29",
"male": 29543,
"female": 24602
}, {
"age": "30 to 34",
"male": 26425,
"female": 22798
}, {
"age": "35 to 39",
"male": 21846,
"female": 19046
}, {
"age": "40 to 44",
"male": 20123,
"female": 19010
}, {
"age": "45 to 49",
"male": 21386,
"female": 20572
}, {
"age": "5 to 9",
"male": 24336,
"female": 22721
}, {
"age": "50 to 54",
"male": 25126,
"female": 24631
}, {
"age": "55 to 59",
"male": 24412,
"female": 24022
}, {
"age": "60 to 64",
"male": 21598,
"female": 20250
}, {
"age": "65 to 69",
"male": 14868,
"female": 14633
}, {
"age": "70 to 74",
"male": 10729,
"female": 11878
}, {
"age": "75 to 79",
"male": 8086,
"female": 9626
}, {
"age": "80 to 84",
"male": 6222,
"female": 9241
}, {
"age": "85 and Older",
"male": 5751,
"female": 11606
}
],
"NE": [{
"age": "0 to 5",
"male": 67062,
"female": 62974
}, {
"age": "10 to 14",
"male": 64843,
"female": 62695
}, {
"age": "15 to 17",
"male": 38679,
"female": 36116
}, {
"age": "18 to 21",
"male": 56143,
"female": 54195
}, {
"age": "22 to 24",
"male": 40531,
"female": 38139
}, {
"age": "25 to 29",
"male": 64277,
"female": 61028
}, {
"age": "30 to 34",
"male": 64230,
"female": 62423
}, {
"age": "35 to 39",
"male": 57741,
"female": 55950
}, {
"age": "40 to 44",
"male": 56139,
"female": 54518
}, {
"age": "45 to 49",
"male": 57526,
"female": 57077
}, {
"age": "5 to 9",
"male": 68079,
"female": 64509
}, {
"age": "50 to 54",
"male": 64444,
"female": 65106
}, {
"age": "55 to 59",
"male": 61285,
"female": 62057
}, {
"age": "60 to 64",
"male": 52560,
"female": 54977
}, {
"age": "65 to 69",
"male": 39372,
"female": 41007
}, {
"age": "70 to 74",
"male": 27091,
"female": 31903
}, {
"age": "75 to 79",
"male": 20472,
"female": 26808
}, {
"age": "80 to 84",
"male": 15625,
"female": 21401
}, {
"age": "85 and Older",
"male": 13507,
"female": 26876
}
],
"NH": [{
"age": "0 to 5",
"male": 33531,
"female": 32061
}, {
"age": "10 to 14",
"male": 40472,
"female": 39574
}, {
"age": "15 to 17",
"male": 26632,
"female": 25155
}, {
"age": "18 to 21",
"male": 39600,
"female": 39270
}, {
"age": "22 to 24",
"male": 25067,
"female": 23439
}, {
"age": "25 to 29",
"male": 39514,
"female": 37529
}, {
"age": "30 to 34",
"male": 37282,
"female": 37104
}, {
"age": "35 to 39",
"male": 37177,
"female": 38432
}, {
"age": "40 to 44",
"male": 43571,
"female": 43894
}, {
"age": "45 to 49",
"male": 50559,
"female": 51423
}, {
"age": "5 to 9",
"male": 37873,
"female": 36382
}, {
"age": "50 to 54",
"male": 55573,
"female": 57097
}, {
"age": "55 to 59",
"male": 50802,
"female": 52906
}, {
"age": "60 to 64",
"male": 44934,
"female": 45384
}, {
"age": "65 to 69",
"male": 33322,
"female": 34773
}, {
"age": "70 to 74",
"male": 22786,
"female": 25421
}, {
"age": "75 to 79",
"male": 14988,
"female": 18865
}, {
"age": "80 to 84",
"male": 10661,
"female": 14921
}, {
"age": "85 and Older",
"male": 9140,
"female": 17087
}
],
"NJ": [{
"age": "0 to 5",
"male": 272239,
"female": 261405
}, {
"age": "10 to 14",
"male": 296798,
"female": 281395
}, {
"age": "15 to 17",
"male": 183608,
"female": 174902
}, {
"age": "18 to 21",
"male": 236406,
"female": 219234
}, {
"age": "22 to 24",
"male": 171414,
"female": 162551
}, {
"age": "25 to 29",
"male": 288078,
"female": 278395
}, {
"age": "30 to 34",
"male": 286242,
"female": 288661
}, {
"age": "35 to 39",
"male": 278323,
"female": 286407
}, {
"age": "40 to 44",
"male": 306371,
"female": 315976
}, {
"age": "45 to 49",
"male": 324604,
"female": 340805
}, {
"age": "5 to 9",
"male": 280348,
"female": 272618
}, {
"age": "50 to 54",
"male": 335379,
"female": 351753
}, {
"age": "55 to 59",
"male": 297889,
"female": 316509
}, {
"age": "60 to 64",
"male": 243909,
"female": 272971
}, {
"age": "65 to 69",
"male": 187928,
"female": 216233
}, {
"age": "70 to 74",
"male": 130458,
"female": 162862
}, {
"age": "75 to 79",
"male": 92629,
"female": 121544
}, {
"age": "80 to 84",
"male": 68009,
"female": 107002
}, {
"age": "85 and Older",
"male": 62395,
"female": 130163
}
],
"NM": [{
"age": "0 to 5",
"male": 70556,
"female": 67433
}, {
"age": "10 to 14",
"male": 72070,
"female": 69774
}, {
"age": "15 to 17",
"male": 42831,
"female": 41474
}, {
"age": "18 to 21",
"male": 61671,
"female": 59289
}, {
"age": "22 to 24",
"male": 47139,
"female": 41506
}, {
"age": "25 to 29",
"male": 73009,
"female": 67866
}, {
"age": "30 to 34",
"male": 69394,
"female": 66383
}, {
"age": "35 to 39",
"male": 62108,
"female": 60810
}, {
"age": "40 to 44",
"male": 61075,
"female": 61508
}, {
"age": "45 to 49",
"male": 62327,
"female": 64988
}, {
"age": "5 to 9",
"male": 72877,
"female": 69675
}, {
"age": "50 to 54",
"male": 69856,
"female": 73683
}, {
"age": "55 to 59",
"male": 66381,
"female": 73952
}, {
"age": "60 to 64",
"male": 61719,
"female": 66285
}, {
"age": "65 to 69",
"male": 48657,
"female": 54175
}, {
"age": "70 to 74",
"male": 35942,
"female": 39668
}, {
"age": "75 to 79",
"male": 24922,
"female": 29968
}, {
"age": "80 to 84",
"male": 16894,
"female": 21049
}, {
"age": "85 and Older",
"male": 12986,
"female": 22217
}
],
"NV": [{
"age": "0 to 5",
"male": 91556,
"female": 87252
}, {
"age": "10 to 14",
"male": 92376,
"female": 90127
}, {
"age": "15 to 17",
"male": 56635,
"female": 53976
}, {
"age": "18 to 21",
"male": 72185,
"female": 68570
}, {
"age": "22 to 24",
"male": 57429,
"female": 54635
}, {
"age": "25 to 29",
"male": 103079,
"female": 98260
}, {
"age": "30 to 34",
"male": 101626,
"female": 97574
}, {
"age": "35 to 39",
"male": 95952,
"female": 91752
}, {
"age": "40 to 44",
"male": 98405,
"female": 96018
}, {
"age": "45 to 49",
"male": 98297,
"female": 92880
}, {
"age": "5 to 9",
"male": 97639,
"female": 92019
}, {
"age": "50 to 54",
"male": 96647,
"female": 93838
}, {
"age": "55 to 59",
"male": 86430,
"female": 90916
}, {
"age": "60 to 64",
"male": 79651,
"female": 82206
}, {
"age": "65 to 69",
"male": 65973,
"female": 70582
}, {
"age": "70 to 74",
"male": 48879,
"female": 50485
}, {
"age": "75 to 79",
"male": 31798,
"female": 33652
}, {
"age": "80 to 84",
"male": 19722,
"female": 23399
}, {
"age": "85 and Older",
"male": 13456,
"female": 22760
}
],
"NY": [{
"age": "0 to 5",
"male": 601900,
"female": 574532
}, {
"age": "10 to 14",
"male": 602877,
"female": 576846
}, {
"age": "15 to 17",
"male": 381224,
"female": 364149
}, {
"age": "18 to 21",
"male": 579276,
"female": 563517
}, {
"age": "22 to 24",
"male": 423461,
"female": 419351
}, {
"age": "25 to 29",
"male": 722290,
"female": 728064
}, {
"age": "30 to 34",
"male": 668918,
"female": 684340
}, {
"age": "35 to 39",
"male": 607495,
"female": 628810
}, {
"age": "40 to 44",
"male": 632186,
"female": 660306
}, {
"age": "45 to 49",
"male": 674516,
"female": 708960
}, {
"age": "5 to 9",
"male": 588624,
"female": 561622
}, {
"age": "50 to 54",
"male": 695357,
"female": 740342
}, {
"age": "55 to 59",
"male": 633602,
"female": 685163
}, {
"age": "60 to 64",
"male": 540901,
"female": 604110
}, {
"age": "65 to 69",
"male": 409399,
"female": 483158
}, {
"age": "70 to 74",
"male": 287440,
"female": 357971
}, {
"age": "75 to 79",
"male": 207495,
"female": 274626
}, {
"age": "80 to 84",
"male": 150642,
"female": 231063
}, {
"age": "85 and Older",
"male": 134198,
"female": 284443
}
],
"OH": [{
"age": "0 to 5",
"male": 356598,
"female": 339398
}, {
"age": "10 to 14",
"male": 385542,
"female": 371142
}, {
"age": "15 to 17",
"male": 239825,
"female": 228296
}, {
"age": "18 to 21",
"male": 331115,
"female": 318019
}, {
"age": "22 to 24",
"male": 227916,
"female": 225400
}, {
"age": "25 to 29",
"male": 369646,
"female": 367475
}, {
"age": "30 to 34",
"male": 356757,
"female": 359375
}, {
"age": "35 to 39",
"male": 338273,
"female": 340410
}, {
"age": "40 to 44",
"male": 368578,
"female": 375476
}, {
"age": "45 to 49",
"male": 385388,
"female": 394341
}, {
"age": "5 to 9",
"male": 376976,
"female": 358242
}, {
"age": "50 to 54",
"male": 420561,
"female": 438290
}, {
"age": "55 to 59",
"male": 403067,
"female": 427137
}, {
"age": "60 to 64",
"male": 350563,
"female": 374890
}, {
"age": "65 to 69",
"male": 262844,
"female": 292745
}, {
"age": "70 to 74",
"male": 183419,
"female": 222552
}, {
"age": "75 to 79",
"male": 131940,
"female": 173303
}, {
"age": "80 to 84",
"male": 93267,
"female": 140079
}, {
"age": "85 and Older",
"male": 80618,
"female": 166514
}
],
"OK": [{
"age": "0 to 5",
"male": 135423,
"female": 130297
}, {
"age": "10 to 14",
"male": 133539,
"female": 128110
}, {
"age": "15 to 17",
"male": 79207,
"female": 74080
}, {
"age": "18 to 21",
"male": 115423,
"female": 107651
}, {
"age": "22 to 24",
"male": 85610,
"female": 80749
}, {
"age": "25 to 29",
"male": 135217,
"female": 130966
}, {
"age": "30 to 34",
"male": 132683,
"female": 128496
}, {
"age": "35 to 39",
"male": 118240,
"female": 116104
}, {
"age": "40 to 44",
"male": 118534,
"female": 117501
}, {
"age": "45 to 49",
"male": 117065,
"female": 118300
}, {
"age": "5 to 9",
"male": 137212,
"female": 130040
}, {
"age": "50 to 54",
"male": 129964,
"female": 132941
}, {
"age": "55 to 59",
"male": 121988,
"female": 129033
}, {
"age": "60 to 64",
"male": 105018,
"female": 113144
}, {
"age": "65 to 69",
"male": 82818,
"female": 93914
}, {
"age": "70 to 74",
"male": 62979,
"female": 71856
}, {
"age": "75 to 79",
"male": 43899,
"female": 54848
}, {
"age": "80 to 84",
"male": 29237,
"female": 42044
}, {
"age": "85 and Older",
"male": 22888,
"female": 42715
}
],
"OR": [{
"age": "0 to 5",
"male": 118561,
"female": 112841
}, {
"age": "10 to 14",
"male": 123223,
"female": 116373
}, {
"age": "15 to 17",
"male": 75620,
"female": 71764
}, {
"age": "18 to 21",
"male": 106121,
"female": 103044
}, {
"age": "22 to 24",
"male": 79106,
"female": 75639
}, {
"age": "25 to 29",
"male": 134241,
"female": 131539
}, {
"age": "30 to 34",
"male": 137090,
"female": 135734
}, {
"age": "35 to 39",
"male": 128812,
"female": 126071
}, {
"age": "40 to 44",
"male": 131405,
"female": 126875
}, {
"age": "45 to 49",
"male": 125373,
"female": 125074
}, {
"age": "5 to 9",
"male": 122920,
"female": 119049
}, {
"age": "50 to 54",
"male": 131932,
"female": 137021
}, {
"age": "55 to 59",
"male": 130434,
"female": 141380
}, {
"age": "60 to 64",
"male": 129063,
"female": 136051
}, {
"age": "65 to 69",
"male": 99577,
"female": 106208
}, {
"age": "70 to 74",
"male": 69028,
"female": 77428
}, {
"age": "75 to 79",
"male": 46055,
"female": 53682
}, {
"age": "80 to 84",
"male": 30900,
"female": 41853
}, {
"age": "85 and Older",
"male": 28992,
"female": 53154
}
],
"PA": [{
"age": "0 to 5",
"male": 367290,
"female": 350371
}, {
"age": "10 to 14",
"male": 393719,
"female": 374666
}, {
"age": "15 to 17",
"male": 250754,
"female": 236670
}, {
"age": "18 to 21",
"male": 378940,
"female": 369819
}, {
"age": "22 to 24",
"male": 251063,
"female": 243391
}, {
"age": "25 to 29",
"male": 420247,
"female": 410193
}, {
"age": "30 to 34",
"male": 391190,
"female": 387225
}, {
"age": "35 to 39",
"male": 365742,
"female": 365646
}, {
"age": "40 to 44",
"male": 399152,
"female": 405848
}, {
"age": "45 to 49",
"male": 435250,
"female": 446328
}, {
"age": "5 to 9",
"male": 381910,
"female": 366854
}, {
"age": "50 to 54",
"male": 472070,
"female": 489057
}, {
"age": "55 to 59",
"male": 456215,
"female": 475044
}, {
"age": "60 to 64",
"male": 390595,
"female": 419924
}, {
"age": "65 to 69",
"male": 301610,
"female": 335127
}, {
"age": "70 to 74",
"male": 212200,
"female": 256188
}, {
"age": "75 to 79",
"male": 156335,
"female": 205974
}, {
"age": "80 to 84",
"male": 117050,
"female": 178358
}, {
"age": "85 and Older",
"male": 104012,
"female": 217532
}
],
"RI": [{
"age": "0 to 5",
"male": 28289,
"female": 26941
}, {
"age": "10 to 14",
"male": 31383,
"female": 30724
}, {
"age": "15 to 17",
"male": 20093,
"female": 19249
}, {
"age": "18 to 21",
"male": 35376,
"female": 37870
}, {
"age": "22 to 24",
"male": 23397,
"female": 21358
}, {
"age": "25 to 29",
"male": 35958,
"female": 34710
}, {
"age": "30 to 34",
"male": 32410,
"female": 32567
}, {
"age": "35 to 39",
"male": 30325,
"female": 31145
}, {
"age": "40 to 44",
"male": 32542,
"female": 34087
}, {
"age": "45 to 49",
"male": 36151,
"female": 38462
}, {
"age": "5 to 9",
"male": 30462,
"female": 27878
}, {
"age": "50 to 54",
"male": 38419,
"female": 41642
}, {
"age": "55 to 59",
"male": 36706,
"female": 39127
}, {
"age": "60 to 64",
"male": 30349,
"female": 33752
}, {
"age": "65 to 69",
"male": 23462,
"female": 26311
}, {
"age": "70 to 74",
"male": 16385,
"female": 19335
}, {
"age": "75 to 79",
"male": 10978,
"female": 14833
}, {
"age": "80 to 84",
"male": 9224,
"female": 13439
}, {
"age": "85 and Older",
"male": 8479,
"female": 19843
}
],
"SC": [{
"age": "0 to 5",
"male": 148363,
"female": 144218
}, {
"age": "10 to 14",
"male": 153051,
"female": 148064
}, {
"age": "15 to 17",
"male": 92781,
"female": 88090
}, {
"age": "18 to 21",
"male": 150464,
"female": 136857
}, {
"age": "22 to 24",
"male": 99237,
"female": 99178
}, {
"age": "25 to 29",
"male": 156273,
"female": 156982
}, {
"age": "30 to 34",
"male": 148237,
"female": 153197
}, {
"age": "35 to 39",
"male": 139949,
"female": 146281
}, {
"age": "40 to 44",
"male": 151524,
"female": 157192
}, {
"age": "45 to 49",
"male": 153110,
"female": 163562
}, {
"age": "5 to 9",
"male": 156323,
"female": 150943
}, {
"age": "50 to 54",
"male": 161003,
"female": 173752
}, {
"age": "55 to 59",
"male": 150770,
"female": 169238
}, {
"age": "60 to 64",
"male": 141268,
"female": 160890
}, {
"age": "65 to 69",
"male": 120618,
"female": 137154
}, {
"age": "70 to 74",
"male": 85197,
"female": 97581
}, {
"age": "75 to 79",
"male": 55278,
"female": 69067
}, {
"age": "80 to 84",
"male": 33979,
"female": 50585
}, {
"age": "85 and Older",
"male": 24984,
"female": 52336
}
],
"SD": [{
"age": "0 to 5",
"male": 30615,
"female": 29377
}, {
"age": "10 to 14",
"male": 28360,
"female": 26492
}, {
"age": "15 to 17",
"male": 17193,
"female": 16250
}, {
"age": "18 to 21",
"male": 25514,
"female": 24234
}, {
"age": "22 to 24",
"male": 18413,
"female": 16324
}, {
"age": "25 to 29",
"male": 29131,
"female": 26757
}, {
"age": "30 to 34",
"male": 28133,
"female": 26710
}, {
"age": "35 to 39",
"male": 24971,
"female": 23347
}, {
"age": "40 to 44",
"male": 24234,
"female": 23231
}, {
"age": "45 to 49",
"male": 25555,
"female": 24867
}, {
"age": "5 to 9",
"male": 30399,
"female": 28980
}, {
"age": "50 to 54",
"male": 29754,
"female": 29530
}, {
"age": "55 to 59",
"male": 29075,
"female": 28968
}, {
"age": "60 to 64",
"male": 25633,
"female": 25530
}, {
"age": "65 to 69",
"male": 19320,
"female": 18489
}, {
"age": "70 to 74",
"male": 12964,
"female": 14702
}, {
"age": "75 to 79",
"male": 9646,
"female": 12077
}, {
"age": "80 to 84",
"male": 7669,
"female": 10566
}, {
"age": "85 and Older",
"male": 6898,
"female": 13282
}
],
"TN": [{
"age": "0 to 5",
"male": 204457,
"female": 196347
}, {
"age": "10 to 14",
"male": 217061,
"female": 206350
}, {
"age": "15 to 17",
"male": 129690,
"female": 124122
}, {
"age": "18 to 21",
"male": 183910,
"female": 175377
}, {
"age": "22 to 24",
"male": 132501,
"female": 134905
}, {
"age": "25 to 29",
"male": 210618,
"female": 214944
}, {
"age": "30 to 34",
"male": 209305,
"female": 214151
}, {
"age": "35 to 39",
"male": 200270,
"female": 207520
}, {
"age": "40 to 44",
"male": 216542,
"female": 219178
}, {
"age": "45 to 49",
"male": 217059,
"female": 224473
}, {
"age": "5 to 9",
"male": 210365,
"female": 204494
}, {
"age": "50 to 54",
"male": 223663,
"female": 238025
}, {
"age": "55 to 59",
"male": 210228,
"female": 229974
}, {
"age": "60 to 64",
"male": 186739,
"female": 207022
}, {
"age": "65 to 69",
"male": 153737,
"female": 171357
}, {
"age": "70 to 74",
"male": 108743,
"female": 125362
}, {
"age": "75 to 79",
"male": 72813,
"female": 94077
}, {
"age": "80 to 84",
"male": 46556,
"female": 71212
}, {
"age": "85 and Older",
"male": 33499,
"female": 72969
}
],
"TX": [{
"age": "0 to 5",
"male": 996070,
"female": 955235
}, {
"age": "10 to 14",
"male": 998209,
"female": 959762
}, {
"age": "15 to 17",
"male": 587712,
"female": 561008
}, {
"age": "18 to 21",
"male": 818590,
"female": 756451
}, {
"age": "22 to 24",
"male": 582570,
"female": 556850
}, {
"age": "25 to 29",
"male": 982673,
"female": 948564
}, {
"age": "30 to 34",
"male": 961403,
"female": 947710
}, {
"age": "35 to 39",
"male": 897542,
"female": 898907
}, {
"age": "40 to 44",
"male": 897922,
"female": 908091
}, {
"age": "45 to 49",
"male": 857621,
"female": 865642
}, {
"age": "5 to 9",
"male": 1021123,
"female": 979891
}, {
"age": "50 to 54",
"male": 861849,
"female": 880746
}, {
"age": "55 to 59",
"male": 761410,
"female": 799294
}, {
"age": "60 to 64",
"male": 635465,
"female": 692072
}, {
"age": "65 to 69",
"male": 483436,
"female": 533368
}, {
"age": "70 to 74",
"male": 330457,
"female": 389996
}, {
"age": "75 to 79",
"male": 228243,
"female": 289446
}, {
"age": "80 to 84",
"male": 153391,
"female": 219572
}, {
"age": "85 and Older",
"male": 115630,
"female": 224693
}
],
"UT": [{
"age": "0 to 5",
"male": 130873,
"female": 124371
}, {
"age": "10 to 14",
"male": 128076,
"female": 120364
}, {
"age": "15 to 17",
"male": 70832,
"female": 66798
}, {
"age": "18 to 21",
"male": 87877,
"female": 92950
}, {
"age": "22 to 24",
"male": 79431,
"female": 71405
}, {
"age": "25 to 29",
"male": 109125,
"female": 106576
}, {
"age": "30 to 34",
"male": 115198,
"female": 110546
}, {
"age": "35 to 39",
"male": 102771,
"female": 99664
}, {
"age": "40 to 44",
"male": 88181,
"female": 83229
}, {
"age": "45 to 49",
"male": 76552,
"female": 74993
}, {
"age": "5 to 9",
"male": 131094,
"female": 125110
}, {
"age": "50 to 54",
"male": 76913,
"female": 78113
}, {
"age": "55 to 59",
"male": 71490,
"female": 73221
}, {
"age": "60 to 64",
"male": 60996,
"female": 63835
}, {
"age": "65 to 69",
"male": 45491,
"female": 49273
}, {
"age": "70 to 74",
"male": 32191,
"female": 35931
}, {
"age": "75 to 79",
"male": 23112,
"female": 27761
}, {
"age": "80 to 84",
"male": 15827,
"female": 20155
}, {
"age": "85 and Older",
"male": 13199,
"female": 19855
}
],
"VA": [{
"age": "0 to 5",
"male": 262278,
"female": 250000
}, {
"age": "10 to 14",
"male": 266247,
"female": 251516
}, {
"age": "15 to 17",
"male": 160174,
"female": 153149
}, {
"age": "18 to 21",
"male": 248284,
"female": 233796
}, {
"age": "22 to 24",
"male": 175833,
"female": 167676
}, {
"age": "25 to 29",
"male": 296682,
"female": 287052
}, {
"age": "30 to 34",
"male": 286536,
"female": 283804
}, {
"age": "35 to 39",
"male": 264490,
"female": 265951
}, {
"age": "40 to 44",
"male": 278474,
"female": 286095
}, {
"age": "45 to 49",
"male": 286793,
"female": 297558
}, {
"age": "5 to 9",
"male": 264413,
"female": 256891
}, {
"age": "50 to 54",
"male": 296096,
"female": 309898
}, {
"age": "55 to 59",
"male": 262954,
"female": 283219
}, {
"age": "60 to 64",
"male": 228721,
"female": 250389
}, {
"age": "65 to 69",
"male": 178498,
"female": 197033
}, {
"age": "70 to 74",
"male": 123597,
"female": 146376
}, {
"age": "75 to 79",
"male": 82281,
"female": 103044
}, {
"age": "80 to 84",
"male": 55037,
"female": 80081
}, {
"age": "85 and Older",
"male": 43560,
"female": 92154
}
],
"VT": [{
"age": "0 to 5",
"male": 15766,
"female": 14629
}, {
"age": "10 to 14",
"male": 18674,
"female": 17317
}, {
"age": "15 to 17",
"male": 11909,
"female": 11565
}, {
"age": "18 to 21",
"male": 21686,
"female": 20502
}, {
"age": "22 to 24",
"male": 12648,
"female": 11840
}, {
"age": "25 to 29",
"male": 18005,
"female": 17548
}, {
"age": "30 to 34",
"male": 17565,
"female": 18161
}, {
"age": "35 to 39",
"male": 16856,
"female": 17454
}, {
"age": "40 to 44",
"male": 19431,
"female": 19600
}, {
"age": "45 to 49",
"male": 21315,
"female": 22377
}, {
"age": "5 to 9",
"male": 17073,
"female": 16338
}, {
"age": "50 to 54",
"male": 24629,
"female": 26080
}, {
"age": "55 to 59",
"male": 24925,
"female": 25588
}, {
"age": "60 to 64",
"male": 21769,
"female": 23081
}, {
"age": "65 to 69",
"male": 16842,
"female": 17925
}, {
"age": "70 to 74",
"male": 11855,
"female": 12331
}, {
"age": "75 to 79",
"male": 7639,
"female": 9192
}, {
"age": "80 to 84",
"male": 5291,
"female": 8001
}, {
"age": "85 and Older",
"male": 4695,
"female": 8502
}
],
"WA": [{
"age": "0 to 5",
"male": 228403,
"female": 217400
}, {
"age": "10 to 14",
"male": 224142,
"female": 217269
}, {
"age": "15 to 17",
"male": 136967,
"female": 130193
}, {
"age": "18 to 21",
"male": 195001,
"female": 179996
}, {
"age": "22 to 24",
"male": 151577,
"female": 140876
}, {
"age": "25 to 29",
"male": 260873,
"female": 244497
}, {
"age": "30 to 34",
"male": 252612,
"female": 243147
}, {
"age": "35 to 39",
"male": 230325,
"female": 223596
}, {
"age": "40 to 44",
"male": 234066,
"female": 228073
}, {
"age": "45 to 49",
"male": 233107,
"female": 230232
}, {
"age": "5 to 9",
"male": 227824,
"female": 214378
}, {
"age": "50 to 54",
"male": 245685,
"female": 247691
}, {
"age": "55 to 59",
"male": 231612,
"female": 241813
}, {
"age": "60 to 64",
"male": 206233,
"female": 219560
}, {
"age": "65 to 69",
"male": 158697,
"female": 170678
}, {
"age": "70 to 74",
"male": 107931,
"female": 118093
}, {
"age": "75 to 79",
"male": 70497,
"female": 83476
}, {
"age": "80 to 84",
"male": 48802,
"female": 66167
}, {
"age": "85 and Older",
"male": 43371,
"female": 80604
}
],
"WI": [{
"age": "0 to 5",
"male": 176217,
"female": 168178
}, {
"age": "10 to 14",
"male": 191911,
"female": 180587
}, {
"age": "15 to 17",
"male": 115730,
"female": 110660
}, {
"age": "18 to 21",
"male": 167063,
"female": 161358
}, {
"age": "22 to 24",
"male": 117861,
"female": 113393
}, {
"age": "25 to 29",
"male": 183464,
"female": 176718
}, {
"age": "30 to 34",
"male": 187494,
"female": 181605
}, {
"age": "35 to 39",
"male": 172689,
"female": 168116
}, {
"age": "40 to 44",
"male": 179862,
"female": 176322
}, {
"age": "45 to 49",
"male": 198114,
"female": 197462
}, {
"age": "5 to 9",
"male": 186006,
"female": 180034
}, {
"age": "50 to 54",
"male": 217886,
"female": 219813
}, {
"age": "55 to 59",
"male": 204370,
"female": 206108
}, {
"age": "60 to 64",
"male": 176161,
"female": 178738
}, {
"age": "65 to 69",
"male": 130349,
"female": 136552
}, {
"age": "70 to 74",
"male": 90955,
"female": 103217
}, {
"age": "75 to 79",
"male": 65738,
"female": 81341
}, {
"age": "80 to 84",
"male": 48337,
"female": 67614
}, {
"age": "85 and Older",
"male": 41178,
"female": 82916
}
],
"WV": [{
"age": "0 to 5",
"male": 52472,
"female": 50287
}, {
"age": "10 to 14",
"male": 55269,
"female": 52689
}, {
"age": "15 to 17",
"male": 34100,
"female": 32359
}, {
"age": "18 to 21",
"male": 51801,
"female": 48967
}, {
"age": "22 to 24",
"male": 35920,
"female": 34241
}, {
"age": "25 to 29",
"male": 54564,
"female": 52255
}, {
"age": "30 to 34",
"male": 56430,
"female": 55121
}, {
"age": "35 to 39",
"male": 55764,
"female": 55399
}, {
"age": "40 to 44",
"male": 60662,
"female": 59373
}, {
"age": "45 to 49",
"male": 61771,
"female": 61257
}, {
"age": "5 to 9",
"male": 53707,
"female": 51490
}, {
"age": "50 to 54",
"male": 66156,
"female": 68671
}, {
"age": "55 to 59",
"male": 66936,
"female": 71680
}, {
"age": "60 to 64",
"male": 65717,
"female": 67056
}, {
"age": "65 to 69",
"male": 51285,
"female": 54807
}, {
"age": "70 to 74",
"male": 36504,
"female": 39946
}, {
"age": "75 to 79",
"male": 25738,
"female": 31619
}, {
"age": "80 to 84",
"male": 16397,
"female": 24351
}, {
"age": "85 and Older",
"male": 12438,
"female": 26221
}
],
"WY": [{
"age": "0 to 5",
"male": 19649,
"female": 18996
}, {
"age": "10 to 14",
"male": 20703,
"female": 17785
}, {
"age": "15 to 17",
"male": 11500,
"female": 10383
}, {
"age": "18 to 21",
"male": 18008,
"female": 15534
}, {
"age": "22 to 24",
"male": 12727,
"female": 11405
}, {
"age": "25 to 29",
"male": 21459,
"female": 19350
}, {
"age": "30 to 34",
"male": 21008,
"female": 19465
}, {
"age": "35 to 39",
"male": 18573,
"female": 17022
}, {
"age": "40 to 44",
"male": 17553,
"female": 16402
}, {
"age": "45 to 49",
"male": 17580,
"female": 16702
}, {
"age": "5 to 9",
"male": 19198,
"female": 19519
}, {
"age": "50 to 54",
"male": 20337,
"female": 20958
}, {
"age": "55 to 59",
"male": 21523,
"female": 21000
}, {
"age": "60 to 64",
"male": 19048,
"female": 18292
}, {
"age": "65 to 69",
"male": 13999,
"female": 13130
}, {
"age": "70 to 74",
"male": 8710,
"female": 9880
}, {
"age": "75 to 79",
"male": 6149,
"female": 6938
}, {
"age": "80 to 84",
"male": 4442,
"female": 5560
}, {
"age": "85 and Older",
"male": 3395,
"female": 5797
}
]};
function aggregateData(list) {
var maleTotal = 0;
var femaleTotal = 0;
for(var i = 0; i < list.length; i++) {
var row = list[i];
maleTotal += row.male;
femaleTotal += row.female;
}
for(var i = 0; i < list.length; i++) {
var row = list[i];
row.malePercent = -1 * Math.round((row.male / maleTotal) * 10000) / 100;
row.femalePercent = Math.round((row.female / femaleTotal) * 10000) / 100;
}
return list;
}
usData = aggregateData(usData);
// ===========================================================
// Root and wrapper container
// ===========================================================
// Create root and chart
root = am5.Root.new(element);
// Set themes
root.setThemes([
am5themes_Animated.new(root)
]);
// Create wrapper container
var container = root.container.children.push(am5.Container.new(root, {
layout: root.horizontalLayout,
width: am5.p100,
height: am5.p100
}))
// Set up formats
root.numberFormatter.setAll({
numberFormat: "#.##as"
});
// ===========================================================
// XY chart
// ===========================================================
// Create chart
var chart = container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "none",
wheelY: "none",
layout: root.verticalLayout,
width: am5.percent(60)
}));
// Create axes
var yAxis1 = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "age",
renderer: am5xy.AxisRendererY.new(root, {})
}));
yAxis1.get("renderer").labels.template.setAll({
paddingTop: 0,
fontWeight: "400",
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
});
yAxis1.get("renderer").grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
strokeWidth: 1,
strokeOpacity: 1,
strokeDasharray: [3],
});
yAxis1.data.setAll(usData);
var yAxis2 = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "age",
renderer: am5xy.AxisRendererY.new(root, {
opposite: true
})
}));
yAxis2.get("renderer").grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
strokeWidth: 1,
strokeOpacity: 1,
strokeDasharray: [3],
});
yAxis2.get("renderer").labels.template.setAll({
paddingTop: 0,
fontWeight: "400",
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
});
yAxis2.data.setAll(usData);
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
min: -10,
max: 10,
numberFormat: "#.s'%'",
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 40
})
}));
xAxis.get("renderer").labels.template.setAll({
paddingTop: 20,
fontWeight: "400",
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
});
xAxis.get("renderer").grid.template.setAll({
disabled: true,
strokeOpacity: 0,
});
// Create series
var maleSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Males",
xAxis: xAxis,
yAxis: yAxis1,
valueXField: "malePercent",
categoryYField: "age",
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
clustered: false,
}));
maleSeries.columns.template.setAll({
tooltipText: "Males, age {categoryY}: {male} ({malePercent.formatNumber('#.0s')}%)",
tooltipX: am5.p100,
cornerRadiusBR: 4,
cornerRadiusTR: 4,
cornerRadiusBL: 0,
cornerRadiusTL: 0,
});
maleSeries.data.setAll(usData);
var femaleSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Males",
xAxis: xAxis,
yAxis: yAxis1,
valueXField: "femalePercent",
categoryYField: "age",
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
clustered: false,
}));
femaleSeries.columns.template.setAll({
tooltipText: "Males, age {categoryY}: {female} ({femalePercent.formatNumber('#.0s')}%)",
tooltipX: am5.p100,
cornerRadiusBR: 4,
cornerRadiusTR: 4,
cornerRadiusBL: 0,
cornerRadiusTL: 0,
});
femaleSeries.data.setAll(usData);
// Add labels
var maleLabel = chart.plotContainer.children.push(am5.Label.new(root, {
text: "Males",
fontSize: 13,
fontWeight: '500',
y: 5,
x: 5,
//centerX: am5.p50,
fill: maleSeries.get("fill")
}));
var femaleLabel = chart.plotContainer.children.push(am5.Label.new(root, {
text: "Females",
fontSize: 13,
fontWeight: '500',
y: 5,
x: am5.p100,
centerX: am5.p100,
dx: -5,
fill: femaleSeries.get("fill")
}));
// ===========================================================
// Map chart
// ===========================================================
// Create chart
var map = container.children.push(
am5map.MapChart.new(root, {
panX: "none",
panY: "none",
wheelY: "none",
projection: am5map.geoAlbersUsa(),
width: am5.percent(40)
})
);
chart.getTooltip().set("autoTextColor", false);
// Title
var title = map.children.push(am5.Label.new(root, {
text: "United States",
fontSize: 14,
fontWeight: '500',
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-800')),
y: 20,
x: am5.p50,
centerX: am5.p50
}));
// Create polygon series
var polygonSeries = map.series.push(
am5map.MapPolygonSeries.new(root, {
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
geoJSON: am5geodata_usaLow
})
);
polygonSeries.mapPolygons.template.setAll({
tooltipText: "{name}",
interactive: true
});
polygonSeries.mapPolygons.template.states.create("hover", {
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
});
polygonSeries.mapPolygons.template.states.create("active", {
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
});
var activePolygon;
polygonSeries.mapPolygons.template.events.on("click", function(ev) {
if (activePolygon) {
activePolygon.set("active", false);
}
activePolygon = ev.target;
activePolygon.set("active", true);
var state = ev.target.dataItem.dataContext.id.split("-").pop();
var data = aggregateData(stateData[state]);
for(var i = 0; i < data.length; i++){
maleSeries.data.setIndex(i, data[i]);
femaleSeries.data.setIndex(i, data[i]);
}
title.set("text", ev.target.dataItem.dataContext.name);
});
}
// On amchart ready
am5.ready(function() {
// Init chart
init();
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget24;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget24.init();
});
"use strict";
// Class definition
var KTChartsWidget25 = (function () {
// Private methods
var initChart1 = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_25_chart_1");
if ( !element ) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
innerRadius: am5.percent(40),
radius: am5.percent(70),
arrangeTooltips: false,
})
);
var cursor = chart.set(
"cursor",
am5radar.RadarCursor.new(root, {
behavior: "zoomX",
})
);
cursor.lineY.set("visible", false);
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {
minGridDistance: 30,
});
xRenderer.labels.template.setAll({
textType: "radial",
radius: 10,
paddingTop: 0,
paddingBottom: 0,
centerY: am5.p50,
fontWeight: "400",
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
xRenderer.grid.template.setAll({
location: 0.5,
strokeDasharray: [2, 2],
stroke: KTUtil.getCssVariableValue('--bs-gray-400')
});
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "name",
renderer: xRenderer,
})
);
var yRenderer = am5radar.AxisRendererRadial.new(root, {
minGridDistance: 30,
});
yRenderer.labels.template.setAll({
fontWeight: "500",
fontSize: 12,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: yRenderer,
})
);
yRenderer.grid.template.setAll({
strokeDasharray: [2, 2],
stroke: KTUtil.getCssVariableValue('--bs-gray-400')
});
// Create series
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
var series1 = chart.series.push(
am5radar.RadarLineSeries.new(root, {
name: "Revenue",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value1",
categoryXField: "name",
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
})
);
series1.strokes.template.setAll({
strokeOpacity: 0,
});
series1.fills.template.setAll({
visible: true,
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
fillOpacity: 0.5,
});
var series2 = chart.series.push(
am5radar.RadarLineSeries.new(root, {
name: "Expense",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value2",
categoryXField: "name",
stacked: true,
tooltip: am5.Tooltip.new(root, {
labelText: "Revenue: {value1}\nExpense:{value2}",
}),
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
})
);
series2.strokes.template.setAll({
strokeOpacity: 0,
});
series2.fills.template.setAll({
visible: true,
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
fillOpacity: 0.5,
});
var legend = chart.radarContainer.children.push(
am5.Legend.new(root, {
width: 150,
centerX: am5.p50,
centerY: am5.p50,
})
);
legend.data.setAll([series1, series2]);
legend.labels.template.setAll({
fontWeight: "600",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
// Set data
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
var data = [
{
name: "Openlane",
value1: 160.2,
value2: 26.9,
},
{
name: "Yearin",
value1: 120.1,
value2: 50.5,
},
{
name: "Goodsilron",
value1: 150.7,
value2: 12.3,
},
{
name: "Condax",
value1: 69.4,
value2: 74.5,
},
{
name: "Opentech",
value1: 78.5,
value2: 29.7,
},
{
name: "Golddex",
value1: 77.6,
value2: 102.2,
},
{
name: "Isdom",
value1: 69.8,
value2: 22.6,
},
{
name: "Plusstrip",
value1: 63.6,
value2: 45.3,
},
{
name: "Kinnamplus",
value1: 59.7,
value2: 12.8,
},
{
name: "Zumgoity",
value1: 64.3,
value2: 19.6,
},
{
name: "Stanredtax",
value1: 52.9,
value2: 96.3,
},
{
name: "Conecom",
value1: 42.9,
value2: 11.9,
},
{
name: "Zencorporation",
value1: 40.9,
value2: 16.8,
},
{
name: "Iselectrics",
value1: 39.2,
value2: 9.9,
},
{
name: "Treequote",
value1: 76.6,
value2: 36.9,
},
{
name: "Sumace",
value1: 34.8,
value2: 14.6,
},
{
name: "Lexiqvolax",
value1: 32.1,
value2: 35.6,
},
{
name: "Sunnamplex",
value1: 31.8,
value2: 5.9,
},
{
name: "Faxquote",
value1: 29.3,
value2: 14.7,
},
{
name: "Donware",
value1: 23.0,
value2: 2.8,
},
{
name: "Warephase",
value1: 21.5,
value2: 12.1,
},
{
name: "Donquadtech",
value1: 19.7,
value2: 10.8,
},
{
name: "Nam-zim",
value1: 15.5,
value2: 4.1,
},
{
name: "Y-corporation",
value1: 14.2,
value2: 11.3,
},
];
series1.data.setAll(data);
series2.data.setAll(data);
xAxis.data.setAll(data);
// Animate chart and series in
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
series1.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);
}
// On amchart ready
am5.ready(function () {
init();
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
var initChart2 = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_25_chart_2");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
innerRadius: am5.percent(40),
radius: am5.percent(70),
arrangeTooltips: false,
})
);
var cursor = chart.set(
"cursor",
am5radar.RadarCursor.new(root, {
behavior: "zoomX",
})
);
cursor.lineY.set("visible", false);
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {
minGridDistance: 30,
});
xRenderer.labels.template.setAll({
textType: "radial",
radius: 10,
paddingTop: 0,
paddingBottom: 0,
centerY: am5.p50,
fontWeight: "400",
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
xRenderer.grid.template.setAll({
location: 0.5,
strokeDasharray: [2, 2],
stroke: KTUtil.getCssVariableValue('--bs-gray-400')
});
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "name",
renderer: xRenderer,
})
);
var yRenderer = am5radar.AxisRendererRadial.new(root, {
minGridDistance: 30,
});
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: yRenderer,
})
);
yRenderer.grid.template.setAll({
strokeDasharray: [2, 2],
stroke: KTUtil.getCssVariableValue('--bs-gray-400')
});
yRenderer.labels.template.setAll({
fontWeight: "500",
fontSize: 12,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
// Create series
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
var series1 = chart.series.push(
am5radar.RadarLineSeries.new(root, {
name: "Revenue",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value1",
categoryXField: "name",
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
})
);
series1.strokes.template.setAll({
strokeOpacity: 0,
});
series1.fills.template.setAll({
visible: true,
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
fillOpacity: 0.5,
});
var series2 = chart.series.push(
am5radar.RadarLineSeries.new(root, {
name: "Expense",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value2",
categoryXField: "name",
stacked: true,
tooltip: am5.Tooltip.new(root, {
labelText: "Revenue: {value1}\nExpense:{value2}",
}),
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
})
);
series2.strokes.template.setAll({
strokeOpacity: 0,
});
series2.fills.template.setAll({
visible: true,
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
fillOpacity: 0.5,
});
var legend = chart.radarContainer.children.push(
am5.Legend.new(root, {
width: 150,
centerX: am5.p50,
centerY: am5.p50,
})
);
legend.data.setAll([series1, series2]);
legend.labels.template.setAll({
fontWeight: "600",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
// Set data
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
var data = [
{
name: "Openlane",
value1: 160.2,
value2: 66.9,
},
{
name: "Yearin",
value1: 150.1,
value2: 50.5,
},
{
name: "Goodsilron",
value1: 120.7,
value2: 32.3,
},
{
name: "Condax",
value1: 89.4,
value2: 74.5,
},
{
name: "Opentech",
value1: 78.5,
value2: 29.7,
},
{
name: "Golddex",
value1: 77.6,
value2: 102.2,
},
{
name: "Isdom",
value1: 69.8,
value2: 22.6,
},
{
name: "Plusstrip",
value1: 63.6,
value2: 45.3,
},
{
name: "Kinnamplus",
value1: 59.7,
value2: 12.8,
},
{
name: "Zumgoity",
value1: 54.3,
value2: 19.6,
},
{
name: "Stanredtax",
value1: 52.9,
value2: 96.3,
},
{
name: "Conecom",
value1: 42.9,
value2: 11.9,
},
{
name: "Zencorporation",
value1: 40.9,
value2: 16.8,
},
{
name: "Iselectrics",
value1: 39.2,
value2: 9.9,
},
{
name: "Treequote",
value1: 36.6,
value2: 36.9,
},
{
name: "Sumace",
value1: 34.8,
value2: 14.6,
},
{
name: "Lexiqvolax",
value1: 32.1,
value2: 35.6,
},
{
name: "Sunnamplex",
value1: 31.8,
value2: 5.9,
},
{
name: "Faxquote",
value1: 29.3,
value2: 14.7,
},
{
name: "Donware",
value1: 23.0,
value2: 2.8,
},
{
name: "Warephase",
value1: 21.5,
value2: 12.1,
},
{
name: "Donquadtech",
value1: 19.7,
value2: 10.8,
},
{
name: "Nam-zim",
value1: 15.5,
value2: 4.1,
},
{
name: "Y-corporation",
value1: 14.2,
value2: 11.3,
},
];
series1.data.setAll(data);
series2.data.setAll(data);
xAxis.data.setAll(data);
// Animate chart and series in
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
series1.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);
}
// On amchart ready
am5.ready(function () {
init();
}); // end am5.ready()
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart1();
initChart2();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget25;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget25.init();
});
"use strict";
// Class definition
var KTChartsWidget26 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_26");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var lightColor = KTUtil.getCssVariableValue('--bs-primary');
var chartInfo = element.getAttribute('data-kt-chart-info');
var options = {
series: [{
name: chartInfo,
data: [34.5, 34.5, 35, 35, 35.5, 35.5, 35, 35, 35.5, 35.5, 35, 35, 34.5, 34.5, 35, 35, 35.5, 35.5, 35]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 19', 'Apr 21', ''],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
tickAmount: 6,
labels: {
rotate: 0,
rotateAlways: true,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
max: 36.3,
min: 33,
tickAmount: 6,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
},
formatter: function (val) {
return '$' + parseInt(10 * val)
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return '$' + parseInt(10 * val)
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart();
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget26;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget26.init();
});
"use strict";
// Class definition
var KTChartsWidget27 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_27");
if (!element) {
return;
}
var labelColor = KTUtil.getCssVariableValue('--bs-gray-800');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var maxValue = 18;
var options = {
series: [{
name: 'Sessions',
data: [12.478, 7.546, 6.083, 5.041, 4.420]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: 350,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 8,
horizontal: true,
distributed: true,
barHeight: 50,
dataLabels: {
position: 'bottom' // use 'bottom' for left and 'top' for right align(textAnchor)
}
}
},
dataLabels: { // Docs: https://apexcharts.com/docs/options/datalabels/
enabled: true,
textAnchor: 'start',
offsetX: 0,
formatter: function (val, opts) {
var val = val * 1000;
var Format = wNumb({
//prefix: '$',
//suffix: ',-',
thousand: ','
});
return Format.to(val);
},
style: {
fontSize: '14px',
fontWeight: '600',
align: 'left',
}
},
legend: {
show: false
},
colors: ['#3E97FF', '#F1416C', '#50CD89', '#FFC700', '#7239EA'],
xaxis: {
categories: ["USA", "India", 'Canada', 'Brasil', 'France'],
labels: {
formatter: function (val) {
return val + "K"
},
style: {
colors: labelColor,
fontSize: '14px',
fontWeight: '600',
align: 'left'
}
},
axisBorder: {
show: false
}
},
yaxis: {
labels: {
formatter: function (val, opt) {
if (Number.isInteger(val)) {
var percentage = parseInt(val * 100 / maxValue) . toString();
return val + ' - ' + percentage + '%';
} else {
return val;
}
},
style: {
colors: labelColor,
fontSize: '14px',
fontWeight: '600'
},
offsetY: 2,
align: 'left'
}
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: false
}
},
strokeDashArray: 4
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val;
}
}
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget27;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget27.init();
});
"use strict";
// Class definition
var KTChartsWidget28 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_28");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-info');
var options = {
series: [{
name: 'Links',
data: [190, 230, 230, 200, 200, 190, 190, 200, 200, 220, 220, 200, 200, 210, 210]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['May 04', 'May 05', 'May 06', 'May 09', 'May 10', 'May 12', 'May 14', 'May 17', 'May 18', 'May 20', 'May 22', 'May 24', 'May 26', 'May 28', 'May 30'],
axisBorder: {
show: false,
},
offsetX: 20,
axisTicks: {
show: false
},
tickAmount: 3,
labels: {
rotate: 0,
rotateAlways: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 250,
min: 100,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
},
formatter: function (val) {
return val
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val
}
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget28;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget28.init();
});
"use strict";
// Class definition
var KTChartsWidget29 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_29");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-warning');
var options = {
series: [{
name: 'Position',
data: [4, 7.5, 7.5, 6, 6, 4, 4, 6, 6, 8, 8, 6, 6, 7, 7]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 09', 'Apr 10', 'Apr 12', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 18', 'Apr 20', 'Apr 22', 'Apr 24'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
offsetX: 20,
tickAmount: 4,
labels: {
rotate: 0,
rotateAlways: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 10,
min: 1,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
},
formatter: function (val) {
return val
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val
}
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget29;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget29.init();
});
"use strict";
// Class definition
var KTChartsWidget3 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_3");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-success');
var lightColor = KTUtil.getCssVariableValue('--bs-success');
var options = {
series: [{
name: 'Sales',
data: [18, 18, 20, 20, 18, 18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 18, 20, 20, 22]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 15', 'Apr 16', 'Apr 17', 'Apr 18', ''],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
tickAmount: 6,
labels: {
rotate: 0,
rotateAlways: true,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 24,
min: 10,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
},
formatter: function (val) {
return '$' + val + "K"
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return "$" + val + "K"
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget3;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget3.init();
});
"use strict";
// Class definition
var KTChartsWidget30 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_30_chart");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
// start and end angle must be set both for chart and series
var chart = root.container.children.push(
am5percent.PieChart.new(root, {
startAngle: 180,
endAngle: 360,
layout: root.verticalLayout,
innerRadius: am5.percent(50),
})
);
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
// start and end angle must be set both for chart and series
var series = chart.series.push(
am5percent.PieSeries.new(root, {
startAngle: 180,
endAngle: 360,
valueField: "value",
categoryField: "category",
alignLabels: false,
})
);
series.labels.template.setAll({
fontWeight: "400",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
});
series.states.create("hidden", {
startAngle: 180,
endAngle: 180,
});
series.slices.template.setAll({
cornerRadius: 5,
});
series.ticks.template.setAll({
forceHidden: true,
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([
{ value: 10, category: "One", fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')) },
{ value: 9, category: "Two", fill: am5.color(KTUtil.getCssVariableValue('--bs-success')) },
{ value: 6, category: "Three", fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')) },
{ value: 5, category: "Four", fill: am5.color(KTUtil.getCssVariableValue('--bs-warning')) },
{ value: 4, category: "Five", fill: am5.color(KTUtil.getCssVariableValue('--bs-info')) },
{ value: 3, category: "Six", fill: am5.color(KTUtil.getCssVariableValue('--bs-secondary')) }
]);
series.appear(1000, 100);
}
am5.ready(function () {
init();
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget30;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget30.init();
});
"use strict";
// Class definition
var KTChartsWidget31 = (function () {
// Private methods
var initChart1 = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.getElementById("kt_charts_widget_31_chart");
if (!element) {
return;
}
var chart;
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
innerRadius: am5.percent(40),
radius: am5.percent(70),
arrangeTooltips: false,
})
);
var cursor = chart.set(
"cursor",
am5radar.RadarCursor.new(root, {
behavior: "zoomX",
})
);
cursor.lineY.set("visible", false);
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {
minGridDistance: 30,
});
xRenderer.labels.template.setAll({
textType: "radial",
radius: 10,
paddingTop: 0,
paddingBottom: 0,
centerY: am5.p50,
fontWeight: "400",
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
});
xRenderer.grid.template.setAll({
location: 0.5,
strokeDasharray: [2, 2],
stroke: KTUtil.getCssVariableValue('--bs-gray-400')
});
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "name",
renderer: xRenderer,
})
);
var yRenderer = am5radar.AxisRendererRadial.new(root, {
minGridDistance: 30,
});
yRenderer.labels.template.setAll({
fontWeight: "500",
fontSize: 12,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: yRenderer,
})
);
yRenderer.grid.template.setAll({
strokeDasharray: [2, 2],
stroke: KTUtil.getCssVariableValue('--bs-gray-400')
});
// Create series
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
var series1 = chart.series.push(
am5radar.RadarLineSeries.new(root, {
name: "Revenue",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value1",
categoryXField: "name",
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
})
);
series1.strokes.template.setAll({
strokeOpacity: 0,
});
series1.fills.template.setAll({
visible: true,
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
fillOpacity: 0.5,
});
var series2 = chart.series.push(
am5radar.RadarLineSeries.new(root, {
name: "Expense",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value2",
categoryXField: "name",
stacked: true,
tooltip: am5.Tooltip.new(root, {
labelText: "Revenue: {value1}\nExpense:{value2}",
}),
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
})
);
series2.strokes.template.setAll({
strokeOpacity: 0,
});
series2.fills.template.setAll({
visible: true,
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
fillOpacity: 0.5,
});
var legend = chart.radarContainer.children.push(
am5.Legend.new(root, {
width: 150,
centerX: am5.p50,
centerY: am5.p50
})
);
legend.data.setAll([series1, series2]);
legend.labels.template.setAll({
fontWeight: "600",
fontSize: 13,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
});
// Set data
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
var data = [
{
name: "Openlane",
value1: 160.2,
value2: 26.9,
},
{
name: "Yearin",
value1: 120.1,
value2: 50.5,
},
{
name: "Goodsilron",
value1: 150.7,
value2: 12.3,
},
{
name: "Condax",
value1: 69.4,
value2: 74.5,
},
{
name: "Opentech",
value1: 78.5,
value2: 29.7,
},
{
name: "Golddex",
value1: 77.6,
value2: 102.2,
},
{
name: "Isdom",
value1: 69.8,
value2: 22.6,
},
{
name: "Plusstrip",
value1: 63.6,
value2: 45.3,
},
{
name: "Kinnamplus",
value1: 59.7,
value2: 12.8,
},
{
name: "Zumgoity",
value1: 64.3,
value2: 19.6,
},
{
name: "Stanredtax",
value1: 52.9,
value2: 96.3,
},
{
name: "Conecom",
value1: 42.9,
value2: 11.9,
},
{
name: "Zencorporation",
value1: 40.9,
value2: 16.8,
},
{
name: "Iselectrics",
value1: 39.2,
value2: 9.9,
},
{
name: "Treequote",
value1: 76.6,
value2: 36.9,
},
{
name: "Sumace",
value1: 34.8,
value2: 14.6,
},
{
name: "Lexiqvolax",
value1: 32.1,
value2: 35.6,
},
{
name: "Sunnamplex",
value1: 31.8,
value2: 5.9,
},
{
name: "Faxquote",
value1: 29.3,
value2: 14.7,
},
{
name: "Donware",
value1: 23.0,
value2: 2.8,
},
{
name: "Warephase",
value1: 21.5,
value2: 12.1,
},
{
name: "Donquadtech",
value1: 19.7,
value2: 10.8,
},
{
name: "Nam-zim",
value1: 15.5,
value2: 4.1,
},
{
name: "Y-corporation",
value1: 14.2,
value2: 11.3,
},
];
series1.data.setAll(data);
series2.data.setAll(data);
xAxis.data.setAll(data);
// Animate chart and series in
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
series1.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);
}
// On amchart ready
am5.ready(function () {
init();
}); // end am5.ready()
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart1();
}
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget31;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget31.init();
});
"use strict";
// Class definition
var KTChartsWidget32 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, chartSelector, data, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var options = {
series: [{
name: 'Deliveries',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['22%'],
borderRadius: 5,
dataLabels: {
position: "top" // top, center, bottom
},
startingShape: 'flat'
},
},
legend: {
show: false
},
dataLabels: {
enabled: true,
offsetY: -28,
style: {
fontSize: '13px',
colors: [labelColor]
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Grossey', 'Pet Food', 'Flowers', 'Restaurant', 'Kids Toys', 'Clothing', 'Still Water'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
},
crosshairs: {
fill: {
gradient: {
opacityFrom: 0,
opacityTo: 0
}
}
}
},
yaxis: {
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
}
},
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-primary-light')],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [54, 42, 75, 110, 23, 87, 50];
initChart(chart1, '#kt_charts_widget_32_tab_1', '#kt_charts_widget_32_chart_1', chart1Data, true);
var chart2Data = [25, 55, 35, 50, 45, 20, 31];
initChart(chart2, '#kt_charts_widget_32_tab_2', '#kt_charts_widget_32_chart_2', chart2Data, false);
var chart3Data = [45, 15, 35, 70, 45, 50, 21];
initChart(chart3, '#kt_charts_widget_32_tab_3', '#kt_charts_widget_32_chart_3', chart3Data, false);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
initChart(chart1, '#kt_charts_widget_32_tab_1', '#kt_charts_widget_32_chart_1', chart1Data, chart1.rendered);
initChart(chart2, '#kt_charts_widget_32_tab_2', '#kt_charts_widget_32_chart_2', chart2Data, chart2.rendered);
initChart(chart3, '#kt_charts_widget_32_tab_3', '#kt_charts_widget_32_chart_3', chart3Data, chart3.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget32;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget32.init();
});
"use strict";
// Class definition
var KTChartsWidget33 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
var chart5 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, chartSelector, data, labels, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var color = element.getAttribute('data-kt-chart-color');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var options = {
series: [{
name: 'Etherium ',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0.2,
stops: [15, 120, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: labels,
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
offsetX: 20,
tickAmount: 4,
labels: {
rotate: 0,
rotateAlways: false,
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 4000,
min: 1000,
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val + '$';
}
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 3,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [2100, 3200, 3200, 2400, 2400, 1800, 1800, 2400, 2400, 3200, 3200, 3000, 3000, 3250, 3250];
var chart1Labels = ['10AM', '10.30AM', '11AM', '11.15AM', '11.30AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM'];
initChart(chart1, '#kt_charts_widget_33_tab_1', '#kt_charts_widget_33_chart_1', chart1Data, chart1Labels, true);
var chart2Data = [2300, 2300, 2000, 3200, 3200, 2800, 2400, 2400, 3100, 2900, 3100, 3100, 2600, 2600, 3200];
var chart2Labels = ['Apr 01', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 15'];
initChart(chart2, '#kt_charts_widget_33_tab_2', '#kt_charts_widget_33_chart_2', chart2Data, chart2Labels, false);
var chart3Data = [2600, 3200, 2300, 2300, 2000, 3200, 3100, 2900, 3200, 3200, 2600, 3100, 2800, 2400, 2400];
var chart3Labels = ['Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 09', 'Apr 10', 'Apr 12', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 18', 'Apr 20', 'Apr 22', 'Apr 24'];
initChart(chart3, '#kt_charts_widget_33_tab_3', '#kt_charts_widget_33_chart_3', chart3Data, chart3Labels, false);
var chart4Data = [1800, 1800, 2400, 2400, 3200, 3200, 3000, 2100, 3200, 3300, 2400, 2400, 3000, 3200, 3100];
var chart4Labels = ['Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022'];
initChart(chart4, '#kt_charts_widget_33_tab_4', '#kt_charts_widget_33_chart_4', chart4Data, chart4Labels, false);
var chart5Data = [3000, 2100, 3300, 3100, 1800, 1800, 2400, 2400, 3100, 3100, 2400, 2400, 3000, 2400, 2800];
var chart5Labels = ['Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022', 'Sep 2022', 'Oct 2022', 'Nov 2022'];
initChart(chart5, '#kt_charts_widget_33_tab_5', '#kt_charts_widget_33_chart_5', chart5Data, chart5Labels, false);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
if (chart5.rendered) {
chart5.self.destroy();
}
initChart(chart1, '#kt_charts_widget_33_tab_1', '#kt_charts_widget_33_chart_1', chart1Data, chart1Labels, chart1.rendered);
initChart(chart2, '#kt_charts_widget_33_tab_2', '#kt_charts_widget_33_chart_2', chart2Data, chart2Labels, chart2.rendered);
initChart(chart3, '#kt_charts_widget_33_tab_3', '#kt_charts_widget_33_chart_3', chart3Data, chart3Labels, chart3.rendered);
initChart(chart4, '#kt_charts_widget_33_tab_4', '#kt_charts_widget_33_chart_4', chart4Data, chart4Labels, chart4.rendered);
initChart(chart5, '#kt_charts_widget_33_tab_5', '#kt_charts_widget_33_chart_5', chart5Data, chart5Labels, chart5.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget33;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget33.init();
});
"use strict";
// Class definition
var KTChartsWidget34 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
var chart5 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, chartSelector, data, labels, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var color = element.getAttribute('data-kt-chart-color');
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var options = {
series: [{
name: 'Earnings',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0.2,
stops: [15, 120, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: labels,
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
offsetX: 20,
tickAmount: 4,
labels: {
rotate: 0,
rotateAlways: false,
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 4000,
min: 1000,
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val + '$';
}
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 3,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [2100, 2800, 2800, 2400, 2400, 1800, 1800, 2400, 2400, 3200, 3200, 2800, 2800, 3250, 3250];
var chart1Labels = ['10AM', '10.30AM', '11AM', '11.15AM', '11.30AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM'];
initChart(chart1, '#kt_charts_widget_34_tab_1', '#kt_charts_widget_34_chart_1', chart1Data, chart1Labels, true);
var chart2Data = [2300, 2300, 2000, 3100, 3100, 2800, 2400, 2400, 3100, 2900, 3200, 3200, 2600, 2600, 3200];
var chart2Labels = ['Apr 01', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 15'];
initChart(chart2, '#kt_charts_widget_34_tab_2', '#kt_charts_widget_34_chart_2', chart2Data, chart2Labels, false);
var chart3Data = [2600, 3400, 2300, 2300, 2000, 3100, 3100, 2900, 3200, 3200, 2600, 3100, 2800, 2400, 2400];
var chart3Labels = ['Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 09', 'Apr 10', 'Apr 12', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 18', 'Apr 20', 'Apr 22', 'Apr 24'];
initChart(chart3, '#kt_charts_widget_34_tab_3', '#kt_charts_widget_34_chart_3', chart3Data, chart3Labels, false);
var chart4Data = [1800, 1800, 2400, 2400, 3100, 3100, 3000, 2100, 3200, 3200, 2400, 2400, 3000, 3200, 3100];
var chart4Labels = ['Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022'];
initChart(chart4, '#kt_charts_widget_34_tab_4', '#kt_charts_widget_34_chart_4', chart4Data, chart4Labels, false);
var chart5Data = [3000, 2100, 3200, 3200, 1800, 1800, 2400, 2400, 3100, 3100, 2400, 2400, 3000, 2400, 2800];
var chart5Labels = ['Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022', 'Sep 2022', 'Oct 2022', 'Nov 2022'];
initChart(chart5, '#kt_charts_widget_34_tab_5', '#kt_charts_widget_34_chart_5', chart5Data, chart5Labels, false);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
if (chart5.rendered) {
chart5.self.destroy();
}
initChart(chart1, '#kt_charts_widget_34_tab_1', '#kt_charts_widget_34_chart_1', chart1Data, chart1Labels, chart1.rendered);
initChart(chart2, '#kt_charts_widget_34_tab_2', '#kt_charts_widget_34_chart_2', chart2Data, chart2Labels, chart2.rendered);
initChart(chart3, '#kt_charts_widget_34_tab_3', '#kt_charts_widget_34_chart_3', chart3Data, chart3Labels, chart3.rendered);
initChart(chart4, '#kt_charts_widget_34_tab_4', '#kt_charts_widget_34_chart_4', chart4Data, chart4Labels, chart4.rendered);
initChart(chart5, '#kt_charts_widget_34_tab_5', '#kt_charts_widget_34_chart_5', chart5Data, chart5Labels, chart5.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget34;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget34.init();
});
"use strict";
// Class definition
var KTChartsWidget35 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
var chart5 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, chartSelector, data, labels, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var color = element.getAttribute('data-kt-chart-color');
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var options = {
series: [{
name: 'Earnings',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0.2,
stops: [15, 120, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: labels,
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
offsetX: 20,
tickAmount: 4,
labels: {
rotate: 0,
rotateAlways: false,
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 4000,
min: 1000,
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val + '$';
}
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 3,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [2100, 3100, 3100, 2400, 2400, 1800, 1800, 2400, 2400, 3200, 3200, 2800, 2800, 3250, 3250];
var chart1Labels = ['10AM', '10.30AM', '11AM', '11.15AM', '11.30AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM'];
initChart(chart1, '#kt_charts_widget_35_tab_1', '#kt_charts_widget_35_chart_1', chart1Data, chart1Labels, true);
var chart2Data = [2300, 2300, 2000, 3200, 3200, 2800, 2400, 2400, 3100, 2900, 3200, 3200, 2600, 2600, 3200];
var chart2Labels = ['Apr 01', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 15'];
initChart(chart2, '#kt_charts_widget_35_tab_2', '#kt_charts_widget_35_chart_2', chart2Data, chart2Labels, false);
var chart3Data = [2600, 3200, 2300, 2300, 2000, 3200, 3100, 2900, 3400, 3400, 2600, 3200, 2800, 2400, 2400];
var chart3Labels = ['Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 09', 'Apr 10', 'Apr 12', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 18', 'Apr 20', 'Apr 22', 'Apr 24'];
initChart(chart3, '#kt_charts_widget_35_tab_3', '#kt_charts_widget_35_chart_3', chart3Data, chart3Labels, false);
var chart4Data = [1800, 1800, 2400, 2400, 3200, 3200, 3000, 2100, 3200, 3200, 2400, 2400, 3000, 3200, 3100];
var chart4Labels = ['Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022'];
initChart(chart4, '#kt_charts_widget_35_tab_4', '#kt_charts_widget_35_chart_4', chart4Data, chart4Labels, false);
var chart5Data = [3200, 2100, 3200, 3200, 3200, 3500, 3000, 2400, 3250, 2400, 2400, 3250, 3000, 2400, 2800];
var chart5Labels = ['Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022', 'Sep 2022', 'Oct 2022', 'Nov 2022'];
initChart(chart5, '#kt_charts_widget_35_tab_5', '#kt_charts_widget_35_chart_5', chart5Data, chart5Labels, false);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
if (chart5.rendered) {
chart5.self.destroy();
}
initChart(chart1, '#kt_charts_widget_35_tab_1', '#kt_charts_widget_35_chart_1', chart1Data, chart1Labels, chart1.rendered);
initChart(chart2, '#kt_charts_widget_35_tab_2', '#kt_charts_widget_35_chart_2', chart2Data, chart2Labels, chart2.rendered);
initChart(chart3, '#kt_charts_widget_35_tab_3', '#kt_charts_widget_35_chart_3', chart3Data, chart3Labels, chart3.rendered);
initChart(chart4, '#kt_charts_widget_35_tab_4', '#kt_charts_widget_35_chart_4', chart4Data, chart4Labels, chart4.rendered);
initChart(chart5, '#kt_charts_widget_35_tab_5', '#kt_charts_widget_35_chart_5', chart5Data, chart5Labels, chart5.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget35;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget35.init();
});
"use strict";
// Class definition
var KTChartsWidget36 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_36");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseprimaryColor = KTUtil.getCssVariableValue('--bs-primary');
var lightprimaryColor = KTUtil.getCssVariableValue('--bs-primary');
var basesuccessColor = KTUtil.getCssVariableValue('--bs-success');
var lightsuccessColor = KTUtil.getCssVariableValue('--bs-success');
var options = {
series: [{
name: 'Inbound Calls',
data: [65, 80, 80, 60, 60, 45, 45, 80, 80, 70, 70, 90, 90, 80, 80, 80, 60, 60, 50]
}, {
name: 'Outbound Calls',
data: [90, 110, 110, 95, 95, 85, 85, 95, 95, 115, 115, 100, 100, 115, 115, 95, 95, 85, 85]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0.2,
stops: [15, 120, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseprimaryColor, basesuccessColor]
},
xaxis: {
categories: ['', '8 AM', '81 AM', '9 AM', '10 AM', '11 AM', '12 PM', '13 PM', '14 PM', '15 PM', '16 PM', '17 PM', '18 PM', '18:20 PM', '18:20 PM', '19 PM', '20 PM', '21 PM', ''],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
tickAmount: 6,
labels: {
rotate: 0,
rotateAlways: true,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: [baseprimaryColor, basesuccessColor],
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
max: 120,
min: 30,
tickAmount: 6,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
}
},
colors: [lightprimaryColor, lightsuccessColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: [baseprimaryColor, basesuccessColor],
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget36;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget36.init();
});
"use strict";
// Class definition
var KTChartsWidget37 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, chartSelector, data, labels, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var color = element.getAttribute('data-kt-chart-color');
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var options = {
series: [{
name: 'Earnings',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0.2,
stops: [15, 120, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: labels,
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
offsetX: 20,
tickAmount: 4,
labels: {
rotate: 0,
rotateAlways: false,
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 4000,
min: 1000,
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val + '$';
}
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 3,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [2100, 3200, 3200, 2400, 2400, 1800, 1800, 2400, 2400, 3200, 3200, 3000, 3000, 3250, 3250];
var chart1Labels = ['10AM', '10.30AM', '11AM', '11.15AM', '11.30AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM'];
initChart(chart1, '#kt_charts_widget_37_tab_1', '#kt_charts_widget_37_chart_1', chart1Data, chart1Labels, true);
var chart2Data = [2300, 2300, 2000, 3200, 3200, 2800, 2400, 2400, 3100, 2900, 3100, 3100, 2600, 2600, 3200];
var chart2Labels = ['Apr 01', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 15'];
initChart(chart2, '#kt_charts_widget_37_tab_2', '#kt_charts_widget_37_chart_2', chart2Data, chart2Labels, false);
var chart3Data = [2600, 3200, 2300, 2300, 2000, 3200, 3100, 2900, 3200, 3200, 2600, 3100, 2800, 2400, 2400];
var chart3Labels = ['Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 09', 'Apr 10', 'Apr 12', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 18', 'Apr 20', 'Apr 22', 'Apr 24'];
initChart(chart3, '#kt_charts_widget_37_tab_3', '#kt_charts_widget_37_chart_3', chart3Data, chart3Labels, false);
var chart4Data = [1800, 1800, 2400, 2400, 3200, 3200, 3000, 2100, 3200, 3300, 2400, 2400, 3000, 3200, 3100];
var chart4Labels = ['Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022'];
initChart(chart4, '#kt_charts_widget_37_tab_4', '#kt_charts_widget_37_chart_4', chart4Data, chart4Labels, false);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
initChart(chart1, '#kt_charts_widget_37_tab_1', '#kt_charts_widget_37_chart_1', chart1Data, chart1Labels, chart1.rendered);
initChart(chart2, '#kt_charts_widget_37_tab_2', '#kt_charts_widget_37_chart_2', chart2Data, chart2Labels, chart2.rendered);
initChart(chart3, '#kt_charts_widget_37_tab_3', '#kt_charts_widget_37_chart_3', chart3Data, chart3Labels, chart3.rendered);
initChart(chart4, '#kt_charts_widget_37_tab_4', '#kt_charts_widget_37_chart_4', chart4Data, chart4Labels, chart4.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget37;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget37.init();
});
"use strict";
// Class definition
var KTChartsWidget38 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_38_chart");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var options = {
series: [{
name: 'LOI Issued',
data: [54, 42, 75, 110, 23, 87, 50]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['28%'],
borderRadius: 5,
dataLabels: {
position: "top" // top, center, bottom
},
startingShape: 'flat'
},
},
legend: {
show: false
},
dataLabels: {
enabled: true,
offsetY: -28,
style: {
fontSize: '13px',
colors: [labelColor]
},
formatter: function(val) {
return val;// + "H";
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['E2E', 'IMC', 'SSMC', 'SSBD', 'ICCD', 'PAN', 'SBN'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
},
crosshairs: {
fill: {
gradient: {
opacityFrom: 0,
opacityTo: 0
}
}
}
},
yaxis: {
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
},
formatter: function(val) {
return val + "M";
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return + val + 'M'
}
}
},
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-primary-light')],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart();
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget38;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget38.init();
});
"use strict";
// Class definition
var KTChartsWidget39 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.querySelector('#kt_charts_widget_39_chart');
if ( !element ) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
if ( !root ) {
return;
}
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
})
);
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {});
xRenderer.labels.template.setAll({
radius: 10
});
xRenderer.grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-700"))
});
var yRenderer = am5radar.AxisRendererRadial.new(root, {
minGridDistance: 20
});
yRenderer.grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-700"))
});
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "category",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {}),
})
);
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
min: 0,
max: 10,
renderer: yRenderer
})
);
xRenderer.labels.template.setAll({
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
});
yRenderer.labels.template.setAll({
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
});
//yAxis.get("renderer").labels.template.set("forceHidden", true);
// Create series
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
var series = chart.series.push(
am5radar.RadarColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
categoryXField: "category",
})
);
series.columns.template.setAll({
tooltipText: "{categoryX}: {valueY}",
templateField: "columnSettings",
strokeOpacity: 0,
width: am5.p100,
});
// Set data
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
var data = [
{
category: "Spain",
value: 5,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Spain",
value: 4,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "United States",
value: 9,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Italy",
value: 7,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "France",
value: 8,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Norway",
value: 4,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Brasil",
value: 7,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Canada",
value: 5,
columnSettings: {
fill: chart.get("colors").next(),
},
},
];
series.data.setAll(data);
xAxis.data.setAll(data);
// Animate chart
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
series.appear(1000);
chart.appear(1000, 100);
}
// On amchart ready
am5.ready(function () {
init();
}); // end am5.ready()
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget39;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget39.init();
});
"use strict";
// Class definition
var KTChartsWidget4 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_4");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var lightColor = KTUtil.getCssVariableValue('--bs-primary');
var options = {
series: [{
name: 'Sales',
data: [34.5, 34.5, 35, 35, 35.5, 35.5, 35, 35, 35.5, 35.5, 35, 35, 34.5, 34.5, 35, 35, 35.5, 35.5, 35]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 19', 'Apr 21', ''],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
tickAmount: 6,
labels: {
rotate: 0,
rotateAlways: true,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
max: 36.3,
min: 33,
tickAmount: 6,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
},
formatter: function (val) {
return '$' + parseInt(10 * val)
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return '$' + parseInt(10 * val)
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget4;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget4.init();
});
"use strict";
// Class definition
var KTChartsWidget40 = (function () {
// Private methods
var initChart = function () {
// Check if amchart library is included
if (typeof am5 === "undefined") {
return;
}
var element = document.querySelector('#kt_charts_widget_40_chart');
if ( !element ) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
if ( !root ) {
return;
}
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
})
);
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {});
xRenderer.labels.template.setAll({
radius: 10
});
xRenderer.grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-700"))
});
var yRenderer = am5radar.AxisRendererRadial.new(root, {
minGridDistance: 20
});
yRenderer.grid.template.setAll({
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-700"))
});
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "category",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {}),
})
);
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
min: 0,
max: 10,
renderer: yRenderer
})
);
xRenderer.labels.template.setAll({
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
});
yRenderer.labels.template.setAll({
fontSize: 11,
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
});
//yAxis.get("renderer").labels.template.set("forceHidden", true);
// Create series
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
var series = chart.series.push(
am5radar.RadarColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
categoryXField: "category",
})
);
series.columns.template.setAll({
tooltipText: "{categoryX}: {valueY}",
templateField: "columnSettings",
strokeOpacity: 0,
width: am5.p100,
});
// Set data
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
var data = [
{
category: "Spain",
value: 5,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Spain",
value: 4,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "United States",
value: 9,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Italy",
value: 7,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "France",
value: 8,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Norway",
value: 4,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Brasil",
value: 7,
columnSettings: {
fill: chart.get("colors").next(),
},
},
{
category: "Canada",
value: 5,
columnSettings: {
fill: chart.get("colors").next(),
},
},
];
series.data.setAll(data);
xAxis.data.setAll(data);
// Animate chart
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
series.appear(1000);
chart.appear(1000, 100);
}
// On amchart ready
am5.ready(function () {
init();
}); // end am5.ready()
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initChart();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTChartsWidget40;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTChartsWidget40.init();
});
"use strict";
// Class definition
var KTChartsWidget41 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
var chart5 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, chartSelector, data, labels, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var color = element.getAttribute('data-kt-chart-color');
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var options = {
series: [{
name: 'Earnings',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0.2,
stops: [15, 120, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: labels,
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
offsetX: 20,
tickAmount: 4,
labels: {
rotate: 0,
rotateAlways: false,
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 4000,
min: 1000,
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val + '$';
}
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 3,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [2100, 3100, 3100, 2400, 2400, 1800, 1800, 2400, 2400, 3200, 3200, 2800, 2800, 3250, 3250];
var chart1Labels = ['10AM', '10.30AM', '11AM', '11.15AM', '11.30AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM'];
initChart(chart1, '#kt_charts_widget_41_tab_1', '#kt_charts_widget_41_chart_1', chart1Data, chart1Labels, true);
var chart2Data = [2300, 2300, 2000, 3200, 3200, 2800, 2400, 2400, 3100, 2900, 3200, 3200, 2600, 2600, 3200];
var chart2Labels = ['Apr 01', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 15'];
initChart(chart2, '#kt_charts_widget_41_tab_2', '#kt_charts_widget_41_chart_2', chart2Data, chart2Labels, false);
var chart3Data = [2600, 3200, 2300, 2300, 2000, 3200, 3100, 2900, 3400, 3400, 2600, 3200, 2800, 2400, 2400];
var chart3Labels = ['Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 09', 'Apr 10', 'Apr 12', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 18', 'Apr 20', 'Apr 22', 'Apr 24'];
initChart(chart3, '#kt_charts_widget_41_tab_3', '#kt_charts_widget_41_chart_3', chart3Data, chart3Labels, false);
var chart4Data = [1800, 1800, 2400, 2400, 3200, 3200, 3000, 2100, 3200, 3200, 2400, 2400, 3000, 3200, 3100];
var chart4Labels = ['Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022'];
initChart(chart4, '#kt_charts_widget_41_tab_4', '#kt_charts_widget_41_chart_4', chart4Data, chart4Labels, false);
var chart5Data = [3200, 2100, 3200, 3200, 3200, 3500, 3000, 2400, 3250, 2400, 2400, 3250, 3000, 2400, 2800];
var chart5Labels = ['Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022', 'Aug 2022', 'Sep 2022', 'Oct 2022', 'Nov 2022'];
initChart(chart5, '#kt_charts_widget_41_tab_5', '#kt_charts_widget_41_chart_5', chart5Data, chart5Labels, false);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
if (chart5.rendered) {
chart5.self.destroy();
}
initChart(chart1, '#kt_charts_widget_41_tab_1', '#kt_charts_widget_41_chart_1', chart1Data, chart1Labels, chart1.rendered);
initChart(chart2, '#kt_charts_widget_41_tab_2', '#kt_charts_widget_41_chart_2', chart2Data, chart2Labels, chart2.rendered);
initChart(chart3, '#kt_charts_widget_41_tab_3', '#kt_charts_widget_41_chart_3', chart3Data, chart3Labels, chart3.rendered);
initChart(chart4, '#kt_charts_widget_41_tab_4', '#kt_charts_widget_41_chart_4', chart4Data, chart4Labels, chart4.rendered);
initChart(chart5, '#kt_charts_widget_41_tab_5', '#kt_charts_widget_41_chart_5', chart5Data, chart5Labels, chart5.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget41;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget41.init();
});
"use strict";
// Class definition
var KTChartsWidget42 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_42");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseprimaryColor = KTUtil.getCssVariableValue('--bs-primary');
var basesuccessColor = KTUtil.getCssVariableValue('--bs-success');
var options = {
series: [{
name: 'Inbound Calls',
data: [45, 80, 53, 80, 75, 100, 76, 117, 76, 110, 70, 112]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseprimaryColor, basesuccessColor]
},
xaxis: {
categories: ['', '29 Sep', '1 Aug', '2 Aug', '3 Aug', '4 Aug', '5 Aug', '6 Aug', '7 Aug', '8 Aug', '9 Aug', '10 Aug', '11 Aug', '12 Aug', '13 Aug','14 Aug', '15 Aug', '16 Aug', ''],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
tickAmount: 6,
labels: {
rotate: 0,
rotateAlways: true,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: [baseprimaryColor, basesuccessColor],
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
max: 120,
min: 30,
tickAmount: 6,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
}
},
colors: [baseprimaryColor, basesuccessColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: [baseprimaryColor, basesuccessColor],
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget42;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget42.init();
});
"use strict";
// Class definition
var KTChartsWidget43 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_43");
if (!element) {
return;
}
var color = element.getAttribute('data-kt-chart-color');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-800');
var strokeColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var lightColor = KTUtil.getCssVariableValue('--bs-' + color + '-light');
var options = {
series: [{
name: 'Overview',
data: [30, 30, 45, 45, 35, 35, 25, 25, 50, 50]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
show: false,
position: 'front',
stroke: {
color: strokeColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
min: 0,
max: 60,
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val
}
}
},
colors: [lightColor],
markers: {
colors: lightColor,
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart();
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget43;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget43.init();
});
"use strict";
// Class definition
var KTChartsWidget44 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_44");
if (!element) {
return;
}
var color = element.getAttribute('data-kt-chart-color');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-800');
var strokeColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var lightColor = KTUtil.getCssVariableValue('--bs-' + color + '-light');
var options = {
series: [{
name: 'Overview',
data: [20, 37, 22, 45, 20, 50, 25, 57, 40]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
show: false,
position: 'front',
stroke: {
color: strokeColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
min: 0,
max: 60,
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val
}
}
},
colors: [lightColor],
markers: {
colors: lightColor,
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart();
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget44;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget44.init();
});
"use strict";
// Class definition
var KTChartsWidget45 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_45");
if (!element) {
return;
}
var color = element.getAttribute('data-kt-chart-color');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-800');
var strokeColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var lightColor = KTUtil.getCssVariableValue('--bs-' + color);
var options = {
series: [{
name: 'Overview',
data: [15, 15, 42, 42, 13, 13, 35]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.3,
opacityTo: 0.2,
stops: [15, 120, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
show: false,
position: 'front',
stroke: {
color: strokeColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
min: 0,
max: 60,
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val
}
}
},
colors: [lightColor],
markers: {
colors: lightColor,
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart();
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget45;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget45.init();
});
"use strict";
// Class definition
var KTChartsWidget46 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_46");
if (!element) {
return;
}
var negativeColor = element.hasAttribute('data-kt-negative-color') ? element.getAttribute('data-kt-negative-color') : KTUtil.getCssVariableValue('--bs-gary-500');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
var options = {
series: [{
name: 'Subscribed',
data: [20, 30, 20, 40, 60, 75, 65, 18, 10, 5, 15, 40, 60, 18, 35, 55, 20]
}, {
name: 'Unsubscribed',
data: [-20, -15, -5, -20, -30, -15, -10, -8, -5, -5, -10, -25, -15, -5, -10, -5, -15]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
stacked: true,
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
//horizontal: false,
columnWidth: "35%",
barHeight: "70%",
borderRadius: [4, 4]
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['Jan 5', 'Jan 7', 'Jan 9', 'Jan 11', 'Jan 13', 'Jan 15', 'Jan 17', 'Jan 19', 'Jan 20', 'Jan 21', 'Jan 23', 'Jan 24', 'Jan 25', 'Jan 26', 'Jan 24', 'Jan 28', 'Jan 29'],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
tickAmount: 10,
labels: {
//rotate: -45,
//rotateAlways: true,
style: {
colors: [labelColor],
fontSize: '12px'
}
},
crosshairs: {
show: false
}
},
yaxis: {
min: -100,
max: 150,
tickAmount: 5,
labels: {
style: {
colors: [labelColor],
fontSize: '12px'
},
formatter: function (val) {
return parseInt(val)
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px',
borderRadius: 4
},
y: {
formatter: function (val) {
if (val > 0) {
return val + 'K';
} else {
return Math.abs(val) + 'K';
}
}
}
},
colors: [baseColor, negativeColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget46;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget46.init();
});
"use strict";
// Class definition
var KTChartsWidget5 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_5");
if (!element) {
return;
}
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var options = {
series: [{
data: [15, 12, 10, 8, 7, 4, 3],
show: false
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
distributed: true,
barHeight: 23
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
colors: ['#3E97FF', '#F1416C', '#50CD89', '#FFC700', '#7239EA', '#50CDCD', '#3F4254'],
xaxis: {
categories: ['Phones', 'Laptops', 'Headsets', 'Games', 'Keyboardsy', 'Monitors', 'Speakers'],
labels: {
formatter: function (val) {
return val + "K"
},
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-400'),
fontSize: '14px',
fontWeight: '600',
align: 'left'
}
},
axisBorder: {
show: false
}
},
yaxis: {
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-800'),
fontSize: '14px',
fontWeight: '600'
},
offsetY: 2,
align: 'left'
}
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: false
}
},
strokeDashArray: 4
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget5;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget5.init();
});
"use strict";
// Class definition
var KTChartsWidget6 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_6");
if (!element) {
return;
}
var labelColor = KTUtil.getCssVariableValue('--bs-gray-800');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var maxValue = 18;
var options = {
series: [{
name: 'Sales',
data: [15, 12, 10, 8, 7]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: 350,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 8,
horizontal: true,
distributed: true,
barHeight: 50,
dataLabels: {
position: 'bottom' // use 'bottom' for left and 'top' for right align(textAnchor)
}
}
},
dataLabels: { // Docs: https://apexcharts.com/docs/options/datalabels/
enabled: true,
textAnchor: 'start',
offsetX: 0,
formatter: function (val, opts) {
var val = val * 1000;
var Format = wNumb({
//prefix: '$',
//suffix: ',-',
thousand: ','
});
return Format.to(val);
},
style: {
fontSize: '14px',
fontWeight: '600',
align: 'left',
}
},
legend: {
show: false
},
colors: ['#3E97FF', '#F1416C', '#50CD89', '#FFC700', '#7239EA'],
xaxis: {
categories: ["ECR - 90%", "FGI - 82%", 'EOQ - 75%', 'FMG - 60%', 'PLG - 50%'],
labels: {
formatter: function (val) {
return val + "K"
},
style: {
colors: [labelColor],
fontSize: '14px',
fontWeight: '600',
align: 'left'
}
},
axisBorder: {
show: false
}
},
yaxis: {
labels: {
formatter: function (val, opt) {
if (Number.isInteger(val)) {
var percentage = parseInt(val * 100 / maxValue) . toString();
return val + ' - ' + percentage + '%';
} else {
return val;
}
},
style: {
colors: labelColor,
fontSize: '14px',
fontWeight: '600'
},
offsetY: 2,
align: 'left'
}
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: false
}
},
strokeDashArray: 4
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return val + 'K';
}
}
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget6;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget6.init();
});
"use strict";
// Class definition
var KTChartsWidget7 = function () {
// Private methods
var initChart = function(chartSelector) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var options = {
series: [{
name: 'Net Profit',
data: data1
}, {
name: 'Revenue',
data: data2
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['40%'],
borderRadius: [6]
},
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-700'),
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-700'),
fontSize: '12px'
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-primary-light')],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
var chart = new ApexCharts(element, options);
var init = false;
var tab = document.querySelector(tabSelector);
if (initByDefault === true) {
chart.render();
init = true;
}
tab.addEventListener('shown.bs.tab', function (event) {
if (init == false) {
chart.render();
init = true;
}
})
var chart = new ApexCharts(element, options);
chart.render();
}
// Public methods
return {
init: function () {
initChart('#kt_chart_widget_7_tab_1', '#kt_chart_widget_7_chart_1', [44, 55, 57, 56, 61, 58], [76, 85, 101, 98, 87, 105], true);
initChart('#kt_chart_widget_7_tab_2', '#kt_chart_widget_7_chart_2', [35, 60, 35, 50, 45, 30], [65, 80, 50, 80, 75, 105], false);
initChart('#kt_chart_widget_7_tab_3', '#kt_chart_widget_7_chart_3', [25, 40, 45, 50, 40, 60], [76, 85, 101, 98, 87, 105], false);
initChart('#kt_chart_widget_7_tab_4', '#kt_chart_widget_7_chart_4', [50, 35, 45, 55, 30, 40], [76, 85, 101, 98, 87, 105], false);
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget7;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
//KTChartsWidget7.init();
});
"use strict";
// Class definition
var KTChartsWidget8 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, selector, data, initByDefault) {
var element = document.querySelector(selector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var options = {
series: [
{
name: 'Social Campaigns',
data: data[0] // array value is of the format [x, y, z] where x (timestamp) and y are the two axes coordinates,
}, {
name: 'Email Newsletter',
data: data[1]
}, {
name: 'TV Campaign',
data: data[2]
}, {
name: 'Google Ads',
data: data[3]
}, {
name: 'Courses',
data: data[4]
}, {
name: 'Radio',
data: data[5]
}
],
chart: {
fontFamily: 'inherit',
type: 'bubble',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bubble: {
}
},
stroke: {
show: false,
width: 0
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
xaxis: {
type: 'numeric',
tickAmount: 7,
min: 0,
max: 700,
axisBorder: {
show: false,
},
axisTicks: {
show: true,
height: 0,
},
labels: {
show: true,
trim: true,
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
}
},
yaxis: {
tickAmount: 7,
min: 0,
max: 700,
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
x: {
formatter: function (val) {
return "Clicks: " + val;
}
},
y: {
formatter: function (val) {
return "$" + val + "K"
}
},
z: {
title: 'Impression: '
}
},
crosshairs: {
show: true,
position: 'front',
stroke: {
color: KTUtil.getCssVariableValue('--bs-border-dashed-color'),
width: 1,
dashArray: 0,
}
},
colors: [
KTUtil.getCssVariableValue('--bs-primary'),
KTUtil.getCssVariableValue('--bs-success'),
KTUtil.getCssVariableValue('--bs-warning'),
KTUtil.getCssVariableValue('--bs-danger'),
KTUtil.getCssVariableValue('--bs-info'),
'#43CED7'
],
fill: {
opacity: 1,
},
markers: {
strokeWidth: 0
},
grid: {
borderColor: borderColor,
strokeDashArray: 4,
padding: {
right: 20
},
yaxis: {
lines: {
show: true
}
}
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var data1 = [
[[100, 250, 30]], [[225, 300, 35]], [[300, 350, 25]], [[350, 350, 20]], [[450, 400, 25]], [[550, 350, 35]]
];
var data2 = [
[[125, 300, 40]], [[250, 350, 35]], [[350, 450, 30]], [[450, 250, 25]], [[500, 500, 30]], [[600, 250, 28]]
];
initChart(chart1, '#kt_chart_widget_8_week_toggle', '#kt_chart_widget_8_week_chart', data1, false);
initChart(chart2, '#kt_chart_widget_8_month_toggle', '#kt_chart_widget_8_month_chart', data2, true);
// Update chart on theme mode change
var handlerId = KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
initChart(chart1, '#kt_chart_widget_8_week_toggle', '#kt_chart_widget_8_week_chart', data1, chart1.rendered);
initChart(chart2, '#kt_chart_widget_8_month_toggle', '#kt_chart_widget_8_month_chart', data2, chart2.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget8;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget8.init();
});
"use strict";
// Class definition
var KTChartsWidget9 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_9");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-400');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-gray-200');
var secondaryColor = KTUtil.getCssVariableValue('--bs-primary');
var options = {
series: [{
name: 'Order',
data: [21, 21, 26, 26, 31, 31, 27]
}, {
name: 'Revenue',
data: [12, 16, 16, 21, 21, 18, 18]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
colors: [baseColor]
},
xaxis: {
categories: ['', '06 Sep', '13 Sep', '20 Sep', '27 Sep', '30 Sep', ''],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: labelColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
crosshairs: {
show: true,
position: 'front',
stroke: {
color: KTUtil.getCssVariableValue('--bs-border-dashed-color'),
width: 1,
dashArray: 0,
},
},
colors: [baseColor, secondaryColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
colors: [baseColor, secondaryColor],
strokeColor: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-gray-300')],
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart();
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget9;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget9.init();
});
"use strict";
// Class definition
var KTFormsWidget1 = (function () {
// Private methods
var initForm1 = function () {
var element = document.querySelector('#kt_forms_widget_1_select_1');
if ( !element ) {
return;
}
var optionFormat = function(item) {
if ( !item.id ) {
return item.text;
}
var span = document.createElement('span');
var template = '';
template += '<img src="' + item.element.getAttribute('data-kt-select2-icon') + '" class="rounded-circle h-20px me-2" alt="image"/>';
template += item.text;
span.innerHTML = template;
return $(span);
}
// Init Select2 --- more info: https://select2.org/
$(element).select2({
placeholder: "Select coin",
minimumResultsForSearch: Infinity,
templateSelection: optionFormat,
templateResult: optionFormat
});
};
var initForm2 = function () {
var element = document.querySelector('#kt_forms_widget_1_select_2');
if ( !element ) {
return;
}
var optionFormat = function(item) {
if ( !item.id ) {
return item.text;
}
var span = document.createElement('span');
var template = '';
template += '<img src="' + item.element.getAttribute('data-kt-select2-icon') + '" class="rounded-circle h-20px me-2" alt="image"/>';
template += item.text;
span.innerHTML = template;
return $(span);
}
// Init Select2 --- more info: https://select2.org/
$(element).select2({
placeholder: "Select coin",
minimumResultsForSearch: Infinity,
templateSelection: optionFormat,
templateResult: optionFormat
});
};
// Public methods
return {
init: function () {
initForm1();
initForm2();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTFormsWidget1;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsWidget1.init();
});
"use strict";
// Class definition
var KTTimelineWidget24 = function () {
// Private methods
var handleActions = function() {
var card = document.querySelector('#kt_list_widget_24');
if ( !card ) {
return;
}
// Checkbox Handler
KTUtil.on(card, '[data-kt-element="follow"]', 'click', function (e) {
if ( this.innerText === 'Following' ) {
this.innerText = 'Follow';
this.classList.add('btn-light-primary');
this.classList.remove('btn-primary');
this.blur();
} else {
this.innerText = 'Following';
this.classList.add('btn-primary');
this.classList.remove('btn-light-primary');
this.blur();
}
});
}
// Public methods
return {
init: function () {
handleActions();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTimelineWidget24;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTTimelineWidget24.init();
});
"use strict";
// Class definition
var KTMapsWidget1 = (function () {
// Private methods
var initMap = function () {
// Check if amchart library is included
if (typeof am5 === 'undefined') {
return;
}
var element = document.getElementById("kt_maps_widget_1_map");
if (!element) {
return;
}
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create the map chart
// https://www.amcharts.com/docs/v5/charts/map-chart/
var chart = root.container.children.push(
am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
projection: am5map.geoMercator(),
paddingLeft: 0,
paddingrIGHT: 0,
paddingBottom: 0
})
);
// Create main polygon series for countries
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
exclude: ["AQ"],
})
);
polygonSeries.mapPolygons.template.setAll({
tooltipText: "{name}",
toggleKey: "active",
interactive: true,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
});
polygonSeries.mapPolygons.template.states.create("hover", {
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
});
polygonSeries.mapPolygons.template.states.create("active", {
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
});
// Highlighted Series
// Create main polygon series for countries
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
var polygonSeriesHighlighted = chart.series.push(
am5map.MapPolygonSeries.new(root, {
//geoJSON: am5geodata_usaLow,
geoJSON: am5geodata_worldLow,
include: ['US', 'BR', 'DE', 'AU', 'JP']
})
);
polygonSeriesHighlighted.mapPolygons.template.setAll({
tooltipText: "{name}",
toggleKey: "active",
interactive: true,
});
var colors = am5.ColorSet.new(root, {});
polygonSeriesHighlighted.mapPolygons.template.set(
"fill",
am5.color(KTUtil.getCssVariableValue('--bs-primary')),
);
polygonSeriesHighlighted.mapPolygons.template.states.create("hover", {
fill: root.interfaceColors.get("primaryButtonHover"),
});
polygonSeriesHighlighted.mapPolygons.template.states.create("active", {
fill: root.interfaceColors.get("primaryButtonHover"),
});
// Add zoom control
// https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/#Zoom_control
//chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
// Set clicking on "water" to zoom out
chart.chartContainer
.get("background")
.events.on("click", function () {
chart.goHome();
});
// Make stuff animate on load
chart.appear(1000, 100);
}
// On amchart ready
am5.ready(function () {
init();
}); // end am5.ready()
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initMap();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTMapsWidget1;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTMapsWidget1.init();
});
"use strict";
// Class definition
var KTMapsWidget2 = (function () {
// Private methods
var initMap = function () {
// Check if amchart library is included
if (typeof am5 === 'undefined') {
return;
}
var element = document.getElementById("kt_maps_widget_2_map");
if (!element) {
return;
}
// Root
var root;
var init = function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
root = am5.Root.new(element);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create the map chart
// https://www.amcharts.com/docs/v5/charts/map-chart/
var chart = root.container.children.push(
am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
projection: am5map.geoMercator(),
paddingLeft: 0,
paddingrIGHT: 0,
paddingBottom: 0
})
);
// Create main polygon series for countries
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
exclude: ["AQ"],
})
);
polygonSeries.mapPolygons.template.setAll({
tooltipText: "{name}",
toggleKey: "active",
interactive: true,
fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
});
polygonSeries.mapPolygons.template.states.create("hover", {
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
});
polygonSeries.mapPolygons.template.states.create("active", {
fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
});
// Highlighted Series
// Create main polygon series for countries
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
var polygonSeriesHighlighted = chart.series.push(
am5map.MapPolygonSeries.new(root, {
//geoJSON: am5geodata_usaLow,
geoJSON: am5geodata_worldLow,
include: ['US', 'BR', 'DE', 'AU', 'JP']
})
);
polygonSeriesHighlighted.mapPolygons.template.setAll({
tooltipText: "{name}",
toggleKey: "active",
interactive: true,
});
var colors = am5.ColorSet.new(root, {});
polygonSeriesHighlighted.mapPolygons.template.set(
"fill",
am5.color(KTUtil.getCssVariableValue('--bs-primary')),
);
polygonSeriesHighlighted.mapPolygons.template.states.create("hover", {
fill: root.interfaceColors.get("primaryButtonHover"),
});
polygonSeriesHighlighted.mapPolygons.template.states.create("active", {
fill: root.interfaceColors.get("primaryButtonHover"),
});
// Add zoom control
// https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/#Zoom_control
//chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
// Set clicking on "water" to zoom out
chart.chartContainer
.get("background")
.events.on("click", function () {
chart.goHome();
});
// Make stuff animate on load
chart.appear(1000, 100);
}
// On amchart ready
am5.ready(function () {
init();
}); // end am5.ready()
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
// Destroy chart
root.dispose();
// Reinit chart
init();
});
};
// Public methods
return {
init: function () {
initMap();
},
};
})();
// Webpack support
if (typeof module !== "undefined") {
module.exports = KTMapsWidget2;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTMapsWidget2.init();
});
"use strict";
// Class definition
var KTPlayersWidget1 = function () {
// Private methods
var initPlayers = function() {
// https://www.w3schools.com/jsref/dom_obj_audio.asp
// Toggle Handler
KTUtil.on(document.body, '[data-kt-element="list-play-button"]', 'click', function (e) {
var currentButton = this;
var audio = document.querySelector('[data-kt-element="audio-track-1"]');
var playIcon = this.querySelector('[data-kt-element="list-play-icon"]');
var pauseIcon = this.querySelector('[data-kt-element="list-pause-icon"]');
if (pauseIcon.classList.contains('d-none')) {
audio.play();
playIcon.classList.add('d-none');
pauseIcon.classList.remove('d-none');
} else {
audio.pause();
playIcon.classList.remove('d-none');
pauseIcon.classList.add('d-none');
}
var buttons = [].slice.call(document.querySelectorAll('[data-kt-element="list-play-button"]'));
buttons.map(function (button) {
if (button !== currentButton) {
var playIcon = button.querySelector('[data-kt-element="list-play-icon"]');
var pauseIcon = button.querySelector('[data-kt-element="list-pause-icon"]');
playIcon.classList.remove('d-none');
pauseIcon.classList.add('d-none');
}
});
});
}
// Public methods
return {
init: function () {
initPlayers();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTPlayersWidget1;
}
// Window load
window.addEventListener("load", function() {
KTPlayersWidget1.init();
});
"use strict";
// Class definition
var KTPlayersWidget2 = function () {
// Private methods
var initPlayer = function() {
// https://www.w3schools.com/jsref/dom_obj_audio.asp
var element = document.getElementById("kt_player_widget_2");
if ( !element ) {
return;
}
var audio = element.querySelector('[data-kt-element="audio-track-1"]');
var progress = element.querySelector('[data-kt-element="progress"]');
var currentTime = element.querySelector('[data-kt-element="current-time"]');
var duration = element.querySelector('[data-kt-element="duration"]');
var playButton = element.querySelector('[data-kt-element="play-button"]');
var playIcon = element.querySelector('[data-kt-element="play-icon"]');
var pauseIcon = element.querySelector('[data-kt-element="pause-icon"]');
var replayButton = element.querySelector('[data-kt-element="replay-button"]');
var shuffleButton = element.querySelector('[data-kt-element="shuffle-button"]');
var playNextButton = element.querySelector('[data-kt-element="play-next-button"]');
var playPrevButton = element.querySelector('[data-kt-element="play-prev-button"]');
var formatTime = function(time) {
var s = parseInt(time % 60);
var m = parseInt((time / 60) % 60);
return m + ':' + (s < 10 ? '0' : '') + s;
}
// Duration
duration.innerHTML = formatTime(audio.duration);
// Update progress
var setBarProgress = function() {
progress.value = (audio.currentTime / audio.duration) * 100;
}
// Handle audio update
var handleAudioUpdate = function() {
currentTime.innerHTML = formatTime(audio.currentTime);
setBarProgress();
if (this.ended) {
playIcon.classList.remove('d-none');
pauseIcon.classList.add('d-none');
}
}
audio.addEventListener('timeupdate', handleAudioUpdate);
// Handle play
playButton.addEventListener('click', function() {
if (audio.duration > 0 && !audio.paused) {
audio.pause();
playIcon.classList.remove('d-none');
pauseIcon.classList.add('d-none');
} else if (audio.readyState >= 2) {
audio.play();
playIcon.classList.add('d-none');
pauseIcon.classList.remove('d-none');
}
});
// Handle replay
replayButton.addEventListener('click', function() {
if (audio.readyState >= 2) {
audio.currentTime = 0;
audio.play();
playIcon.classList.add('d-none');
pauseIcon.classList.remove('d-none');
}
});
// Handle prev play
playPrevButton.addEventListener('click', function() {
if (audio.readyState >= 2) {
audio.currentTime = 0;
audio.play();
playIcon.classList.add('d-none');
pauseIcon.classList.remove('d-none');
}
});
// Handle next play
playNextButton.addEventListener('click', function() {
if (audio.readyState >= 2) {
audio.currentTime = 0;
audio.play();
playIcon.classList.add('d-none');
pauseIcon.classList.remove('d-none');
}
});
// Shuffle replay
shuffleButton.addEventListener('click', function() {
if (audio.readyState >= 2) {
audio.currentTime = 0;
audio.play();
playIcon.classList.add('d-none');
pauseIcon.classList.remove('d-none');
}
});
// Handle track change
progress.addEventListener('change', function() {
audio.currentTime = progress.value;
playIcon.classList.add('d-none');
pauseIcon.classList.remove('d-none');
audio.play();
});
}
// Public methods
return {
init: function () {
initPlayer();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTPlayersWidget2;
}
// Window load
window.addEventListener("load", function() {
KTPlayersWidget2.init();
});
"use strict";
// Class definition
var KTSlidersWidget1 = function() {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, query, data) {
var element = document.querySelector(query);
if ( !element) {
return;
}
if ( chart.rendered === true && element.classList.contains("initialized") ) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var baseColor = KTUtil.getCssVariableValue('--bs-' + 'primary');
var lightColor = KTUtil.getCssVariableValue('--bs-' + 'primary-light' );
var options = {
series: [data],
chart: {
fontFamily: 'inherit',
height: height,
type: 'radialBar',
sparkline: {
enabled: true,
}
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "45%"
},
dataLabels: {
showOn: "always",
name: {
show: false
},
value: {
show: false
}
},
track: {
background: lightColor,
strokeWidth: '100%'
}
}
},
colors: [baseColor],
stroke: {
lineCap: "round",
},
labels: ["Progress"]
};
chart.self = new ApexCharts(element, options);
chart.self.render();
chart.rendered = true;
element.classList.add('initialized');
}
// Public methods
return {
init: function () {
// Init default chart
initChart(chart1, '#kt_slider_widget_1_chart_1', 76);
var carousel = document.querySelector('#kt_sliders_widget_1_slider');
if ( !carousel ) {
return;
}
// Init slide charts
carousel.addEventListener('slid.bs.carousel', function (e) {
if (e.to === 1) {
// Init second chart
initChart(chart2, '#kt_slider_widget_1_chart_2', 55);
}
if (e.to === 2) {
// Init third chart
initChart(chart3, '#kt_slider_widget_1_chart_3', 25);
}
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
chart1.rendered = false;
}
if (chart2.rendered) {
chart2.self.destroy();
chart2.rendered = false;
}
if (chart3.rendered) {
chart3.self.destroy();
chart3.rendered = false;
}
initChart(chart1, '#kt_slider_widget_1_chart_1', 76);
initChart(chart2, '#kt_slider_widget_1_chart_2', 55);
initChart(chart3, '#kt_slider_widget_1_chart_3', 25);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTSlidersWidget1;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTSlidersWidget1.init();
});
"use strict";
// Class definition
var KTSlidersWidget3 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, query, color, data) {
var element = document.querySelector(query);
if (!element) {
return;
}
if ( chart.rendered === true && element.classList.contains("initialized") ) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var options = {
series: [{
name: 'Lessons',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 11', 'Apr 12', 'Apr 14', 'Apr 15', 'Apr 16', 'Apr 17', 'Apr 18', ''],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
tickAmount: 6,
labels: {
rotate: 0,
rotateAlways: true,
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
tickAmount: 4,
max: 24,
min: 10,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
}
},
colors: [baseColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
chart.self.render();
chart.rendered = true;
element.classList.add('initialized');
}
// Public methods
return {
init: function () {
var data1 = [19, 21, 21, 20, 20, 18, 18, 20, 20, 22, 22, 21, 21, 22];
var data2 = [18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 18, 20, 20, 22];
// Init default chart
initChart(chart1, '#kt_sliders_widget_3_chart_1', 'danger', data1);
var carousel = document.querySelector('#kt_sliders_widget_3_slider');
if ( !carousel ){
return;
}
carousel.addEventListener('slid.bs.carousel', function (e) {
if (e.to === 1) {
// Init second chart
initChart(chart2, '#kt_sliders_widget_3_chart_2', 'primary', data2);
}
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
chart1.rendered = false;
}
if (chart2.rendered) {
chart2.self.destroy();
chart2.rendered = false;
}
initChart(chart1, '#kt_sliders_widget_3_chart_1', 'danger', data1);
initChart(chart2, '#kt_sliders_widget_3_chart_2', 'primary', data2);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTSlidersWidget3;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTSlidersWidget3.init();
});
"use strict";
// Class definition
var KTSlidersWidget7 = function() {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, query, data) {
var element = document.querySelector(query);
if ( !element) {
return;
}
if ( chart.rendered === true && element.classList.contains("initialized") ) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var baseColor = KTUtil.getCssVariableValue('--bs-' + 'danger');
var lightColor = KTUtil.getCssVariableValue('--bs-' + 'white' );
var options = {
series: [data],
chart: {
fontFamily: 'inherit',
height: height,
type: 'radialBar',
sparkline: {
enabled: true,
}
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "45%"
},
dataLabels: {
showOn: "always",
name: {
show: false
},
value: {
show: false
}
},
track: {
background: lightColor,
strokeWidth: '100%'
}
}
},
colors: [baseColor],
stroke: {
lineCap: "round",
},
labels: ["Progress"]
};
chart.self = new ApexCharts(element, options);
chart.self.render();
chart.rendered = true;
element.classList.add('initialized');
}
// Public methods
return {
init: function () {
// Init default chart
initChart(chart1, '#kt_slider_widget_7_chart_1', 76);
var carousel = document.querySelector('#kt_sliders_widget_7_slider');
if ( !carousel ) {
return;
}
// Init slide charts
carousel.addEventListener('slid.bs.carousel', function (e) {
if (e.to === 1) {
// Init second chart
initChart(chart2, '#kt_slider_widget_7_chart_2', 55);
}
if (e.to === 2) {
// Init third chart
initChart(chart3, '#kt_slider_widget_7_chart_3', 25);
}
});
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
chart1.rendered = false;
}
if (chart2.rendered) {
chart2.self.destroy();
chart2.rendered = false;
}
if (chart3.rendered) {
chart3.self.destroy();
chart3.rendered = false;
}
initChart(chart1, '#kt_slider_widget_7_chart_1', 76);
initChart(chart2, '#kt_slider_widget_7_chart_2', 55);
initChart(chart3, '#kt_slider_widget_7_chart_3', 25);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTSlidersWidget7;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTSlidersWidget7.init();
});
"use strict";
// Class definition
var KTTablesWidget14 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
var chart5 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, chartSelector, data, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var color = element.getAttribute('data-kt-chart-color');
var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var lightColor = KTUtil.getCssVariableValue('--bs-body-bg');
var options = {
series: [{
name: 'Net Profit',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
show: false,
position: 'front',
stroke: {
color: strokeColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: false
}
},
yaxis: {
min: 0,
max: 60,
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
enabled: false
},
colors: [lightColor],
markers: {
colors: [lightColor],
strokeColor: [baseColor],
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
}
// Public methods
return {
init: function () {
var chart1Data = [7, 10, 5, 21, 6, 11, 5, 23, 5, 11, 18, 7, 21,13];
initChart(chart1, '#kt_table_widget_14_chart_1', chart1Data, true);
var chart2Data = [17, 5, 23, 2, 21, 9, 17, 23, 4, 24, 9, 17, 21,7];
initChart(chart2, '#kt_table_widget_14_chart_2', chart2Data, true);
var chart3Data = [2, 24, 5, 17, 7, 2, 12, 24, 5, 24, 2, 8, 12,7];
initChart(chart3, '#kt_table_widget_14_chart_3', chart3Data, true);
var chart4Data = [24, 3, 5, 19, 3, 7, 25, 14, 5, 14, 2, 8, 5,17];
initChart(chart4, '#kt_table_widget_14_chart_4', chart4Data, true);
var chart5Data = [3, 23, 1, 19, 3, 17, 3, 9, 25, 4, 2, 18, 25,3];
initChart(chart5, '#kt_table_widget_14_chart_5', chart5Data, true);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
if (chart5.rendered) {
chart5.self.destroy();
}
initChart(chart1, '#kt_table_widget_14_chart_1', chart1Data, chart1.rendered);
initChart(chart2, '#kt_table_widget_14_chart_2', chart2Data, chart2.rendered);
initChart(chart3, '#kt_table_widget_14_chart_3', chart3Data, chart3.rendered);
initChart(chart4, '#kt_table_widget_14_chart_4', chart4Data, chart4.rendered);
initChart(chart5, '#kt_table_widget_14_chart_5', chart5Data, chart5.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTablesWidget14;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTTablesWidget14.init();
});
"use strict";
// Class definition
var KTTablesWidget15 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
var chart5 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, chartSelector, data, initByDefault) {
var element = document.querySelector(chartSelector);
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var color = element.getAttribute('data-kt-chart-color');
var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var lightColor = KTUtil.getCssVariableValue('--bs-body-bg');
var options = {
series: [{
name: 'Net Profit',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
show: false,
position: 'front',
stroke: {
color: strokeColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: false
}
},
yaxis: {
min: 0,
max: 60,
labels: {
show: false,
ontSize: '12px'
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
enabled: false
},
colors: [lightColor],
markers: {
colors: [lightColor],
strokeColor: [baseColor],
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
}
// Public methods
return {
init: function () {
var chart1Data = [7, 10, 5, 21, 6, 11, 5, 23, 5, 11, 18, 7, 21,13];
initChart(chart1, '#kt_table_widget_15_chart_1', chart1Data, true);
var chart2Data = [17, 5, 23, 2, 21, 9, 17, 23, 4, 24, 9, 17, 21,7];
initChart(chart2, '#kt_table_widget_15_chart_2', chart2Data, true);
var chart3Data = [2, 24, 5, 17, 7, 2, 12, 24, 5, 24, 2, 8, 12,7];
initChart(chart3, '#kt_table_widget_15_chart_3', chart3Data, true);
var chart4Data = [24, 3, 5, 19, 3, 7, 25, 14, 5, 14, 2, 8, 5,17];
initChart(chart4, '#kt_table_widget_15_chart_4', chart4Data, true);
var chart5Data = [3, 23, 1, 19, 3, 17, 3, 9, 25, 4, 2, 18, 25,3];
initChart(chart5, '#kt_table_widget_15_chart_5', chart5Data, true);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
if (chart5.rendered) {
chart5.self.destroy();
}
initChart(chart1, '#kt_table_widget_15_chart_1', chart1Data, chart1.rendered);
initChart(chart2, '#kt_table_widget_15_chart_2', chart2Data, chart2.rendered);
initChart(chart3, '#kt_table_widget_15_chart_3', chart3Data, chart3.rendered);
initChart(chart4, '#kt_table_widget_15_chart_4', chart4Data, chart4.rendered);
initChart(chart5, '#kt_table_widget_15_chart_5', chart5Data, chart5.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTablesWidget15;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTTablesWidget15.init();
});
"use strict";
// Class definition
var KTTablesWidget16 = function () {
var chart1 = {
self: null,
rendered: false
};
var chart2 = {
self: null,
rendered: false
};
var chart3 = {
self: null,
rendered: false
};
var chart4 = {
self: null,
rendered: false
};
var chart5 = {
self: null,
rendered: false
};
var chart6 = {
self: null,
rendered: false
};
var chart7 = {
self: null,
rendered: false
};
var chart8 = {
self: null,
rendered: false
};
var chart9 = {
self: null,
rendered: false
};
var chart10 = {
self: null,
rendered: false
};
var chart11 = {
self: null,
rendered: false
};
var chart12 = {
self: null,
rendered: false
};
var chart13 = {
self: null,
rendered: false
};
var chart14 = {
self: null,
rendered: false
};
var chart15 = {
self: null,
rendered: false
};
var chart16 = {
self: null,
rendered: false
};
var chart17 = {
self: null,
rendered: false
};
var chart18 = {
self: null,
rendered: false
};
var chart19 = {
self: null,
rendered: false
};
var chart20 = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart, toggle, selector, data, initByDefault) {
var element = document.querySelector(selector);
if ( !element ) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var color = element.getAttribute('data-kt-chart-color');
var labelColor = KTUtil.getCssVariableValue('--bs-gray-800');
var strokeColor = KTUtil.getCssVariableValue('--bs-gray-300');
var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
var lightColor = KTUtil.getCssVariableValue('--bs-body-bg');
var options = {
series: [{
name: 'Net Profit',
data: data
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
show: false,
position: 'front',
stroke: {
color: strokeColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: false
}
},
yaxis: {
min: 0,
max: 60,
labels: {
show: false,
ontSize: '12px'
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
enabled: false
},
colors: [lightColor],
markers: {
colors: [lightColor],
strokeColor: [baseColor],
strokeWidth: 3
}
};
chart.self = new ApexCharts(element, options);
var tab = document.querySelector(toggle);
if (initByDefault === true) {
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
tab.addEventListener('shown.bs.tab', function (event) {
if (chart.rendered === false) {
chart.self.render();
chart.rendered = true;
}
});
}
// Public methods
return {
init: function () {
var chart1Data = [16, 10, 15, 21, 6, 11, 5, 23, 5, 11, 18, 7, 21, 13];
initChart(chart1, '#kt_stats_widget_16_tab_link_1', '#kt_table_widget_16_chart_1_1', chart1Data, true);
var chart2Data = [8, 5, 16, 3, 23, 16, 11, 15, 3, 11, 15, 7, 17, 9];
initChart(chart2, '#kt_stats_widget_16_tab_link_1', '#kt_table_widget_16_chart_1_2', chart2Data, true);
var chart3Data = [8, 6, 16, 3, 23, 16, 11, 14, 3, 11, 15, 8, 17, 9];
initChart(chart3, '#kt_stats_widget_16_tab_link_1', '#kt_table_widget_16_chart_1_3', chart3Data, true);
var chart4Data = [12, 5, 23, 12, 21, 9, 17, 20, 4, 24, 9, 13, 18, 9];
initChart(chart4, '#kt_stats_widget_16_tab_link_1', '#kt_table_widget_16_chart_1_4', chart4Data, true);
var chart5Data = [13, 10, 15, 21, 6, 11, 5, 21, 5, 12, 18, 7, 21, 13];
initChart(chart5, '#kt_stats_widget_16_tab_link_2', '#kt_table_widget_16_chart_2_1', chart5Data, false);
var chart6Data = [13, 5, 21, 12, 21, 9, 17, 20, 4, 23, 9, 17, 21, 7];
initChart(chart6, '#kt_stats_widget_16_tab_link_2', '#kt_table_widget_16_chart_2_2', chart6Data, false);
var chart7Data = [8, 10, 14, 21, 6, 31, 5, 21, 5, 11, 15, 7, 23, 13];
initChart(chart7, '#kt_stats_widget_16_tab_link_2', '#kt_table_widget_16_chart_2_3', chart7Data, false);
var chart8Data = [6, 10, 12, 21, 6, 11, 7, 23, 5, 12, 18, 7, 21, 15];
initChart(chart8, '#kt_stats_widget_16_tab_link_2', '#kt_table_widget_16_chart_2_4', chart8Data, false);
var chart9Data = [7, 10, 5, 21, 6, 11, 5, 23, 5, 11, 18, 7, 21,13];
initChart(chart9, '#kt_stats_widget_16_tab_link_3', '#kt_table_widget_16_chart_3_1', chart9Data, false);
var chart10Data = [8, 5, 16, 2, 19, 9, 17, 21, 4, 24, 4, 13, 21,5];
initChart(chart10, '#kt_stats_widget_16_tab_link_3', '#kt_table_widget_16_chart_3_2', chart10Data, false);
var chart11Data = [15, 10, 12, 21, 6, 11, 23, 11, 5, 12, 18, 7, 21, 15];
initChart(chart11, '#kt_stats_widget_16_tab_link_3', '#kt_table_widget_16_chart_3_3', chart11Data, false);
var chart12Data = [3, 9, 12, 23, 6, 11, 7, 23, 5, 12, 14, 7, 21, 8];
initChart(chart12, '#kt_stats_widget_16_tab_link_3', '#kt_table_widget_16_chart_3_4', chart12Data, false);
var chart13Data = [9, 14, 15, 21, 8, 11, 5, 23, 5, 11, 18, 5, 23, 8];
initChart(chart13, '#kt_stats_widget_16_tab_link_4', '#kt_table_widget_16_chart_4_1', chart13Data, false);
var chart14Data = [7, 5, 23, 12, 21, 9, 17, 15, 4, 24, 9, 17, 21, 7];
initChart(chart14, '#kt_stats_widget_16_tab_link_4', '#kt_table_widget_16_chart_4_2', chart14Data, false);
var chart15Data = [8, 10, 14, 21, 6, 31, 8, 23, 5, 3, 14, 7, 21, 12];
initChart(chart15, '#kt_stats_widget_16_tab_link_4', '#kt_table_widget_16_chart_4_3', chart15Data, false);
var chart16Data = [6, 12, 12, 19, 6, 11, 7, 23, 5, 12, 18, 7, 21, 15];
initChart(chart16, '#kt_stats_widget_16_tab_link_4', '#kt_table_widget_16_chart_4_4', chart16Data, false);
var chart17Data = [5, 10, 15, 21, 6, 11, 5, 23, 5, 11, 17, 7, 21, 13];
initChart(chart17, '#kt_stats_widget_16_tab_link_5', '#kt_table_widget_16_chart_5_1', chart17Data, false);
var chart18Data = [4, 5, 23, 12, 21, 9, 17, 15, 4, 24, 9, 17, 21, 7];
initChart(chart18, '#kt_stats_widget_16_tab_link_5', '#kt_table_widget_16_chart_5_2', chart18Data, false);
var chart19Data = [7, 10, 14, 21, 6, 31, 5, 23, 5, 11, 15, 7, 21, 17];
initChart(chart19, '#kt_stats_widget_16_tab_link_5', '#kt_table_widget_16_chart_5_3', chart19Data, false);
var chart20Data = [3, 10, 12, 23, 6, 11, 7, 22, 5, 12, 18, 7, 21, 14];
initChart(chart20, '#kt_stats_widget_16_tab_link_5', '#kt_table_widget_16_chart_5_4', chart20Data, false);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart1.rendered) {
chart1.self.destroy();
}
if (chart2.rendered) {
chart2.self.destroy();
}
if (chart3.rendered) {
chart3.self.destroy();
}
if (chart4.rendered) {
chart4.self.destroy();
}
if (chart5.rendered) {
chart5.self.destroy();
}
if (chart6.rendered) {
chart6.self.destroy();
}
if (chart7.rendered) {
chart7.self.destroy();
}
if (chart8.rendered) {
chart8.self.destroy();
}
if (chart9.rendered) {
chart9.self.destroy();
}
if (chart10.rendered) {
chart10.self.destroy();
}
if (chart11.rendered) {
chart11.self.destroy();
}
if (chart12.rendered) {
chart12.self.destroy();
}
if (chart13.rendered) {
chart13.self.destroy();
}
if (chart14.rendered) {
chart14.self.destroy();
}
if (chart15.rendered) {
chart15.self.destroy();
}
if (chart16.rendered) {
chart16.self.destroy();
}
if (chart17.rendered) {
chart17.self.destroy();
}
if (chart18.rendered) {
chart18.self.destroy();
}
if (chart19.rendered) {
chart19.self.destroy();
}
if (chart20.rendered) {
chart20.self.destroy();
}
initChart(chart1, '#kt_stats_widget_16_tab_link_1', '#kt_table_widget_16_chart_1_1', chart1Data, chart1.rendered);
initChart(chart2, '#kt_stats_widget_16_tab_link_1', '#kt_table_widget_16_chart_1_2', chart2Data, chart2.rendered);
initChart(chart3, '#kt_stats_widget_16_tab_link_1', '#kt_table_widget_16_chart_1_3', chart3Data, chart3.rendered);
initChart(chart4, '#kt_stats_widget_16_tab_link_1', '#kt_table_widget_16_chart_1_4', chart4Data, chart4.rendered);
initChart(chart5, '#kt_stats_widget_16_tab_link_2', '#kt_table_widget_16_chart_2_1', chart5Data, chart5.rendered);
initChart(chart6, '#kt_stats_widget_16_tab_link_2', '#kt_table_widget_16_chart_2_2', chart6Data, chart6.rendered);
initChart(chart7, '#kt_stats_widget_16_tab_link_2', '#kt_table_widget_16_chart_2_3', chart7Data, chart7.rendered);
initChart(chart8, '#kt_stats_widget_16_tab_link_2', '#kt_table_widget_16_chart_2_4', chart8Data, chart8.rendered);
initChart(chart9, '#kt_stats_widget_16_tab_link_3', '#kt_table_widget_16_chart_3_1', chart9Data, chart9.rendered);
initChart(chart10, '#kt_stats_widget_16_tab_link_3', '#kt_table_widget_16_chart_3_2', chart10Data, chart10.rendered);
initChart(chart11, '#kt_stats_widget_16_tab_link_3', '#kt_table_widget_16_chart_3_3', chart11Data, chart11.rendered);
initChart(chart12, '#kt_stats_widget_16_tab_link_3', '#kt_table_widget_16_chart_3_4', chart12Data, chart12.rendered);
initChart(chart13, '#kt_stats_widget_16_tab_link_4', '#kt_table_widget_16_chart_4_1', chart13Data, chart13.rendered);
initChart(chart14, '#kt_stats_widget_16_tab_link_4', '#kt_table_widget_16_chart_4_2', chart14Data, chart14.rendered);
initChart(chart15, '#kt_stats_widget_16_tab_link_4', '#kt_table_widget_16_chart_4_3', chart15Data, chart15.rendered);
initChart(chart16, '#kt_stats_widget_16_tab_link_4', '#kt_table_widget_16_chart_4_4', chart16Data, chart16.rendered);
initChart(chart17, '#kt_stats_widget_16_tab_link_5', '#kt_table_widget_16_chart_5_1', chart17Data, chart17.rendered);
initChart(chart18, '#kt_stats_widget_16_tab_link_5', '#kt_table_widget_16_chart_5_2', chart18Data, chart18.rendered);
initChart(chart19, '#kt_stats_widget_16_tab_link_5', '#kt_table_widget_16_chart_5_3', chart19Data, chart19.rendered);
initChart(chart20, '#kt_stats_widget_16_tab_link_5', '#kt_table_widget_16_chart_5_4', chart20Data, chart20.rendered);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTablesWidget16;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTTablesWidget16.init();
});
"use strict";
// Class definition
var KTTablesWidget3 = function () {
var table;
var datatable;
// Private methods
const initDatatable = () => {
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'paging': false,
'pageLength': false,
});
}
const handleTabStates = () => {
const tabs = document.querySelector('[data-kt-table-widget-3="tabs_nav"]');
const tabButtons = tabs.querySelectorAll('[data-kt-table-widget-3="tab"]');
const tabClasses = ['border-bottom', 'border-3', 'border-primary'];
tabButtons.forEach(tab => {
tab.addEventListener('click', e => {
// Get datatable filter value
const value = tab.getAttribute('data-kt-table-widget-3-value');
tabButtons.forEach(t => {
t.classList.remove(...tabClasses);
t.classList.add('text-muted');
});
tab.classList.remove('text-muted');
tab.classList.add(...tabClasses);
// Filter datatable
if (value === 'Show All') {
datatable.search('').draw();
} else {
datatable.search(value).draw();
}
});
});
}
// Handle status filter dropdown
const handleStatusFilter = () => {
const select = document.querySelector('[data-kt-table-widget-3="filter_status"]');
$(select).on('select2:select', function (e) {
const value = $(this).val();
if (value === 'Show All') {
datatable.search('').draw();
} else {
datatable.search(value).draw();
}
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_widget_table_3');
if (!table) {
return;
}
initDatatable();
handleTabStates();
handleStatusFilter();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTablesWidget3;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTTablesWidget3.init();
});
"use strict";
// Class definition
var KTTablesWidget4 = function () {
var table;
var datatable;
var template;
// Private methods
const initDatatable = () => {
// Get subtable template
const subtable = document.querySelector('[data-kt-table-widget-4="subtable_template"]');
template = subtable.cloneNode(true);
template.classList.remove('d-none');
// Remove subtable template
subtable.parentNode.removeChild(subtable);
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
"lengthChange": false,
'pageLength': 6,
'ordering': false,
'paging': false,
'columnDefs': [
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
{ orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)
]
});
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
datatable.on('draw', function () {
resetSubtable();
handleActionButton();
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-table-widget-4="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Handle status filter
const handleStatusFilter = () => {
const select = document.querySelector('[data-kt-table-widget-4="filter_status"]');
$(select).on('select2:select', function (e) {
const value = $(this).val();
if (value === 'Show All') {
datatable.search('').draw();
} else {
datatable.search(value).draw();
}
});
}
// Subtable data sample
const data = [
{
image: '76',
name: 'Go Pro 8',
description: 'Latest version of Go Pro.',
cost: '500.00',
qty: '1',
total: '500.00',
stock: '12'
},
{
image: '60',
name: 'Bose Earbuds',
description: 'Top quality earbuds from Bose.',
cost: '300.00',
qty: '1',
total: '300.00',
stock: '8'
},
{
image: '211',
name: 'Dry-fit Sports T-shirt',
description: 'Comfortable sportswear.',
cost: '89.00',
qty: '1',
total: '89.00',
stock: '18'
},
{
image: '21',
name: 'Apple Airpod 3',
description: 'Apple\'s latest earbuds.',
cost: '200.00',
qty: '2',
total: '400.00',
stock: '32'
},
{
image: '83',
name: 'Nike Pumps',
description: 'Apple\'s latest headphones.',
cost: '200.00',
qty: '1',
total: '200.00',
stock: '8'
}
];
// Handle action button
const handleActionButton = () => {
const buttons = document.querySelectorAll('[data-kt-table-widget-4="expand_row"]');
// Sample row items counter --- for demo purpose only, remove this variable in your project
const rowItems = [3, 1, 3, 1, 2, 1];
buttons.forEach((button, index) => {
button.addEventListener('click', e => {
e.stopImmediatePropagation();
e.preventDefault();
const row = button.closest('tr');
const rowClasses = ['isOpen', 'border-bottom-0'];
// Get total number of items to generate --- for demo purpose only, remove this code snippet in your project
const demoData = [];
for (var j = 0; j < rowItems[index]; j++) {
demoData.push(data[j]);
}
// End of generating demo data
// Handle subtable expanded state
if (row.classList.contains('isOpen')) {
// Remove all subtables from current order row
while (row.nextSibling && row.nextSibling.getAttribute('data-kt-table-widget-4') === 'subtable_template') {
row.nextSibling.parentNode.removeChild(row.nextSibling);
}
row.classList.remove(...rowClasses);
button.classList.remove('active');
} else {
populateTemplate(demoData, row);
row.classList.add(...rowClasses);
button.classList.add('active');
}
});
});
}
// Populate template with content/data -- content/data can be replaced with relevant data from database or API
const populateTemplate = (data, target) => {
data.forEach((d, index) => {
// Clone template node
const newTemplate = template.cloneNode(true);
// Stock badges
const lowStock = `<div class="badge badge-light-warning">Low Stock</div>`;
const inStock = `<div class="badge badge-light-success">In Stock</div>`;
// Select data elements
const image = newTemplate.querySelector('[data-kt-table-widget-4="template_image"]');
const name = newTemplate.querySelector('[data-kt-table-widget-4="template_name"]');
const description = newTemplate.querySelector('[data-kt-table-widget-4="template_description"]');
const cost = newTemplate.querySelector('[data-kt-table-widget-4="template_cost"]');
const qty = newTemplate.querySelector('[data-kt-table-widget-4="template_qty"]');
const total = newTemplate.querySelector('[data-kt-table-widget-4="template_total"]');
const stock = newTemplate.querySelector('[data-kt-table-widget-4="template_stock"]');
// Populate elements with data
const imageSrc = image.getAttribute('data-kt-src-path');
image.setAttribute('src', imageSrc + d.image + '.gif');
name.innerText = d.name;
description.innerText = d.description;
cost.innerText = d.cost;
qty.innerText = d.qty;
total.innerText = d.total;
if (d.stock > 10) {
stock.innerHTML = inStock;
} else {
stock.innerHTML = lowStock;
}
// New template border controller
// When only 1 row is available
if (data.length === 1) {
//let borderClasses = ['rounded', 'rounded-end-0'];
//newTemplate.querySelectorAll('td')[0].classList.add(...borderClasses);
//borderClasses = ['rounded', 'rounded-start-0'];
//newTemplate.querySelectorAll('td')[4].classList.add(...borderClasses);
// Remove bottom border
//newTemplate.classList.add('border-bottom-0');
} else {
// When multiple rows detected
if (index === (data.length - 1)) { // first row
//let borderClasses = ['rounded-start', 'rounded-bottom-0'];
// newTemplate.querySelectorAll('td')[0].classList.add(...borderClasses);
//borderClasses = ['rounded-end', 'rounded-bottom-0'];
//newTemplate.querySelectorAll('td')[4].classList.add(...borderClasses);
}
if (index === 0) { // last row
//let borderClasses = ['rounded-start', 'rounded-top-0'];
//newTemplate.querySelectorAll('td')[0].classList.add(...borderClasses);
//borderClasses = ['rounded-end', 'rounded-top-0'];
//newTemplate.querySelectorAll('td')[4].classList.add(...borderClasses);
// Remove bottom border on last row
//newTemplate.classList.add('border-bottom-0');
}
}
// Insert new template into table
const tbody = table.querySelector('tbody');
tbody.insertBefore(newTemplate, target.nextSibling);
});
}
// Reset subtable
const resetSubtable = () => {
const subtables = document.querySelectorAll('[data-kt-table-widget-4="subtable_template"]');
subtables.forEach(st => {
st.parentNode.removeChild(st);
});
const rows = table.querySelectorAll('tbody tr');
rows.forEach(r => {
r.classList.remove('isOpen');
if (r.querySelector('[data-kt-table-widget-4="expand_row"]')) {
r.querySelector('[data-kt-table-widget-4="expand_row"]').classList.remove('active');
}
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_table_widget_4_table');
if (!table) {
return;
}
initDatatable();
handleSearchDatatable();
handleStatusFilter();
handleActionButton();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTablesWidget4;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTTablesWidget4.init();
});
"use strict";
// Class definition
var KTTablesWidget5 = function () {
var table;
var datatable;
// Private methods
const initDatatable = () => {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[2].innerHTML, "MMM DD, YYYY").format(); // select date from 3rd column in table
dateRow[2].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
"lengthChange": false,
'pageLength': 6,
'paging': false,
'columnDefs': [
{ orderable: false, targets: 1 }, // Disable ordering on column 1 (product id)
]
});
}
// Handle status filter
const handleStatusFilter = () => {
const select = document.querySelector('[data-kt-table-widget-5="filter_status"]');
$(select).on('select2:select', function (e) {
const value = $(this).val();
if (value === 'Show All') {
datatable.search('').draw();
} else {
datatable.search(value).draw();
}
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_table_widget_5_table');
if (!table) {
return;
}
initDatatable();
handleStatusFilter();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTablesWidget5;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTTablesWidget5.init();
});
"use strict";
// Class definition
var KTTimelineWidget1 = function () {
// Private methods
// Day timeline
const initTimelineDay = () => {
// Detect element
const element = document.querySelector('#kt_timeline_widget_1_1');
if (!element) {
return;
}
if(element.innerHTML){
return;
}
// Set variables
var now = Date.now();
var rootImagePath = element.getAttribute('data-kt-timeline-widget-1-image-root');
// Build vis-timeline datasets
var groups = new vis.DataSet([
{
id: "research",
content: "Research",
order: 1
},
{
id: "qa",
content: "Phase 2.6 QA",
order: 2
},
{
id: "ui",
content: "UI Design",
order: 3
},
{
id: "dev",
content: "Development",
order: 4
}
]);
var items = new vis.DataSet([
{
id: 1,
group: 'research',
start: now,
end: moment(now).add(1.5, 'hours'),
content: 'Meeting',
progress: "60%",
color: 'primary',
users: [
'avatars/300-6.jpg',
'avatars/300-1.jpg'
]
},
{
id: 2,
group: 'qa',
start: moment(now).add(1, 'hours'),
end: moment(now).add(2, 'hours'),
content: 'Testing',
progress: "47%",
color: 'success',
users: [
'avatars/300-2.jpg'
]
},
{
id: 3,
group: 'ui',
start: moment(now).add(30, 'minutes'),
end: moment(now).add(2.5, 'hours'),
content: 'Landing page',
progress: "55%",
color: 'danger',
users: [
'avatars/300-5.jpg',
'avatars/300-20.jpg'
]
},
{
id: 4,
group: 'dev',
start: moment(now).add(1.5, 'hours'),
end: moment(now).add(3, 'hours'),
content: 'Products module',
progress: "75%",
color: 'info',
users: [
'avatars/300-23.jpg',
'avatars/300-12.jpg',
'avatars/300-9.jpg'
]
},
]);
// Set vis-timeline options
var options = {
zoomable: false,
moveable: false,
selectable: false,
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
margin: {
item: {
horizontal: 10,
vertical: 35
}
},
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
showCurrentTime: false,
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
xss: {
disabled: false,
filterOptions: {
whiteList: {
div: ['class', 'style'],
img: ['data-kt-timeline-avatar-src', 'alt'],
a: ['href', 'class']
},
},
},
// specify a template for the items
template: function (item) {
// Build users group
const users = item.users;
let userTemplate = '';
users.forEach(user => {
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${rootImagePath + user}" alt="" /></div>`;
});
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
<div class="d-flex align-items-center position-relative z-index-2">
<div class="symbol-group symbol-hover flex-nowrap me-3">
${userTemplate}
</div>
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
</div>
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
${item.progress}
</div>
</div>
`;
},
// Remove block ui on initial draw
onInitialDrawComplete: function () {
handleAvatarPath();
const target = element.closest('[data-kt-timeline-widget-1-blockui="true"]');
const blockUI = KTBlockUI.getInstance(target);
if (blockUI.isBlocked()) {
setTimeout(() => {
blockUI.release();
}, 1000);
}
}
};
// Init vis-timeline
const timeline = new vis.Timeline(element, items, groups, options);
// Prevent infinite loop draws
timeline.on("currentTimeTick", () => {
// After fired the first time we un-subscribed
timeline.off("currentTimeTick");
});
}
// Week timeline
const initTimelineWeek = () => {
// Detect element
const element = document.querySelector('#kt_timeline_widget_1_2');
if (!element) {
return;
}
if(element.innerHTML){
return;
}
// Set variables
var now = Date.now();
var rootImagePath = element.getAttribute('data-kt-timeline-widget-1-image-root');
// Build vis-timeline datasets
var groups = new vis.DataSet([
{
id: 1,
content: "Research",
order: 1
},
{
id: 2,
content: "Phase 2.6 QA",
order: 2
},
{
id: 3,
content: "UI Design",
order: 3
},
{
id: 4,
content: "Development",
order: 4
}
]);
var items = new vis.DataSet([
{
id: 1,
group: 1,
start: now,
end: moment(now).add(7, 'days'),
content: 'Framework',
progress: "71%",
color: 'primary',
users: [
'avatars/300-6.jpg',
'avatars/300-1.jpg'
]
},
{
id: 2,
group: 2,
start: moment(now).add(7, 'days'),
end: moment(now).add(14, 'days'),
content: 'Accessibility',
progress: "84%",
color: 'success',
users: [
'avatars/300-2.jpg'
]
},
{
id: 3,
group: 3,
start: moment(now).add(3, 'days'),
end: moment(now).add(20, 'days'),
content: 'Microsites',
progress: "69%",
color: 'danger',
users: [
'avatars/300-5.jpg',
'avatars/300-20.jpg'
]
},
{
id: 4,
group: 4,
start: moment(now).add(10, 'days'),
end: moment(now).add(21, 'days'),
content: 'Deployment',
progress: "74%",
color: 'info',
users: [
'avatars/300-23.jpg',
'avatars/300-12.jpg',
'avatars/300-9.jpg'
]
},
]);
// Set vis-timeline options
var options = {
zoomable: false,
moveable: false,
selectable: false,
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
margin: {
item: {
horizontal: 10,
vertical: 35
}
},
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
showCurrentTime: false,
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
xss: {
disabled: false,
filterOptions: {
whiteList: {
div: ['class', 'style'],
img: ['data-kt-timeline-avatar-src', 'alt'],
a: ['href', 'class']
},
},
},
// specify a template for the items
template: function (item) {
// Build users group
const users = item.users;
let userTemplate = '';
users.forEach(user => {
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${rootImagePath + user}" alt="" /></div>`;
});
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
<div class="d-flex align-items-center position-relative z-index-2">
<div class="symbol-group symbol-hover flex-nowrap me-3">
${userTemplate}
</div>
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
</div>
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
${item.progress}
</div>
</div>
`;
},
// Remove block ui on initial draw
onInitialDrawComplete: function () {
handleAvatarPath();
const target = element.closest('[data-kt-timeline-widget-1-blockui="true"]');
const blockUI = KTBlockUI.getInstance(target);
if (blockUI.isBlocked()) {
setTimeout(() => {
blockUI.release();
}, 1000);
}
}
};
// Init vis-timeline
const timeline = new vis.Timeline(element, items, groups, options);
// Prevent infinite loop draws
timeline.on("currentTimeTick", () => {
// After fired the first time we un-subscribed
timeline.off("currentTimeTick");
});
}
// Month timeline
const initTimelineMonth = () => {
// Detect element
const element = document.querySelector('#kt_timeline_widget_1_3');
if (!element) {
return;
}
if(element.innerHTML){
return;
}
// Set variables
var now = Date.now();
var rootImagePath = element.getAttribute('data-kt-timeline-widget-1-image-root');
// Build vis-timeline datasets
var groups = new vis.DataSet([
{
id: "research",
content: "Research",
order: 1
},
{
id: "qa",
content: "Phase 2.6 QA",
order: 2
},
{
id: "ui",
content: "UI Design",
order: 3
},
{
id: "dev",
content: "Development",
order: 4
}
]);
var items = new vis.DataSet([
{
id: 1,
group: 'research',
start: now,
end: moment(now).add(2, 'months'),
content: 'Tags',
progress: "79%",
color: 'primary',
users: [
'avatars/300-6.jpg',
'avatars/300-1.jpg'
]
},
{
id: 2,
group: 'qa',
start: moment(now).add(0.5, 'months'),
end: moment(now).add(5, 'months'),
content: 'Testing',
progress: "64%",
color: 'success',
users: [
'avatars/300-2.jpg'
]
},
{
id: 3,
group: 'ui',
start: moment(now).add(2, 'months'),
end: moment(now).add(6.5, 'months'),
content: 'Media',
progress: "82%",
color: 'danger',
users: [
'avatars/300-5.jpg',
'avatars/300-20.jpg'
]
},
{
id: 4,
group: 'dev',
start: moment(now).add(4, 'months'),
end: moment(now).add(7, 'months'),
content: 'Plugins',
progress: "58%",
color: 'info',
users: [
'avatars/300-23.jpg',
'avatars/300-12.jpg',
'avatars/300-9.jpg'
]
},
]);
// Set vis-timeline options
var options = {
zoomable: false,
moveable: false,
selectable: false,
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
margin: {
item: {
horizontal: 10,
vertical: 35
}
},
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
showCurrentTime: false,
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
xss: {
disabled: false,
filterOptions: {
whiteList: {
div: ['class', 'style'],
img: ['data-kt-timeline-avatar-src', 'alt'],
a: ['href', 'class']
},
},
},
// specify a template for the items
template: function (item) {
// Build users group
const users = item.users;
let userTemplate = '';
users.forEach(user => {
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${rootImagePath + user}" alt="" /></div>`;
});
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
<div class="d-flex align-items-center position-relative z-index-2">
<div class="symbol-group symbol-hover flex-nowrap me-3">
${userTemplate}
</div>
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
</div>
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
${item.progress}
</div>
</div>
`;
},
// Remove block ui on initial draw
onInitialDrawComplete: function () {
handleAvatarPath();
const target = element.closest('[data-kt-timeline-widget-1-blockui="true"]');
const blockUI = KTBlockUI.getInstance(target);
if (blockUI.isBlocked()) {
setTimeout(() => {
blockUI.release();
}, 1000);
}
}
};
// Init vis-timeline
const timeline = new vis.Timeline(element, items, groups, options);
// Prevent infinite loop draws
timeline.on("currentTimeTick", () => {
// After fired the first time we un-subscribed
timeline.off("currentTimeTick");
});
}
// Handle BlockUI
const handleBlockUI = () => {
// Select block ui elements
const elements = document.querySelectorAll('[data-kt-timeline-widget-1-blockui="true"]');
// Init block ui
elements.forEach(element => {
const blockUI = new KTBlockUI(element, {
overlayClass: "bg-body",
});
blockUI.block();
});
}
// Handle tabs visibility
const tabsVisibility = () => {
const tabs = document.querySelectorAll('[data-kt-timeline-widget-1="tab"]');
tabs.forEach(tab => {
tab.addEventListener('shown.bs.tab', e => {
// Week tab
if(tab.getAttribute('href') === '#kt_timeline_widget_1_tab_week'){
initTimelineWeek();
}
// Month tab
if(tab.getAttribute('href') === '#kt_timeline_widget_1_tab_month'){
initTimelineMonth();
}
});
});
}
// Handle avatar path conflict
const handleAvatarPath = () => {
const avatars = document.querySelectorAll('[data-kt-timeline-avatar-src]');
if(!avatars){
return;
}
avatars.forEach(avatar => {
avatar.setAttribute('src', avatar.getAttribute('data-kt-timeline-avatar-src'));
avatar.removeAttribute('data-kt-timeline-avatar-src');
});
}
// Public methods
return {
init: function () {
initTimelineDay();
handleBlockUI();
tabsVisibility();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTimelineWidget1;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTTimelineWidget1.init();
});
"use strict";
// Class definition
var KTTimelineWidget2 = function () {
// Private methods
var handleCheckbox = function() {
var card = document.querySelector('#kt_timeline_widget_2_card');
if (!card) {
return;
}
// Checkbox Handler
KTUtil.on(card, '[data-kt-element="checkbox"]', 'change', function (e) {
var check = this.closest('.form-check');
var tr = this.closest('tr');
var bullet = tr.querySelector('[data-kt-element="bullet"]');
var status = tr.querySelector('[data-kt-element="status"]');
if ( this.checked === true ) {
check.classList.add('form-check-success');
bullet.classList.remove('bg-primary');
bullet.classList.add('bg-success');
status.innerText = 'Done';
status.classList.remove('badge-light-primary');
status.classList.add('badge-light-success');
} else {
check.classList.remove('form-check-success');
bullet.classList.remove('bg-success');
bullet.classList.add('bg-primary');
status.innerText = 'In Process';
status.classList.remove('badge-light-success');
status.classList.add('badge-light-primary');
}
});
}
// Public methods
return {
init: function () {
handleCheckbox();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTimelineWidget2;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTTimelineWidget2.init();
});
"use strict";
// Class definition
var KTTimelineWidget4 = function () {
// Private methods
// Day timeline
const initTimelineDay = () => {
// Detect element
const element = document.querySelector('#kt_timeline_widget_4_1');
if (!element) {
return;
}
if(element.innerHTML){
return;
}
// Set variables
var now = Date.now();
var rootImagePath = element.getAttribute('data-kt-timeline-widget-4-image-root');
// Build vis-timeline datasets
var groups = new vis.DataSet([
{
id: "research",
content: "Research",
order: 1
},
{
id: "qa",
content: "Phase 2.6 QA",
order: 2
},
{
id: "ui",
content: "UI Design",
order: 3
},
{
id: "dev",
content: "Development",
order: 4
}
]);
var items = new vis.DataSet([
{
id: 1,
group: 'research',
start: now,
end: moment(now).add(1.5, 'hours'),
content: 'Meeting',
progress: "60%",
color: 'primary',
users: [
'avatars/300-6.jpg',
'avatars/300-1.jpg'
]
},
{
id: 2,
group: 'qa',
start: moment(now).add(1, 'hours'),
end: moment(now).add(2, 'hours'),
content: 'Testing',
progress: "47%",
color: 'success',
users: [
'avatars/300-2.jpg'
]
},
{
id: 3,
group: 'ui',
start: moment(now).add(30, 'minutes'),
end: moment(now).add(2.5, 'hours'),
content: 'Landing page',
progress: "55%",
color: 'danger',
users: [
'avatars/300-5.jpg',
'avatars/300-20.jpg'
]
},
{
id: 4,
group: 'dev',
start: moment(now).add(1.5, 'hours'),
end: moment(now).add(3, 'hours'),
content: 'Products module',
progress: "75%",
color: 'info',
users: [
'avatars/300-23.jpg',
'avatars/300-12.jpg',
'avatars/300-9.jpg'
]
},
]);
// Set vis-timeline options
var options = {
zoomable: false,
moveable: false,
selectable: false,
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
margin: {
item: {
horizontal: 10,
vertical: 35
}
},
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
showCurrentTime: false,
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
xss: {
disabled: false,
filterOptions: {
whiteList: {
div: ['class', 'style'],
img: ['data-kt-timeline-avatar-src', 'alt'],
a: ['href', 'class']
},
},
},
// specify a template for the items
template: function (item) {
// Build users group
const users = item.users;
let userTemplate = '';
users.forEach(user => {
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${rootImagePath + user}" alt="" /></div>`;
});
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
<div class="d-flex align-items-center position-relative z-index-2">
<div class="symbol-group symbol-hover flex-nowrap me-3">
${userTemplate}
</div>
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
</div>
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
${item.progress}
</div>
</div>
`;
},
// Remove block ui on initial draw
onInitialDrawComplete: function () {
handleAvatarPath();
const target = element.closest('[data-kt-timeline-widget-4-blockui="true"]');
const blockUI = KTBlockUI.getInstance(target);
if (blockUI.isBlocked()) {
setTimeout(() => {
blockUI.release();
}, 1000);
}
}
};
// Init vis-timeline
const timeline = new vis.Timeline(element, items, groups, options);
// Prevent infinite loop draws
timeline.on("currentTimeTick", () => {
// After fired the first time we un-subscribed
timeline.off("currentTimeTick");
});
}
// Week timeline
const initTimelineWeek = () => {
// Detect element
const element = document.querySelector('#kt_timeline_widget_4_2');
if (!element) {
return;
}
if(element.innerHTML){
return;
}
// Set variables
var now = Date.now();
var rootImagePath = element.getAttribute('data-kt-timeline-widget-4-image-root');
// Build vis-timeline datasets
var groups = new vis.DataSet([
{
id: 1,
content: "Research",
order: 1
},
{
id: 2,
content: "Phase 2.6 QA",
order: 2
},
{
id: 3,
content: "UI Design",
order: 3
},
{
id: 4,
content: "Development",
order: 4
}
]);
var items = new vis.DataSet([
{
id: 1,
group: 1,
start: now,
end: moment(now).add(7, 'days'),
content: 'Framework',
progress: "71%",
color: 'primary',
users: [
'avatars/300-6.jpg',
'avatars/300-1.jpg'
]
},
{
id: 2,
group: 2,
start: moment(now).add(7, 'days'),
end: moment(now).add(14, 'days'),
content: 'Accessibility',
progress: "84%",
color: 'success',
users: [
'avatars/300-2.jpg'
]
},
{
id: 3,
group: 3,
start: moment(now).add(3, 'days'),
end: moment(now).add(20, 'days'),
content: 'Microsites',
progress: "69%",
color: 'danger',
users: [
'avatars/300-5.jpg',
'avatars/300-20.jpg'
]
},
{
id: 4,
group: 4,
start: moment(now).add(10, 'days'),
end: moment(now).add(21, 'days'),
content: 'Deployment',
progress: "74%",
color: 'info',
users: [
'avatars/300-23.jpg',
'avatars/300-12.jpg',
'avatars/300-9.jpg'
]
},
]);
// Set vis-timeline options
var options = {
zoomable: false,
moveable: false,
selectable: false,
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
margin: {
item: {
horizontal: 10,
vertical: 35
}
},
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
showCurrentTime: false,
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
xss: {
disabled: false,
filterOptions: {
whiteList: {
div: ['class', 'style'],
img: ['data-kt-timeline-avatar-src', 'alt'],
a: ['href', 'class']
},
},
},
// specify a template for the items
template: function (item) {
// Build users group
const users = item.users;
let userTemplate = '';
users.forEach(user => {
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${rootImagePath + user}" alt="" /></div>`;
});
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
<div class="d-flex align-items-center position-relative z-index-2">
<div class="symbol-group symbol-hover flex-nowrap me-3">
${userTemplate}
</div>
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
</div>
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
${item.progress}
</div>
</div>
`;
},
// Remove block ui on initial draw
onInitialDrawComplete: function () {
handleAvatarPath();
const target = element.closest('[data-kt-timeline-widget-4-blockui="true"]');
const blockUI = KTBlockUI.getInstance(target);
if (blockUI.isBlocked()) {
setTimeout(() => {
blockUI.release();
}, 1000);
}
}
};
// Init vis-timeline
const timeline = new vis.Timeline(element, items, groups, options);
// Prevent infinite loop draws
timeline.on("currentTimeTick", () => {
// After fired the first time we un-subscribed
timeline.off("currentTimeTick");
});
}
// Month timeline
const initTimelineMonth = () => {
// Detect element
const element = document.querySelector('#kt_timeline_widget_4_3');
if (!element) {
return;
}
if(element.innerHTML){
return;
}
// Set variables
var now = Date.now();
var rootImagePath = element.getAttribute('data-kt-timeline-widget-4-image-root');
// Build vis-timeline datasets
var groups = new vis.DataSet([
{
id: "research",
content: "Research",
order: 1
},
{
id: "qa",
content: "Phase 2.6 QA",
order: 2
},
{
id: "ui",
content: "UI Design",
order: 3
},
{
id: "dev",
content: "Development",
order: 4
}
]);
var items = new vis.DataSet([
{
id: 1,
group: 'research',
start: now,
end: moment(now).add(2, 'months'),
content: 'Tags',
progress: "79%",
color: 'primary',
users: [
'avatars/300-6.jpg',
'avatars/300-1.jpg'
]
},
{
id: 2,
group: 'qa',
start: moment(now).add(0.5, 'months'),
end: moment(now).add(5, 'months'),
content: 'Testing',
progress: "64%",
color: 'success',
users: [
'avatars/300-2.jpg'
]
},
{
id: 3,
group: 'ui',
start: moment(now).add(2, 'months'),
end: moment(now).add(6.5, 'months'),
content: 'Media',
progress: "82%",
color: 'danger',
users: [
'avatars/300-5.jpg',
'avatars/300-20.jpg'
]
},
{
id: 4,
group: 'dev',
start: moment(now).add(4, 'months'),
end: moment(now).add(7, 'months'),
content: 'Plugins',
progress: "58%",
color: 'info',
users: [
'avatars/300-23.jpg',
'avatars/300-12.jpg',
'avatars/300-9.jpg'
]
},
]);
// Set vis-timeline options
var options = {
zoomable: false,
moveable: false,
selectable: false,
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
margin: {
item: {
horizontal: 10,
vertical: 35
}
},
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
showCurrentTime: false,
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
xss: {
disabled: false,
filterOptions: {
whiteList: {
div: ['class', 'style'],
img: ['data-kt-timeline-avatar-src', 'alt'],
a: ['href', 'class']
},
},
},
// specify a template for the items
template: function (item) {
// Build users group
const users = item.users;
let userTemplate = '';
users.forEach(user => {
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${rootImagePath + user}" alt="" /></div>`;
});
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
<div class="d-flex align-items-center position-relative z-index-2">
<div class="symbol-group symbol-hover flex-nowrap me-3">
${userTemplate}
</div>
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
</div>
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
${item.progress}
</div>
</div>
`;
},
// Remove block ui on initial draw
onInitialDrawComplete: function () {
handleAvatarPath();
const target = element.closest('[data-kt-timeline-widget-4-blockui="true"]');
const blockUI = KTBlockUI.getInstance(target);
if (blockUI.isBlocked()) {
setTimeout(() => {
blockUI.release();
}, 1000);
}
}
};
// Init vis-timeline
const timeline = new vis.Timeline(element, items, groups, options);
// Prevent infinite loop draws
timeline.on("currentTimeTick", () => {
// After fired the first time we un-subscribed
timeline.off("currentTimeTick");
});
}
// 2022 timeline
const initTimeline2022 = () => {
// Detect element
const element = document.querySelector('#kt_timeline_widget_4_4');
if (!element) {
return;
}
if(element.innerHTML){
return;
}
// Set variables
var now = Date.now();
var rootImagePath = element.getAttribute('data-kt-timeline-widget-4-image-root');
// Build vis-timeline datasets
var groups = new vis.DataSet([
{
id: "research",
content: "Research",
order: 1
},
{
id: "qa",
content: "Phase 2.6 QA",
order: 2
},
{
id: "ui",
content: "UI Design",
order: 3
},
{
id: "dev",
content: "Development",
order: 4
}
]);
var items = new vis.DataSet([
{
id: 1,
group: 'research',
start: now,
end: moment(now).add(2, 'months'),
content: 'Tags',
progress: "51%",
color: 'primary',
users: [
'avatars/300-7.jpg',
'avatars/300-2.jpg'
]
},
{
id: 2,
group: 'qa',
start: moment(now).add(0.5, 'months'),
end: moment(now).add(5, 'months'),
content: 'Testing',
progress: "64%",
color: 'success',
users: [
'avatars/300-2.jpg'
]
},
{
id: 3,
group: 'ui',
start: moment(now).add(2, 'months'),
end: moment(now).add(6.5, 'months'),
content: 'Media',
progress: "54%",
color: 'danger',
users: [
'avatars/300-5.jpg',
'avatars/300-21.jpg'
]
},
{
id: 4,
group: 'dev',
start: moment(now).add(4, 'months'),
end: moment(now).add(7, 'months'),
content: 'Plugins',
progress: "348%",
color: 'info',
users: [
'avatars/300-3.jpg',
'avatars/300-11.jpg',
'avatars/300-13.jpg'
]
},
]);
// Set vis-timeline options
var options = {
zoomable: false,
moveable: false,
selectable: false,
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
margin: {
item: {
horizontal: 10,
vertical: 35
}
},
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
showCurrentTime: false,
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
xss: {
disabled: false,
filterOptions: {
whiteList: {
div: ['class', 'style'],
img: ['data-kt-timeline-avatar-src', 'alt'],
a: ['href', 'class']
},
},
},
// specify a template for the items
template: function (item) {
// Build users group
const users = item.users;
let userTemplate = '';
users.forEach(user => {
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${rootImagePath + user}" alt="" /></div>`;
});
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
<div class="d-flex align-items-center position-relative z-index-2">
<div class="symbol-group symbol-hover flex-nowrap me-3">
${userTemplate}
</div>
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
</div>
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
${item.progress}
</div>
</div>
`;
},
// Remove block ui on initial draw
onInitialDrawComplete: function () {
handleAvatarPath();
const target = element.closest('[data-kt-timeline-widget-4-blockui="true"]');
const blockUI = KTBlockUI.getInstance(target);
if (blockUI.isBlocked()) {
setTimeout(() => {
blockUI.release();
}, 1000);
}
}
};
// Init vis-timeline
const timeline = new vis.Timeline(element, items, groups, options);
// Prevent infinite loop draws
timeline.on("currentTimeTick", () => {
// After fired the first time we un-subscribed
timeline.off("currentTimeTick");
});
}
// Handle BlockUI
const handleBlockUI = () => {
// Select block ui elements
const elements = document.querySelectorAll('[data-kt-timeline-widget-4-blockui="true"]');
// Init block ui
elements.forEach(element => {
const blockUI = new KTBlockUI(element, {
overlayClass: "bg-body",
});
blockUI.block();
});
}
// Handle tabs visibility
const tabsVisibility = () => {
const tabs = document.querySelectorAll('[data-kt-timeline-widget-4="tab"]');
tabs.forEach(tab => {
tab.addEventListener('shown.bs.tab', e => {
// Week tab
if(tab.getAttribute('href') === '#kt_timeline_widget_4_tab_week'){
initTimelineWeek();
}
// Month tab
if(tab.getAttribute('href') === '#kt_timeline_widget_4_tab_month'){
initTimelineMonth();
}
// 2022 tab
if(tab.getAttribute('href') === '#kt_timeline_widget_4_tab_2022'){
initTimeline2022();
}
});
});
}
// Handle avatar path conflict
const handleAvatarPath = () => {
const avatars = document.querySelectorAll('[data-kt-timeline-avatar-src]');
if(!avatars){
return;
}
avatars.forEach(avatar => {
avatar.setAttribute('src', avatar.getAttribute('data-kt-timeline-avatar-src'));
avatar.removeAttribute('data-kt-timeline-avatar-src');
});
}
// Public methods
return {
init: function () {
initTimelineDay();
handleBlockUI();
tabsVisibility();
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTTimelineWidget4;
}
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTTimelineWidget4.init();
});