One last step needs to be done to finally see the charts of the log files, that is, to add the chart directives to the index.html page:

<!-- index.html -->
<div class="col-lg-6" ng-repeat="log in logs">
  <h3>{{ log.name }}</h3>

  <bar-chart class="chart blue" data="log.data" start-date="time.startDateTime" end-date="time.endDateTime" cur-date="time.currentDateTime">
  </bar-chart>
</div>

To better understand the cursor position and current zooming level, we will output the current value of the cursor and the first and last date from the current filter to the navigation bar:

<nav class="navbar navbar-default">
  <div class="navbar-text">
    <span>Date/Time Filter:</span>
    <span>{{ time.startDateTime | date : 'dd.MM.yyyy HH:mm' }}</span> -
    <span>{{ time.endDateTime | date : 'dd.MM.yyyy HH:mm' }}</span>
  </div>
  <div class="navbar-text">
    <i>Current Date/Time: {{ time.currentDateTime | date : 'dd.MM.yyyy HH:mm' }}</i>
  </div>
</nav>

In the preceding code, we use the built-in angularjs date filter to create a more readable output of the DateTime object.

If we now run the server and open the application, we will see four charts that are automatically updating in real time. We can see that zooming or panning in one chart also affects the current zoom and panning level in other charts. The reason for this is that all chart directives use the same reference for the startDate and endDate filter attributes as well as the curDate attribute. Therefore, the cursor moves and highlights in all charts simultaneously because of angularjs‘ two-way-binding. Pretty neat, isn’t it?

We used Bootstrap not only for it’s nice visual template, but also for the built-in grid system. As a logical step, we want to make our charts responsive. This can be easily achieved by watching the window size in the chart directive and redrawing each chart when the window size changes:

/* src/chart.js → Chart Directive */
// Watch the window for resizing
angular.element($window).bind('resize', function(){

  // Set the width of the chart to the width of the parent element
  chart.width(element[0].parentElement.offsetWidth);
  // Redraw the chart
  chart.redraw();
});

Nice, now the charts adapt automatically according to the column size of the grid.

Let’s open the application and take a look. The filters and cursors now play together throughout the whole application. Thanks to angularjs, a web designer with no JavaScript knowledge can easily arrange the charts and write the HTML code for this page: