1. Overview
Dashboards are only effective when they communicate information clearly. When using Joget's Report Builder (which uses ECharts) to create a Status Pie Chart, the default colors are meaningless. We need Green for "Authorized," Red for "Rejected," and Yellow for "Pending."
This client-side JavaScript solution, placed in a Custom HTML element on your Userview page, allows you to hijack the chart after it loads and programmatically apply meaningful colors based on the data label (the workflow status).
2. How It Works
This script performs two main actions: Color Customization and Interactive Filtering.
Action 1: Applying Status Colors 🌈
- Chart Initialization: The script waits for the page to load, then targets the specific ECharts instance using its unique HTML ID (e.g.,
echarts_XYZ). - Data Grab: It pulls the raw data (
series[0].data) from the chart. - Color Loop: It loops through every slice. For each slice, it checks the slice's name (the status, like "Authorized") and manually injects a custom
itemStyleproperty with a specific Hex color. - Redraw: Finally, it uses
aChart.setOption(option)to force ECharts to redraw the chart with the new color mappings.
Action 2: Interactive Filtering 🖱️
The second part of the script uses the ECharts built-in on('click', ...) event listener to turn each pie slice into a functional link, routing users to specific, pre-filtered Userview dashboards.
3. Full Code
Paste this code into a Custom HTML element (placed after the Report Grid element) in your Joget Userview.
Security Note: The unique ECharts ID (echarts_CHART_ID_HERE) and the Userview paths have been made generic. You must replace these placeholders with your actual values.
4. Example Use Cases
- ✅ Compliance Dashboards: Instantly highlight records that are "Expired" (Red) or "Compliant" (Green).
- ✅ Service Desk: Show tickets based on priority: "High" (Red), "Medium" (Orange), "Low" (Blue).
- ✅ Financial Approvals: Use strong, clear colors to represent the stage of the approval process: "Submitted" (Yellow), "Finance Approved" (Light Green), "CEO Approved" (Dark Green).
5. Customization Tips
- 💡 Using Lookup Objects: For cleaner code, consider replacing the long
if/else ifchain with a simple JavaScript lookup object (or map). This is easier to update when new statuses are added. - 💡 Userview Pathing: The click logic uses
window.open(...)to direct users. Ensure you replaceapp_nameand the specific Userview categories (_) with your application's actual URLs. - 💡 ECharts ID Safety: If you modify and save your Report Grid element, Joget sometimes changes the unique ECharts ID. If your colors disappear, this is the first place to check!
6. Key Benefits
- 🚀 Enhanced Clarity: Makes dashboards instantly readable by associating colors with conventional meanings (red=bad, green=good).
- 🚀 Improved UX: Turns a static visualization into an interactive filter, drastically reducing the clicks needed for users to drill down into data.
- 🚀 Maintainability: All coloring rules are contained in one simple, client-side script, separate from the core reporting configuration.
7. Security Note
🔒 Userview Security: The click logic exposes Userview URLs. Ensure that the target dashboard pages (/pending_dashboard, /rejected_dashboard, etc.) are protected with appropriate Userview Permission settings so unauthorized users cannot access the underlying data lists directly.
8. Final Thoughts
By using client-side scripting to customize the ECharts object, you transform a generic Joget dashboard into a highly intuitive and interactive data visualization tool. This simple technique is fundamental for professional-grade reporting in Joget.
Source Code
<script>
$(document).ready(function () {
var aChart = echarts.init(document.getElementById('echarts_<api-key>'));
var option = aChart.getOption();
// Change pie slice color dynamically based on status
var pieData = aChart.getOption().series[0].data;
console.log(pieData);
for (var i = 0; i < pieData.length; i++) {
var status = pieData[i].name;
console.log(status);
// Set color based on status
if (status === 'Approval Pending') {
option.series[0].data[i].itemStyle = { color: '#FFDD7D' };
} else if (status === 'Authorized') {
option.series[0].data[i].itemStyle = { color: '#9AC4A1' };
} else if (status === 'Draft') {
option.series[0].data[i].itemStyle = { color: '#EEA94E' };
}
else if (status === 'Escalated') {
option.series[0].data[i].itemStyle = { color: 'red' };
}
else if (status === 'Rejected') {
option.series[0].data[i].itemStyle = { color: '#F17069' };
}
else if (status === 'Request Rejected') {
option.series[0].data[i].itemStyle = { color: '#DC143C' };
}
else if (status === 'Request Rejected') {
option.series[0].data[i].itemStyle = { color: '#DC143C' };
}
else {
// Default to gray for other values
option.series[0].data[i].itemStyle = { color: 'gray' };
}
}
// Update chart with modified options
aChart.setOption(option);
aChart.on('click', function (params) {
console.log("Click!");
console.log("Data name: " + params.name);
console.log("Data value: " + params.data.value);
if (params.name == 'Approval Pending') {
window.open(`/jw/web/userview/panda/v/_/approval_pending_dashboards`, "_blank");
}
else if (params.name == 'Authorized') {
window.open(`/jw/web/userview/panda/v/_/authorized_dashboards`, "_blank");
}
else if (params.name == 'Rejected') {
window.open(`/jw/web/userview/panda/v/_/rejected_dashboards`, "_blank");
}
else if (params.name == 'Delete') {
window.open(`/jw/web/userview/panda/v/_/deleted_dashboards`, "_blank");
}
else if (params.name == 'Terminated') {
window.open(`/jw/web/userview/panda/v/_/terminated_dashboards`, "_blank");
}
else if (params.name == 'Escalated') {
window.open(`/jw/web/userview/panda/v/_/escalated_dashboards`, "_blank");
}
else {
window.open(`/jw/web/userview/panda/v/_/all_document_list?d-6985709-fn_Status=${params.name}`);
}
});
});
</script>
Top comments (0)