renderPie(data,{
domain: "b",
range: "a"
})
data = [{ a: 10,b: "Facebook"},{ a: 80, b: "Share",},{a: 30, b: "Cover", },{ a: 40,b:"Instagram",},{ a: 40,b:"Instagram",},{ a: 40,b:"Instagram",},{ a: 40,b:"Instagram",},{ a: 40,b:"Instagram",},{ a: 40,b:"Instagram",}]
renderPie = function renderPie(data, property) {
const piechart = html`<div ></div>`;
piechart.style.width = `100`;
piechart.style.height = `${height}px`;
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
let domain = "";
let range = "";
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 total = 0;
range_array.forEach((dt) => total += dt);
let new_data_array = [
[domain, range]
];
console.log(domain)
data.forEach((dt) => {
new_data_array.push([dt[domain], dt[range]])
})
function drawChart() {
const data = google.visualization.arrayToDataTable(new_data_array);
const options = {
title: "TOTAL COUNT ( "+ range +" ): " + total,
pieHole: 0.5,
};
const chart = new google.visualization.PieChart(piechart);
chart.draw(data, options);
}
return piechart;
}
width = 800
height = 500
google = require("https://www.gstatic.com/charts/loader.js").catch(
() => window.google
)
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.
