<div class="wrapper">
<canvas id="diagramm" width="600" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById('diagramm').getContext('2d');
const chartOptions = {
legend: {
position: 'bottom'
},
plugins: {
datalabels: {
color: '#ffffff',
formatter: function(value, ctx) {
return ctx.chart.data.labels[ctx.dataIndex] + '\n' + value + '%';
}
}
}
};
const diagramm_data = {
labels: [
"Saudi Arabia",
"Russia",
"Iraq",
"United Arab Emirates",
"Canada"
],
datasets: [
{
data: [133.3, 86.2, 52.2, 51.2, 50.2],
backgroundColor: [
"#FF6384",
"#63FF84",
"#84FF63",
"#8463FF",
"#6384FF"
]
}]
};
var diagramm = new Chart(ctx, {
type: 'pie',
data: diagramm_data,
options: chartOptions
});
</script>
$.ajax({
url: '<?php echo admin_url( "admin-ajax.php" ) ?>',
type: 'POST',
data: 'action=check_account&account=<?php echo (isset($_SESSION['email'])) ? ($_SESSION['email']) : ('') ?>&url=' + window.location.href,
success: function( data ) {
if(data == "-") {
window.location.href = 'https://' + location.hostname + '/';
return true;
}
else {
var json = JSON.parse(data);
diagramm_data.labels = [];
diagramm_data.datasets.data = [];
diagramm_data.datasets.backgroundColor = [];
json['doughnut'].name.forEach(element => {
diagramm_data.labels.push(element);
});
json['doughnut'].percent.forEach(element => {
diagramm_data.datasets.data.push(element);
var color = (function lol(m, s, c) {
return s[m.floor(m.random() * s.length)] +
(c && lol(m, s, c - 1));
})(Math, '3456789ABCDEF', 4);
diagramm_data.datasets.backgroundColor.push('#' + color);
});
diagramm.update();
}
}
});