Traditionally, all of the UI charting done at my company was done through HighCharts. However, as the charts become more complex, custom solutions became necessary and leveraging the HighCharts api to what we require, became more of a hassle than a convenience. After discussion with the product team about the scope of charts to come in future releases, it was decided that it is in our best interest to start becoming familiar with d3 in preparation for what is to come.
I was trusted to research our options, the best tutorials to learn d3 as well as possible existing solutions to fit our need. Information and tutorials were abundant, but I’ve always found that I learn much better when get my hands dirty by reading the docs and trying to build something. I began with a simple rectangle and built my knowledge from there.
Part of my research was how to integrate d3 into our current Angular application. Should we use an existing library such as nv-d3, which already has some Angular integration or build something of our own? Since we already HighCharts throughout our app, what we really needed were custom directive which we have to build out ourselves.
The first feature to require d3 consisted of several small sub metric boxes each containing a sparkline and a large line chart with the current data in focus. The main chart consisted of two different shades, custom labeling, and a predetermined line representing a data cutoff date.
To accomplish this, I created a custom directive that wraps the d3 object and watches for changes in data or window resize. On change in either parameter, the main render function would be called with the updated values.
Circumstantially, there are a few dependencies that this directive relies on so recreating a complete jsfIddle would take more time than I currently have, however I have posted the complete chart rendering function in this well commented fiddle.
To give you an understanding of what this looks like put together, here’s a screenshot of the finished charts.