I wanted to spice up the payslip self service part of popay.net, so adding a visual touch could do.
We finally landed on a sunburst, or a pie diagram with two levels, in this case. It shows the earnings, the deductions and finally the remaining net. Employer charges are left out.
This example (image) comes from the Kenyan legislation.
Given that the net, earnings and deductions make up a whole circle, and given that the net amount equals earnings minus deductions, gives that the earnings span half a circle.
To be honest, I only checked that relationship after realizing that each test was showing the earnings as half a circle.
The second level of the chart shows the individual payroll components.
I used highcharts to integrate the chart in popay.net's apex pages. json is generated in the database, and sent as an ajax request to the html page, where some further javascript tweaking feeds the chart.
This example (javascript chart, interactive tooltips, ...) comes from Gabon.
We finally landed on a sunburst, or a pie diagram with two levels, in this case. It shows the earnings, the deductions and finally the remaining net. Employer charges are left out.
This example (image) comes from the Kenyan legislation.
Given that the net, earnings and deductions make up a whole circle, and given that the net amount equals earnings minus deductions, gives that the earnings span half a circle.
To be honest, I only checked that relationship after realizing that each test was showing the earnings as half a circle.
The second level of the chart shows the individual payroll components.
I used highcharts to integrate the chart in popay.net's apex pages. json is generated in the database, and sent as an ajax request to the html page, where some further javascript tweaking feeds the chart.
This example (javascript chart, interactive tooltips, ...) comes from Gabon.
