In the previous sections, we wrote data loading, parsing, and grouping services; now, it's time to use them in a simple example to display the logs. We want to display the number of visitors of our application in an interval of 5 minutes. We define the appearance of the logs directly in the controller as follows:
/* src/app.js */
// Application Module
angular.module('myApp', ['myChart'])
// Main application controller
.controller('MainCtrl', ["$scope", "d3", "SimpleHttpLoader", "StringParser", "Classifier", function ($scope, d3, SimpleHttpLoader, StringParser, Classifier) {
// Formats date strings 22/Nov/2014:01:56:00 +0100
var formatter = d3.time.format("%d/%b/%Y:%H:%M:%S %Z");
$scope.log = {
// Source of the log file
src: 'files/access2.log',
// Data entries
data: [],
// Maps response array to readable JSON object
map: function(d) {
return {
time: +formatter.parse(d[2]),
ip: d[0],
request: d[3],
status...