nvd3-tags: A tiny library for making charts from CSV data

Fri, Feb 27, 2015

Fernando Borretti
Fernando Borretti

In many of our projects, we've had the need of building tons of charts. We used to use jqPlot for chart creation, but then switched to NVD3, a library that takes D3, powers it down, and offers a simple interface to creating the basic types of charts.

Not all apps are SPAs that render everything client-side and use the server solely as an API, however. For more traditional apps that use server-side templating, you basically have two options:

  • Add an API (or use the existing one), and some JavaScript to pull data from it and create the charts. This can be complicated if the API uses a different authentication method than the regular app.
  • Render the data into JSON from the server-side template, then use JavaScript to render that data. This is practically a sin.

And then there's the third option, nvd3-tags: Render the data into a simple CSV with server-side templating, then let our code render the charts from that data. It uses custom HTML tags to represent the charts and some simple JavaScript to scan the data into NVD3 charts.