Accessing dynamic data to populate Chart.JS

leanne2 · 2025-03-14T15:04:34.618Z

Hello, I am really struggling to access dynamic data using javascript actions/toolbox and chart.js. This is a simple graph I want to set the number of the variable using dynamic data either a temporary state on the page or a group, or doing a data base search with a constraint. Can anybody help me adapt this code in my workflow. I am not clear how to reference either to set the variables dynamically.

// Manually define the endorsed and not endorsed percentages var endorsedPercentage =5 // Example: 60% endorsed var notEndorsedPercentage = 100 - endorsedPercentage; // Remaining percentage

// Now you can use these values as needed
console.log("Endorsed: " + endorsedPercentage + “%”);
console.log("Not Endorsed: " + notEndorsedPercentage + “%”);

// Manually define the endorsed and not endorsed percentages
var endorsedPercentage =5 // Example: 60% endorsed
var notEndorsedPercentage = 100 - endorsedPercentage; // Remaining percentage

// Create the chart
var ctx = document.getElementById(‘myChart’).getContext(‘2d’);
var myChart = new Chart(ctx, {
type: ‘doughnut’, // Doughnut chart type
data: {
labels: [‘Endorsed’, ‘Not Endorsed’], // Labels for the chart
datasets: [{
data: [endorsedPercentage, notEndorsedPercentage], // Manual data
backgroundColor: [‘#FFCC00’, ‘#D3D3D3’], // Colors for the chart slices
borderColor: [‘#FFFFFF’, ‘#FFFFFF’],
borderWidth: 8,
borderCapStyle: ‘round’, // Round stroke caps
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.raw + “%”; // Show percentage on tooltip
}
}
},
legend: {
display: false // Hide legend if not needed
},
datalabels: {
display: true,
formatter: function(value) {
return value + ‘%’; // Display percentage inside the chart
},
color: ‘#fff’,
font: {
weight: ‘bold’,
size: 20
}
}
},
elements: {
arc: {
borderRadius: 20, // Round the slices
}
},
cutout: ‘85%’ // Make slices thinner by adjusting the cutout percentage
}
});

leanne2 · 2025-03-14T16:30:59.082Z

Have since solved this Use the dynamic data picker inside the Toolbox action to insert values such as Page's B4 directly into your JavaScript code.