I just tried Chartjs and facing two problems. I'm willing to display a double pie (one on top of the other) in order to display details of one into the other.
Problem : I have different labels, for the values and the subvalues. But chartjs interates again when building the second chart, causing doubling the first 3 labels. What I'd like is to have the 3 first labels on the small pie, the others on the large one.
thanks for helping me out on this.
let values = [309, 42, 3]
let subvalues = [74, 156, 79, 12, 22, 8, 0, 2, 1]
let labels = ["visits", "drafts", "contact", "T2", "T3", "T4", "T2", "T3", "T4", "T2", "T3", "T4"]
let chartjsWorkflowPieCtx = document.getElementById('chartjs-workflow-pie')
let chartjsWorkflowPie = new Chart(chartjsWorkflowPieCtx, {
type: 'pie',
data: {
labels: labels,
datasets: [
{
label: 'Details',
backgroundColor: [
shadeBlend(0.2, '#5782BB'),
shadeBlend(0.4, '#5782BB'),
shadeBlend(0.6, '#5782BB'),
shadeBlend(0.2, '#64D7D6'),
shadeBlend(0.4, '#64D7D6'),
shadeBlend(0.6, '#64D7D6'),
shadeBlend(0.2, '#f07dd8'),
shadeBlend(0.4, '#f07dd8'),
shadeBlend(0.6, '#f07dd8'),
],
borderSize: 0,
borderColor: 'rgba(255, 255, 255, 0)',
data: subvalues
},
{
label: "Global",
backgroundColor: [
'#7487bb',
'#64D7D6',
'#C4AFF0'
],
borderSize: 0,
borderColor: 'rgba(255, 255, 255, 0)',
data: values
},
]
}
})
function shadeBlend(p, c0, c1) {
var n = p < 0 ? p * -1 : p, u = Math.round, w = parseInt;
if (c0.length > 7) {
var f = c0.split(","), t = (c1 ? c1 : p < 0 ? "rgb(0,0,0)" : "rgb(255,255,255)").split(","), R = w(f[0].slice(4)),
G = w(f[1]), B = w(f[2]);
return "rgb(" + (u((w(t[0].slice(4)) - R) * n) + R) + "," + (u((w(t[1]) - G) * n) + G) + "," + (u((w(t[2]) - B) * n) + B) + ")"
} else {
var f = w(c0.slice(1), 16), t = w((c1 ? c1 : p < 0 ? "#000000" : "#FFFFFF").slice(1), 16), R1 = f >> 16,
G1 = f >> 8 & 0x00FF, B1 = f & 0x0000FF;
return "#" + (0x1000000 + (u(((t >> 16) - R1) * n) + R1) * 0x10000 + (u(((t >> 8 & 0x00FF) - G1) * n) + G1) * 0x100 + (u(((t & 0x0000FF) - B1) * n) + B1)).toString(16).slice(1)
}
}<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartjs-workflow-pie"></canvas>
</body>
</html>