Build an Employee Engagement Survey Dashboard using ToolJet

Introduction

Employee engagement is a critical factor in the success of any organization. It reflects how committed and motivated employees are towards their work and the organization’s goals. To effectively measure and understand employee engagement, organizations often conduct surveys that capture valuable insights from their workforce. However, collecting data is only the first step. Analysing and presenting this data meaningfully is essential for making informed decisions that enhance employee satisfaction and productivity.

This tutorial will walk you through creating an Employee Engagement Survey Dashboard using ToolJet, an open-source low-code platform. By the end of this tutorial, you will have a fully functional dashboard that visually represents your survey results, enabling you to identify trends, areas of improvement, and actionable insights.

Prerequisites:

• ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
• Basic understanding of JavaScript : Familiarity with JavaScript concepts will help you follow the tutorial more effectively.

Here’s a quick preview of what our final dashboard looks like:

This tutorial will use the employee survey data which contains responses to various questions, such as job satisfaction, work environment, and compensation.

The employee data will be stored in a table in the ToolJet Database - ToolJet's in-built database that makes data management simple and efficient.

Designing the UI

With the help of ToolJet’s pre-built components, we will design a simple UI for our application.

The first step will be creating an app. Log in to your ToolJet account to access the dashboard. Click on Create an App button, and let's name our app Employee Engagement Survey.

Once our app is ready, let’s dive into creating the UI.

We will start by creating the header.

1. Creating the Header

• Drag and drop the Text Component from the components library onto the canvas.
• Rename the Text Component to headerText, and change its Data property to Employee Engagement Survey.
• In the Styles section, change the font size to 25 and the font weight to bold.

Renaming components is an effective way to refer to components as we progress further while creating the application.

2. Creating the Dashboard Panel

In this step, we will create the layout of our dashboard. To design the dashboard, follow the steps below:

• Drag and drop the Container component onto the canvas. Containers are used to group components.
• Once we have the Container component in place, drag and drop three Chart components and place them next to each other. Rename them pieChart, barChart, and lineChart, respectively.
• Enable Plotly JSON Chart Schema for all three. We will modify the JSON Description according to the desired chart later in the tutorial.
• To add neat borders to the Chart components, adjust their Box shadow properties under the Styles tab.

• Drag and drop the Table Component onto the canvas just below the charts. The Table will display the data stored in the ToolJet Database.
• Rename the Table component to employeeSurveyTable.

The app UI is now ready. It’s time to add some functionality.

Fetching and Displaying the Data in the Dashboard

Let’s fetch and display our data in our ToolJetDB on the table.

1. Fetching the Data and Displaying it on the Table

• Open the Query Panel at the bottom of the screen, click the +Add button and create a new ToolJet Database query and rename it to fetchEmployeeData.
• Select employeeSurveyData as the Table name and List rows as the Operations.
• To ensure that the query runs every time the application loads, enable Run this query on application load?
• Click the Run button to see the data fetched from the employeeSurveyData database.

• Once we can fetch the data, select the employeeSurveyTable component, and in the Data property, add the following code: {{queries.fetchEmployeeData.data}}. You should now see the data returned by the query on the Table component.

2. Displaying the Data through Charts

Next we'll display data on the charts.

a.) Pie Chart

First, we will display data based on “Job_Satisfaction” through a Pie Chart. We must convert the data we fetched into a Plotly JSON Chart Schema for a pie chart.

• Expand the Query Panel, create a new Run JavaScript Code query, and rename it to pieChart.
• In the code editor, paste the following code:

// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generatePlotlyPieChartData(data) {
  // Step 1: Extract and count job satisfaction values
  const jobSatisfactionCounts = data.reduce((acc, curr) => {
    const satisfaction = curr.job_satisfaction;
    if (acc[satisfaction]) {
      acc[satisfaction]++;
    } else {
      acc[satisfaction] = 1;
    }
    return acc;
  }, {});

  // Step 2: Prepare labels and values for the pie chart
  const labels = Object.keys(jobSatisfactionCounts);
  const values = Object.values(jobSatisfactionCounts);

  // Step 3: Generate Plotly pie chart schema
  const plotlyPieChartSchema = {
    type: 'pie',
    labels: labels,
    values: values,
    textinfo: 'percent',
    insidetextorientation: 'radial'
  };

  return plotlyPieChartSchema;
}

// Generate Plotly pie chart data
const plotlyPieChartData = generatePlotlyPieChartData(data);

// converts the plotlyPieChartData into a string
const finalData = JSON.stringify(plotlyPieChartData);

