138 lines
3.8 KiB
JavaScript
138 lines
3.8 KiB
JavaScript
/*
|
|
Template Name: Grenviro Monitoring
|
|
Author: Themesbrand
|
|
Website: https://Themesbrand.com/
|
|
Contact: Themesbrand@gmail.com
|
|
File: funnel Chart init js
|
|
*/
|
|
|
|
// get colors array from the string
|
|
function getChartColorsArray(chartId) {
|
|
if (document.getElementById(chartId) !== null) {
|
|
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
|
colors = JSON.parse(colors);
|
|
return colors.map(function (value) {
|
|
var newValue = value.replace(" ", "");
|
|
if (newValue.indexOf(",") === -1) {
|
|
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
|
if (color) return color;
|
|
else return newValue;;
|
|
} else {
|
|
var val = value.split(',');
|
|
if (val.length == 2) {
|
|
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
|
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
|
return rgbaColor;
|
|
} else {
|
|
return newValue;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// funnel_chart Charts
|
|
var funnelChartColors = getChartColorsArray("funnel_chart");
|
|
if (funnelChartColors) {
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Funnel Series",
|
|
data: [1380, 1100, 990, 880, 740, 548, 330, 200],
|
|
},
|
|
],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
},
|
|
colors: funnelChartColors,
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 0,
|
|
horizontal: true,
|
|
barHeight: '80%',
|
|
isFunnel: true,
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val, opt) {
|
|
return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
title: {
|
|
text: 'Recruitment Funnel',
|
|
align: 'middle',
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
'Sourced',
|
|
'Screened',
|
|
'Assessed',
|
|
'HR Interview',
|
|
'Technical',
|
|
'Verify',
|
|
'Offered',
|
|
'Hired',
|
|
],
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#funnel_chart"), options);
|
|
chart.render();
|
|
}
|
|
|
|
// pyramid_chart Charts
|
|
var pyramidChartColors = getChartColorsArray("pyramid_chart");
|
|
if (pyramidChartColors) {
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "",
|
|
data: [200, 330, 548, 740, 880, 990, 1100, 1380],
|
|
},
|
|
],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 0,
|
|
horizontal: true,
|
|
distributed: true,
|
|
barHeight: '80%',
|
|
isFunnel: true,
|
|
},
|
|
},
|
|
colors: pyramidChartColors,
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val, opt) {
|
|
return opt.w.globals.labels[opt.dataPointIndex]
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
title: {
|
|
text: 'Pyramid Chart',
|
|
align: 'middle',
|
|
},
|
|
xaxis: {
|
|
categories: ['Sweets', 'Processed Foods', 'Healthy Fats', 'Meat', 'Beans & Legumes', 'Dairy', 'Fruits & Vegetables', 'Grains'],
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#pyramid_chart"), options);
|
|
chart.render();
|
|
} |