Build an Employee Engagement Survey Dashboard using ToolJet
Tags: tooljet, javascript, lowcode, beginners
Published: 2024-05-21 13:03:24

## 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](https://github.com/ToolJet/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](https://app.tooljet.com/).
- **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:

![Final Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvupeeqqsl1cow4x6sxe.png)

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](https://docs.tooljet.com/docs/tooljet-db/tooljet-database)** - ToolJet's in-built database that makes data management simple and efficient.

![Employee Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wwvfuqixhzrkdo4859m.png)

## Designing the UI

With the help of ToolJet’s [pre-built components](https://docs.tooljet.com/docs/widgets/overview), 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.

![Header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rf07em41qs720fv4ytzv.png)
_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.

![Adding Charts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryp9og7gtojbnrhxq602.png)

- 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_.

![Add Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cslhd1sdktfq0uflrhi4.png)

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](https://docs.tooljet.com/docs/tooljet-concepts/what-are-queries) 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.

![Fetch Survey Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16yj5zqpehngnifcc5mk.png)

- 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.

![Add Employee Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9ry8ydx03eii4dmgzb3.png)

### 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.

![pieChart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v9op8bj49ashijwpeqc.png)
_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.

![Bar Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ihpvahyxem63t76oukq.png)

### 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.

![Line Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jyqtj4063r79jgt7j73.png)

## 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](https://docs.tooljet.com/docs) or connect with us on [Slack](https://join.slack.com/t/tooljet/shared_invite/zt-2ij7t3rzo-qV7WTUTyDVQkwVxTlpxQqw).