return finalData;

This code turns the data in the 'Job_Satisfaction' column into the format that is accepted by a Plotly pie chart.

• To ensure that the query runs every time the application loads, enable Run this query on application load?
• Click the Run button to see the data formatted for a pie chart.
• Next, select the pieChart component and in the JSON Description of the pieChart component, replace the value under the "data" key with {{queries.pieChart.data}}.
• If you follow the above steps correctly, you can see the data displayed via a pie chart.

For better understanding, in the Properties panel of pieChart, change the Title to Employee Satisfaction Index.

b.) Bar Chart

Next, we will display data based on “Work_Environment” through a Bar Chart. We must first convert the data we fetched into a Plotly JSON Chart Schema for a bar chart.

• Expand the Query Panel, create another Run JavaScript Code query, and rename it to barChart.
• In the code editor, paste the following code:

// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generateWorkEnvironmentBarChartData(data) {
  // Step 1: Extract and count job satisfaction values grouped by work_environment
  const workEnvironmentCounts = data.reduce((acc, curr) => {
    const workEnvironment = curr.work_environment;
    if (acc[workEnvironment]) {
      acc[workEnvironment]++;
    } else {
      acc[workEnvironment] = 1;
    }
    return acc;
  }, {});

  // Step 2: Prepare x (work environment levels) and y (counts) for the bar chart
  const x = Object.keys(workEnvironmentCounts);
  const y = Object.values(workEnvironmentCounts);

  // Step 3: Generate Plotly bar chart schema
  const plotlyBarChartSchema = {
    type: 'bar',
    x: x,
    y: y,
    marker: { color: 'blue' }
  };

  return plotlyBarChartSchema;
}

// Generate Plotly bar chart data
const plotlyBarChartData = generateWorkEnvironmentBarChartData(data);

// converts the plotlyBarChartData into a string
const finalData = JSON.stringify(plotlyBarChartData);

return finalData;

This code turns the data in the 'Work_Environment' column into the format that is accepted by a bar chart.

• To ensure that the query runs every time the application loads, enable Run this query on application load?
• Click on the Run button; you should now see the data based on the “work_environment” column and in a format accepted by a bar chart.
• Next, in the JSON Description of the barChart component, replace the value under the "data" key with {{queries.barChart.data}}.
• In the Properties panel, edit the Title to Work Environment Index for better reference.
• If you follow the above steps correctly, you can see the data in the "Work_Environment" column displayed via a bar chart.

c.) Line Chart

Lastly, we will display data based on “Compensation” through a Line Chart. We must first convert the data we fetched into a Plotly JSON Chart Schema for a line chart.

• Expand the Query Panel, create a new Run JavaScript Code query, and rename it to lineChart.
• In the code editor, paste the following code:

// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generatePlotlyLineChartData(data) {
  // Step 1: Extract and count job satisfaction values grouped by compensation
  const compensationCounts = data.reduce((acc, curr) => {
    const compensation = curr.compensation;
    if (acc[compensation]) {
      acc[compensation]++;
    } else {
      acc[compensation] = 1;
    }
    return acc;
  }, {});

  // Step 2: Prepare x (compensation levels) and y (counts) for the line chart
  const x = Object.keys(compensationCounts);
  const y = Object.values(compensationCounts);

  // Step 3: Generate Plotly line chart schema
  const plotlyLineChartSchema = {
    type: 'scatter',
    mode: 'lines+markers',
    x: x,
    y: y,
    marker: {color: 'blue'},
    line: {shape: 'linear'}
  };

  return plotlyLineChartSchema;
}

// Generate Plotly line chart data
const plotlyLineChartData = generatePlotlyLineChartData(data);

// converts the plotlyLineChartData into a string
const finalData = JSON.stringify(plotlyLineChartData);

return finalData;

This code turns the data in the 'Compensation' column into the format that is accepted by a line chart

• To ensure that the query runs every time the application loads, enable Run this query on application load?
• Click on the Run button to see the data based on the “compensation” column and in a format accepted by a line chart.
• Next, in the JSON Description of the lineChart component, replace the “data” value with {{queries.lineChart.data}}.
• Edit the Title to Compensation Index in the Properties panel for better understanding.
• If you follow the above steps correctly, you can see the data displayed based on "Compensation" via a line chart.

Conclusion

Congratulations, you have successfully created an Employee Engagement Survey Dashboard. You can customise this dashboard according to your needs by utilizing other pre-built components in ToolJet. To know more about the capabilities of ToolJet, look at the official ToolJet docs or connect with us on Slack.