Attendance tracking charts - Rishan Solutions

Attendance tracking is a crucial component for HR, school portals, or team dashboards. Visualizing attendance data using charts allows users, administrators, or teachers to analyze patterns, track performance, and make decisions based on insights. With Power Pages (formerly Power Apps Portals), you can create interactive and dynamic attendance tracking charts by integrating Dataverse, Chart.js, and optionally Power Automate for automation.

Step 1: Define the Attendance Data Structure in Dataverse

To begin with, you need to model the attendance records in Dataverse:

Create the following Dataverse Tables:

Users/Employees/Students – base table (e.g., Employee)
Attendance Records (e.g., Attendance) with fields:
- Employee (Lookup to Employee)
- Date (Date only)
- Status (Choice: Present, Absent, Late, Leave)
- Check-in Time (DateTime)
- Check-out Time (DateTime)

This structure captures the essential details for each attendance entry.

Step 2: Automate Attendance Entry (Optional)

If you want to automate entries:

Use Power Automate or custom forms where users check in/out.
You can also use QR code-based portals, mobile forms, or embedded check-in systems.

Step 3: Create a Web Page to Display Attendance Data

In Power Pages, create a web page where users or admins can view attendance in chart format.

Create a new Web Page (e.g., /attendance-charts)
Add a Web Template for custom logic and chart rendering

Step 4: Use Liquid to Fetch Attendance Records

Use Liquid to fetch the required attendance records from Dataverse. Here’s an example that filters based on the logged-in user:

{% assign userId = user.id %}
{% assign records = entities.attendance | where: "employee.id", userId %}
{% assign attendanceData = "" %}
{% assign labels = "" %}

{% for record in records %}
  {% assign labels = labels | append: '"' | append: record.date | append: '",' %}
  {% assign attendanceData = attendanceData | append: '"' | append: record.status | append: '",' %}
{% endfor %}

Convert this into valid JavaScript arrays for use in charts.

Step 5: Include Chart.js for Visualizations

Embed Chart.js into your page to display attendance charts:

Load Chart.js Library:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Create Canvas Element:

<canvas id="attendanceChart" width="400" height="200"></canvas>

Initialize Chart Using Fetched Data:

<script>
  const ctx = document.getElementById('attendanceChart').getContext('2d');
  const attendanceChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [{{ labels }}],
      datasets: [{
        label: 'Attendance Status',
        data: [{{ attendanceData | replace: '"Present"', 1 | replace: '"Absent"', 0 | replace: '"Late"', 0.5 | replace: '"Leave"', 0.25 }}],
        backgroundColor: 'rgba(54, 162, 235, 0.6)'
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            stepSize: 1,
            callback: function(value) {
              return value === 1 ? 'Present' : value === 0.5 ? 'Late' : value === 0.25 ? 'Leave' : 'Absent';
            }
          }
        }
      }
    }
  });
</script>

This script transforms attendance status into numeric values to be represented on the chart.

Step 6: Customizing Chart Types and Filters

You can build various types of charts depending on your use case:

Options:

Bar Chart: Daily presence overview
Pie Chart: Total days present vs absent
Line Chart: Monthly trends
Stacked Bar Chart: Compare attendance of multiple users (admin view)

Enable filters:

Allow filters by:

Date range
Employee
Department (if applicable)

Use query strings or dropdowns in the portal to control data filters.

Step 7: Admin View – Aggregate Attendance

For HR/Admins:

Show attendance percentage
Total working days vs attended days
List of frequent absentees

Use a separate page to load aggregated data for all users:

{% assign allRecords = entities.attendance %}
{% assign total = allRecords.size %}
{% assign present = allRecords | where: "status", "Present" | size %}

Render a summary using cards and visual KPIs.

Step 8: Adding Security and Permissions

Ensure that:

Users can only see their own data
Admins can see data for all users
Use Web Roles and Entity Permissions in Power Pages to control access

Step 9: Optional Enhancements

Email alerts for absenteeism patterns
Export data as Excel using Power Automate
Monthly heatmaps of attendance
Calendar view with attendance icons
Real-time charts using polling or signalR

Use Case Examples

School Portals: Students/parents can view monthly attendance.
Employee Portals: Track punctuality, calculate leaves.
Training Platforms: Check attendance for certification eligibility.
Volunteer Management: Track event participation.