Server view front end notes - Multi-Axis/multi-axis-graphs GitHub Wiki

##Server view front-end This document presents the techniques used to draw server metrics (cpu load, memory usage etc.) into graphs. The main component is NVD3 which is an extension of D3. JQuery is also used for Ajax requests.

graph.js

Graph.js is the main component that glues all the other JavaScript files together. It has the logic for fetching data, setting up start and end points for a new forecasts, threshold management and calling draw functions from line chart

lineChart.js

NVD3 offers quite a few models and line chart is one of them. Line chart offers ready made configurations for your chart such as:

useInteractiveGuideline(boolean) A vertical line that follows your cursor over the chart. Makes it easier to pin point yourself in relation to the x-axis (link).

showLegend(boolean) A way to click different datasets on and off from the top right corner (link).

showYAxis(boolean) Enable y-axis (link).

showXAxis(boolean) Enable x-axis (link).

showTooltip(boolean) A box that also follows your cursor and tells the exact x and y values at that point (x and y-axis ticks only show the ball park of data)(link).

In this project we use all of the above.

Line chart also uses line.js and scatter.js. Line.js defines the lines that are drawn to show data. Scatter.js gives the scale for x and y values.

All of the above and more are also used by different NVD3 models (examples).

Interactive layer

The interactiveLayer.js is a component for interactive functionality primarily with your mouse. However it also provides an easy access to the chart and its x and y values. For these reasons we added the configuration of forecast start and end points to the interactiveLayer. The rendering of threshold is also in there even though (for now atleast) the configuration is done with an editable field.

Utils

Utils.js offers all-around functions such as browser window size support for various browsers, themes and pjax requests.