|
Server : Apache/2.4.41 (Ubuntu) System : Linux vmi1525618.contaboserver.net 5.4.0-105-generic #119-Ubuntu SMP Mon Mar 7 18:49:24 UTC 2022 x86_64 User : www-data ( 33) PHP Version : 8.2.12 Disable Function : NONE Directory : /var/www/peoplebee.in/___accounts-admin/public/admin/js/examples/charts/ |
Upload File : |
'use strict';
$(document).ready(function () {
function isUrl(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
return regexp.test(s);
}
// Get query string
var queryString = window.location.href.slice(window.location.href.indexOf('?') + 1);
if (isUrl(queryString)) {
queryString = "";
}
// Enrollments AJAX
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "GET",
url: _base_url + '/superadmin/chart-enrollment?' + queryString,
dataType: "JSON",
beforeSend: function () {
$('#apex_chart_enrollment_pie').html(`<i class="fa fa-spinner fa-spin fa-2x"></i>`);
},
success: function (result) {
$('#apex_chart_enrollment_pie').empty();
apex_chart_enrollment_pie(result);
apex_chart_enrollment_bar(result);
}
});
// Entollment PIE (Percentage)
function apex_chart_enrollment_pie(data) {
var options = {
chart: {
width: 450,
type: 'pie',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
labels: data.plabel,
series: data.pvalue,
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + " %"
}
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_enrollment_pie"),
options
);
chart.render();
}
// Entollment Bar Chart (no.of)
function apex_chart_enrollment_bar(data) {
var options = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
series: [{
name: 'Enrollments',
data: data.value,
}],
xaxis: {
categories: data.label,
},
yaxis: {
title: {
text: 'Number of enrollment'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "No.: " + val
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_enrollment_bar"),
options
);
chart.render();
}
// Gender AJAX
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "GET",
url: _base_url + '/superadmin/chart-gender?' + queryString,
dataType: "JSON",
beforeSend: function () {
$('#apex_chart_gender_pie').html(`<i class="fa fa-spinner fa-spin fa-2x"></i>`);
},
success: function (jsonParse) {
$('#apex_chart_gender_pie').empty();
apex_chart_gender_pie(jsonParse);
apex_chart_gender_bar(jsonParse);
}
});
// Gender PIE Chart
function apex_chart_gender_pie(data) {
var options = {
colors: ['#0e700c', '#750955', '#9e0b0b'],
chart: {
width: 390,
type: 'pie',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
labels: data.plabel,
series: data.pvalue,
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%"
}
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_gender_pie"),
options
);
chart.render();
}
// Gender Bar Chart
function apex_chart_gender_bar(data) {
var options = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
series: [{
name: 'Gender',
data: data.value
}],
xaxis: {
categories: data.label,
},
yaxis: {
title: {
text: 'Number of enrollment'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "" + val + ""
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_gender_bar"),
options
);
chart.render();
}
// State AJAX
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "GET",
url: _base_url + '/superadmin/chart-state?' + queryString,
dataType: "JSON",
beforeSend: function () {
$('#apex_chart_state_line').html(`<i class="fa fa-spinner fa-spin fa-2x"></i>`);
$('#table_state').html(`<i class="fa fa-spinner fa-spin fa-2x"></i>`);
},
success: function (result) {
$('#apex_chart_state_line').empty();
apex_chart_state_pie(result);
apex_chart_state_line(result);
table_state(result);
}
});
// Table State
function table_state(data) {
$('#table_state').empty();
let label = data.plabel;
$.each(label, function (i, item) {
var $tr = $('<tr>').append(
$('<td>').text(i + 1),
$('<td>').text(data.plabel[i]),
$('<td>').text(data.value[i]),
$('<td>').text(data.pvalue[i] + '%')
).appendTo('#table_state');
//console.log($tr.wrap('<p>').html());
});
}
// State PIE
function apex_chart_state_pie(data) {
var options = {
chart: {
width: 390,
type: 'pie',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
labels: data.plabel,
series: data.pvalue,
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%"
}
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_state_pie"),
options
);
chart.render();
}
// State Line
function apex_chart_state_line(data) {
var options = {
chart: {
height: 380,
type: 'bar',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
plotOptions: {
bar: {
barHeight: '100%',
distributed: true,
horizontal: true,
dataLabels: {
position: 'bottom'
},
}
},
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#333']
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + " (" + val + ")"
},
offsetX: 0,
dropShadow: {
enabled: false
}
},
series: [{
data: data.value
}],
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: data.label,
},
yaxis: {
labels: {
show: false
}
},
title: {
align: 'center',
floating: true
},
subtitle: {
// text: 'Category Names as DataLabels inside bars',
align: 'left',
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function () {
return ''
}
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_state_line"),
options
);
chart.render();
}
// Year AJAX
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "GET",
url: _base_url + '/superadmin/chart-year?' + queryString,
dataType: "JSON",
beforeSend: function () {
$('#apex_chart_year_pie').html(`<i class="fa fa-spinner fa-spin fa-2x"></i>`);
},
success: function (result) {
$('#apex_chart_year_pie').empty();
apex_chart_year_pie(result);
apex_chart_year_line(result);
}
});
// Year PIE
function apex_chart_year_pie(data) {
var options = {
chart: {
width: 390,
type: 'pie',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
labels: data.plabel,
series: data.pvalue,
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%"
}
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_year_pie"),
options
);
chart.render();
}
// Year Line
function apex_chart_year_line(data) {
var options = {
chart: {
height: 380,
type: 'bar',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
plotOptions: {
bar: {
barHeight: '100%',
distributed: true,
horizontal: true,
dataLabels: {
position: 'bottom'
},
}
},
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#333']
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + " (" + val + ")"
},
offsetX: 0,
dropShadow: {
enabled: false
}
},
series: [{
data: data.value
}],
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: data.label,
},
yaxis: {
labels: {
show: false
}
},
title: {
align: 'center',
floating: true
},
subtitle: {
// text: 'Category Names as DataLabels inside bars',
align: 'left',
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function () {
return ''
}
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_year_line"),
options
);
chart.render();
}
// District AJAX
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "GET",
url: _base_url + '/superadmin/chart-district?' + queryString,
dataType: "JSON",
beforeSend: function () {
$('#apex_chart_district_line').html(`<i class="fa fa-spinner fa-spin fa-2x"></i>`);
$('#table_district').html(`<i class="fa fa-spinner fa-spin fa-2x"></i>`);
},
success: function (result) {
$('#apex_chart_district_line').empty();
apex_chart_district_line(result);
table_district(result);
}
});
// Table District
function table_district(data) {
$('#table_district').empty();
let label = data.label;
$.each(label, function (i, item) {
var $tr = $('<tr>').append(
$('<td>').text(i + 1),
$('<td>').text(data.label[i]),
$('<td>').text(data.value[i]),
$('<td>').text(data.pvalue[i] + '%')
).appendTo('#table_district');
// //console.log($tr.wrap('<p>').html());
});
}
// Distric Wise Line
function apex_chart_district_line(data) {
var options = {
chart: {
height: 380,
type: 'bar',
toolbar: {
show: true,
tools: {
download: true // <== line to add
}
}
},
plotOptions: {
bar: {
barHeight: '100%',
distributed: true,
horizontal: true,
dataLabels: {
position: 'bottom'
},
}
},
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#333']
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
},
offsetX: 0,
dropShadow: {
enabled: false
}
},
series: [{
data: data.value
}],
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: data.plabel,
},
yaxis: {
labels: {
show: false
}
},
title: {
align: 'center',
floating: true
},
subtitle: {
// text: 'Category Names as DataLabels inside bars',
align: 'left',
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function () {
return "No.:"
}
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#apex_chart_district_line"),
options
);
chart.render();
}
});