renderPie(data_for_pie_chart);
Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
renderPie = function renderPie(data, property) {
let domain = ""; //domain is all the inpts
let range = ""; //range is all the outputs
if (!property) {
let count = 0;
for (const [key, value] of Object.entries(data[0])) {
if (typeof value === "number" && count < 1) {
count += 1;
if (count === 1) {
range = key;
}
}
}
} else {
domain = property.domain;
range = property.range;
}
for (const [key, value] of Object.entries(data[0])) {
if (key !== range && domain === "") {
domain = key;
break;
}
}
let domain_array = data.map((dt, index) => {
return dt[domain];
})
let range_array = data.map((dt, index) => {
return dt[range];
})
let after_label_data_arr = [];
data.forEach((object, index) => {
for (const [key, value] of Object.entries(object)) {
if (!after_label_data_arr[index]) {
after_label_data_arr.push(key + " : " + value)
} else {
let str = after_label_data_arr[index];
after_label_data_arr[index] = str + '\n' + (key + " : " + value + " ");
}
}
})
const container = html `<canvas></canvas>`;
const myChart = new Chart(container, {
type: 'doughnut',
data: {
labels: domain_array,
datasets: [{
backgroundColor: randomColorGenerator(domain_array.length),
label: '# of Votes',
data: range_array,
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: "TOTAL COUNT (" + range + ") : " + range_array.reduce((a, b) => a + b, 0),
position: "bottom",
fontSize: 13
},
tooltips: {
callbacks: {
afterLabel: function (e) {
return "\n" + after_label_data_arr[e.index]
}
}
},
}
});
return container;
}
function randomColorGenerator(length) {
let colorArray = [];
for (let index = 0; index <= length; ++index) {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
if (colorArray.includes("rgb(" + r + "," + g + "," + b + ")")) {
let rgb = returnsUniqueRGB(colorArray);
colorArray.push(rgb);
} else {
colorArray.push("rgb(" + r + "," + g + "," + b + ")");
}
}
return colorArray;
}
function returnsUniqueRGB(colorArray) {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
if (colorArray.includes("rgb(" + r + "," + g + "," + b + ")")) {
returnsUniqueRGB(colorArray);
} else {
return "rgb(" + r + "," + g + "," + b + ")";
}
}
data_for_pie_chart = [{
"MONTH": "JANUARY",
"YEAR": "2021",
"LABH": 100,
"LOSS": 10,
"C00": "njhjg"
},
{
"MONTH": "FEBRUARY",
"YEAR": "2022",
"LABH": 90,
"LOSS": 20
},
{
"MONTH": "MARCH",
"YEAR": "2023",
"LABH": 80,
"LOSS": 30
}
]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
