Scribd
Upload
10 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 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
We take content rights seriously. If you suspect this is your content, claim it here.
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