We had many customers asking for better reporting tools and more intuitive visualization of their testing usage. At CrossBrowserTesting, we always keep an ear out for customer feedback, and we actually implement the really good suggestions into our product whenever we can. This was clearly something that we had to pursue.
Since our front-end is built on Angular we had a few requirements for this project in terms of its scope and the types of libraries we could consider for this task.
When we began the process, we were mainly deciding between 3 libraries:
In the end, it ultimately came down to the following requirements:
– Ease of implementation – Probably the most frustrating part of open-source development is when you find a great library with terrible/hard-to-understand documentation that makes using it next to impossible. We wanted something that included docs, simple quick-start tutorials, etc. that would make it easier on us.
– A focus on implementation with Angular – While we could build our own Angular directives to wrap around a charting library, we greatly preferred to have one pre-built.
– Powerful customization – If we need borders, we should be able, but not required, to put them on the chart. The same goes for legends, titles, hover states, click handlers, etc.
– A relatively recent library that we’re reasonably sure is maintained – We can’t use a library that hasn’t been updated in several years, or else we run a high risk of running into errors that we don’t have the time to fix.
After considering all of these factors, we ended up using Angular-Chart.js.
Out of all the charting tools we used, it was by far the easiest to set up. The documentation was actually the most difficult part of the project because the examples were too simple and didn’t provide the additional context that would’ve made several components — such as setting up the correct axes-scaling — a more intuitive process.
Angular-Chart.js was, as the name implies, an Angular implementation of Chart.js. Again, one of the key attributes we were looking for in a charting library was an Angular implementation, and in this regard, Angular-Chart.js performed flawlessly.
The library strikes an intuitive balance between ease-of-use and customization — we were easily able to turn the chart into exactly what we needed, and it only took us a couple of days. The finer points of the charts are still a bit confusing, but being able to understand the library enough to implement it fully as we needed was part of what helped us to choose Angular-Chart.js.
In terms of power and customization, Angular-Chart.js is second-to-none. We were actually able to use a pie chart to create a gauge that tells our users exactly how many of their parallel tests are being run at once. That is, we used a chart designed for showing percentages and turned it into a clean-looking counter. This is exactly the type of customization we were looking for in an open-source charting framework.
In the end, the biggest challenge was using the documentation for Chart.js to plug holes in our knowledge of Angular-Chart.js. It took two iterations to complete what is now our current version of our reporting usage page, though we do still have plans for more charting implementation.
On that note, we have a pretty good idea of how documentation could be improved at this point. If anyone on the Angular-Chart.js team wants some suggestions for how to help users onboard more efficiently, we’d be happy to help out if you give us a call — we ♥ Open Source projects.
Thanks again to our users for another amazing suggestion. We hope you enjoy our new visual reporting built with Angular-Chart.js and look forward to hearing more feedback from the testing community.