Enhancing Data Visualization with Chart.js and GraphQL API for NextDot

At HOW, we are dedicated to creating unique digital experiences and transforming back-office workflows, leveraging innovative solutions to enhance the way organizations interact with their data. When NextDot, a very promising Greek startup in talent management, approached us, they wanted to improve their data presentation by integrating customizable, interactive charts. Here’s how we partnered with them to leverage their GraphQL API and take their platform to the next level using Chart.js.

Client Overview

NextDot is a dynamic startup specializing in talent management, dedicated to uncovering better ways of personal and professional development. They provide innovative tools that empower companies to monitor and enhance the performance of their teams and professionals. Understanding the importance of experience, they prioritize short-term achievements shaped by real-world practice over long-term development plans.

NextDot values personal traits inspired by role models’ paths rather than following rigid career trajectories. Their focus is on motivating and guiding individuals for personal growth instead of merely assessing and rating skills. By fostering collaborative and enjoyable experiences, they aim to create a supportive environment that encourages team-wide contributions and helps users assess performance trends and compare professionals effectively.

Challenge

NextDot faced a challenge in effectively visualizing complex data. While their GraphQL API offered detailed insights into professionals, teams, scores, and skills over time, the team wanted to present this information in a clear and concise manner. To address this issue, the NextDot team required:

• Interactive, filterable charts to display performance trends and allow customization based on time period, skills, professionals, and teams.
• Tools for comparing data across multiple professionals or entire teams.

Solution

At HOW, we focused on delivering an interactive front-end built with Chart.js, fully integrated with NextDot’s GraphQL API for dynamic data fetching and visual customization. Here’s how we approached the project:

1. Dynamic Data Integration

We used NextDot’s GraphQL API to fetch performance metrics dynamically. The data could be filtered and displayed based on user preferences, including time period, individuals and teams and specific skills or metrics like growth, performance, development etc.

This real-time data fetching allowed us to build an intuitive experience where users could explore and adjust filters to view tailored visualizations.

2. Flexible Chart Types

To best represent the different data views NextDot required, we implemented a variety of chart types:

• Line charts: For tracking performance and growth over time.
• Multi-line charts: For comparing multiple professionals across key metrics like scores and skill growth.
• Spider charts: To visualize an individual’s or a team’s skill set across various performance areas.
• Stacked bar charts: For comparing team-wide contributions, showing how each member’s performance impacts the overall results.

3. Customization with Filters

Leveraging GraphQL’s querying power, we built highly customizable charts. The charts were designed to be interactive, providing users with real-time feedback as they adjusted filters. This functionality allowed users to explore trends, zoom into data points, and gain insights into the performance of teams and individuals with ease. Users could filter the charts based on:

• Professionals, teams, or roles: Focus on specific individuals or compare group performance.
• Time periods: Analyze data over weeks, months, or quarters.
• Skills and metrics: Adjust the data dimensions to focus on the information that matters most.

Results

The integration of Chart.js with NextDot’s GraphQL API provided immediate improvements in data representation:

• Enhanced decision-making: With clearer performance trends and professional comparisons, stakeholders could make more informed decisions.
• Increased engagement: The interactive and customizable charts encouraged users to dive deeper into the data.
• Scalability: The solution was designed to expand with NextDot’s future needs, supporting additional filters, metrics, and data views.

Conclusion

At HOW, our priority is to ensure our clients are highly satisfied with the solutions we deliver. In partnership with NextDot, we leveraged Chart.js and their GraphQL API to create an elegant and scalable solution that enhanced their talent management platform.

---

Interested in elevating your data visualization capabilities? Contact us to discuss how we can help bring your dream idea to life.