Published
Edited
Nov 5, 2021
3 forks
Pie Chart
Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
renderPie(data, {
labelColumn: 'key',
dataColumn: 'count'
})
data = [{key: "Facebook", count: 10},{key: "Share", count: 20},{key: "Cover", count: 30},{key:"Instagram", count: 40}]
renderPie = function name(data,labels) {
let labelC = labels.labelColumn;
let dataC = labels.dataColumn;
let label_array = data.map((dt,index)=>{
return dt[labelC];
})
let data_array = data.map((dt,index)=>{
return dt[dataC];
})
let total=0;
data_array.forEach((dt)=> total +=dt);
let color_array = Array(data_array.length).fill().map((dt)=>{
let o = Math.round, r = Math.random, s = 240;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
})
const container = html`<canvas id="myChart"></canvas>`;
const myChart = new Chart(container, {
type: 'doughnut',
data: {
labels: label_array,
datasets: [{
label: '# of Votes',
data: data_array,
backgroundColor: color_array,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
return container;
}
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.
