Notes

@{
ViewData["Title"] = "Home Page";
}


<div class="row" id="chart">
</div>


@section js{

<script>
$(function () {

//function getRandomColor() {
// var letters = '0123456789ABCDEF';
// var color = '#';
// for (var i = 0; i < 6; i++) {
// color += letters[Math.floor(Math.random() * 16)];
// }
// return color;
//}

function getRandomColor(x) {
var letters = '0123456789ABCDEF';
var colors = [];

for (var y = 0; y < x; y++) {
var color = ['#'];
for (var i = 0; i < 6; i++) {
color.push(letters[Math.floor(Math.random() * 16)]);
}
colors.push(color.join(""));
}
return colors;
}


// sonunda eğer () işareti var ise, metot sayfa yüklendiğinde direk olarak çalışacaktır.
(function CreateChart(u, i) {
//if (typeof i === "undefined") {
// u = "countries";
// i = "";
//}

$.getJSON(`/${u}/_getcharts/${i}`, function (data) {
if (data == 400) {
// 400 = NotFound
// chart içerisinde gösterilecek data yok ise, altta yer alan kod bloklarının çalışmasını engelliyoruz.
return;
}

let count = 1;
count = document.getElementsByTagName("canvas").length + 1; // oluşacak olan ilk chart herzaman için 1. değere sahip olsun

let template = `<div class="col-sm-6 col-md-4 col-xl-3 shadow-sm pt-3 pb-3 rounded"><canvas id="chart-${count}" width="400" height="400"></canvas></div>`;
$("#chart").append(template);

var ctx = document.getElementById(`chart-${count}`).getContext('2d');
var chart = new Chart(ctx, {
type: "pie",
data: {
labels: data.labels,
ids: data.ids,
url: data.url,
datasets: [{
data: data.data,
backgroundColor: getRandomColor(data.labels.length)
}],
options: {
events: ['click']
}
}
});


$(document).on("click", `#chart-${count}`, function (evt) {
alert("asd")
var activePoints = chart.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var index = activePoints[0]['_index'];
CreateChart(chartData.url, chartData.ids[index]);
}
});
});
})(u = "countries", i = "");


//$.getJSON("/countries/_getcountriesreport", function (result) {

// $("#countriesChart").empty();
// $("#countriesChart").html('<canvas id="countries" width="400" height="400" class="shadow-sm p-3 rounded"></canvas>');

// var ctx = document.getElementById("countries").getContext('2d');
// var countriesChart = new Chart(ctx, {
// type: "pie",
// data: {
// labels: result.labels,
// ids: result.ids,
// datasets: [{
// data: result.data,
// backgroundColor: getRandomColor(result.labels.length)
// }],
// options: {
// events: ['click']
// }
// }
// });

// $(document).on("click", "#countries", function (evt) {
// var activePoints = countriesChart.getElementsAtEvent(evt);
// if (activePoints[0]) {
// var chartData = activePoints[0]['_chart'].config.data;
// var idx = activePoints[0]['_index'];
// const id = chartData.ids[idx];

// var url = "/cities/_getcitiesreport/" + id;
// console.log(url);


// }
// });
//})
})

</script>

}

@*https://jsfiddle.net/jhxb2pgw/8/*@