I was looking for a good and free charting component I could use in Angular. I’ve played around with some raw D3 in the past but I didn’t want to re-invent the wheel that much. Fortunately I found the NVD3 library which works on top of D3 to simplify common charting tasks line line charts, bar charts, etc and, even better, somebody’s already created an Angular directive on top of that.

Quite a few dependencies to put in to start with and don’t forget to inject the nvd3 library into your Angular module!

      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.6/angular-nvd3.min.js"></script>
      
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css">

I was looking into this for a different project but as a quick test, I thought I’d create a plotting page to add to the Bristol & Bath Live Parking Data page.

Here’s an example plot of data for Cabot Circus over the last 3 weeks. We can see pretty conclusively from this data that peak time is around 2:30pm pretty much every day so don’t go shopping then! We can also see in this plot that the first 2 weeks were busier. I’m thinking this is probably due to school Easter holidays.

Cabot Circus parking data

Anyway, the Angular-NVD3 directive made this chart pretty easy to build – most of the work was in pulling the data from the database and re-formatting it rather than the chart itself. If you want to look at some more historical parking data yourself, you can find it here

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>