Scribd
Upload
5 views

Js

This document defines functions to generate donut charts using ApexCharts library. It defines donat_chart function that takes a selector, series data and labels to render donut charts. It also defines chart configuration settings like colors, font styles etc. On document ready, it calls donat_chart to render donut charts for different elements using sample data.

Uploaded by

Fadli Achsan
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Js

This document defines functions to generate donut charts using ApexCharts library. It defines donat_chart function that takes a selector, series data and labels to render donut charts. It also defines chart configuration settings like colors, font styles etc. On document ready, it calls donat_chart to render donut charts for different elements using sample data.

Uploaded by

Fadli Achsan
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

$(document).

ready(function() {
donat_chart("#pengajuan", [49, 22], ["Diajukan", "Disetujui"])
donat_chart("#coba", [49, 22,49, 22,49, 22,49, 22,49, 22], ["Diajukan",
"Disetujui","Diajukan", "Disetujui","Diajukan", "Disetujui","Diajukan",
"Disetujui","Diajukan", "Disetujui"])
donat_chart("#bahan_baku", [25, 25, 25, 25], ["1", "2", "3", "4"])
});

var flatPicker = $('.flat-picker'),


isRtl = $('html').attr('data-textdirection') === 'rtl',
grid_line_color = 'rgba(200, 200, 200, 0.2)',
labelColor = '#6e6b7b',
tooltipShadow = 'rgba(0, 0, 0, 0.25)',
successColorShade = '#28dac6',
chartColors = {
pie: {
merah: '#EE3124',
ijo: '#28C76F',
kuning: '#FFAB00',
biru: '#2045B8',
ungu: '#BD5C91',
birmud: '#00CFE8',
ijomud: '#85C808',
pink: '#EA5455',
orange: '#F24E1E',
peach: '#FF9F43'
},
};

let pie_color = Object.keys(chartColors['pie'])


.map(function(key) {
return chartColors['pie'][key];
});

function donat_chart(selector, series, labels) {


var bor_covid_element = document.querySelector(selector),
bor_covid_config = {
chart: {
height: 250,
type: 'pie'
},
colors: [chartColors.pie.merah, chartColors.pie.ijo,
chartColors.pie.kuning, chartColors.pie.biru,
chartColors.pie.ungu, chartColors.pie.birmud,
chartColors.pie.ijommud, chartColors.pie.pink,
chartColors.pie.orange, chartColors.pie.peach
],
plotOptions: {
radialBar: {
size: 185,
hollow: {
size: '25%'
},
track: {
margin: 15
},
dataLabels: {
name: {
fontSize: '2rem',
fontFamily: 'Montserrat'
},
value: {
fontSize: '1rem',
fontFamily: 'Montserrat'
},
total: {
show: true,
fontSize: '1rem',
label: 'Comments',
formatter: function(w) {
return '80%';
}
}
}
}
},
legend: {
show: true
},
stroke: {
lineCap: 'round'
},
series: series,
labels: labels,
colors: pie_color
};
if (typeof bor_covid_element !== undefined && bor_covid_element !==
null) {
var radialChart = new ApexCharts(bor_covid_element,
bor_covid_config);
radialChart.render();
}

You might also like