JavaScript Graphs

This library presents interactive AJAX graphs to be included in web pages to display RRD data.

Requires:

• prototype.js ( prototype )
• jquery.js ( jquery )
• jquery.flot.js ( flot )
• jquery.noConflict.js ( helper file to prevent prototype/jquery conflicts )

Files:

• serialization.js ( serializes javascript objects using type metadata )
• ajaxglobals.js ( helper functions requiring prototype )
• ajaxgraph.js ( base graph classes )
• ajaxtimegraph.js ( graphs plotted against time )
• opsviewgraphs.js ( opsview specific, and rrd data adapter )

Create a global data adapter:

var graphDataAdapter = new OpsviewGraphs.DataAdapter("/rrdfetch/");

Create graphs (on page load):

$J(document).ready(function() {
  // init graph
  var g = new OpsviewGraphs.Graph($('graph'), graphDataAdapter, graphOptions);
});

Either initialize graph with series:

g.setTitle("A graph");
g.setYLabel("Seconds");
g.addSeries("Series name");

Or load graph from a state string:

g.loadState("...");

Optionally make resizable and closable (requires resizing.js and closing.js repectively)

new ResizableElement($('graph'), 376, 250, 2000, 1024);
new ClosableElement($('graph'));

Be aware: The graphs methods are coded to be “event driven”, so addSeries use to automatically call requestAllData(), but this was not optimal when loading a graph for the first time.

To override default options pass an options object to the graph constructor (3rd argument) with any of the following values, which will be used to extend/override the default options object.

To override any of the default flags pass an options object containing the “flags” member to the graph constructor containing any of the following boolean values:

var graphOptions = {
        // flags for turning features on and off
        flags: {
          showTooltip: true, // display tooltip
          showLegend: true, // display legend on graph
          // titlebar
          titleBar: true, // display title bar
          titleEditable: true, // title is edittable
          // customize y axis
          yLabel: true, // display y axis label
          yLabelEditable: true, // y axis label is editable
          // customize x axis
          xLabel: true, // display x axis label
          xLabelEditable: true, // xaxis label is editable
          xOverview: true, // show overview bar along x axis
          // customize toolbar
          toolBar: true, // display toolbar
          xPanningButtons: true, // display x panning buttons
          rescaleAxisButton: true, // display rescale axis button
          zoomButtons: true, // display zoom buttons
          linkDropDown: true, // display link drop down
          // customize graph options drop down
          optionsDropDown: true, // display options drop down
          graphOptionsControl: true, // display graph options control
          graphTypes: true, // display different graph types
          xUnits: true, // display list of x units in options
          yUnits: true, // display list of different y units in options drop down
          addSeriesControl: true, // display box for adding a series
          seriesListControl: true, // display series list
          changeSeriesNames: true, // series names are editable
          removeSeriesButtons: true // series can be removed from the graph
        }
};

All labels are defined in the default options object, and so can be overriden as by passing values as follows to the graph contructor in the options object:

var graphOptions = {
 // textual/html labels
        labels: {
          // in ajaxgraph.js
          loadingIndicator: "Loading...",
          promptYLabelMessage: "Please enter a label for the y axis:",
          menuDown: "(+) Graph options",
          menuUp: "(-) Graph options",
          closeDropDown: "[Close]",
          clickToEdit: "Click to edit",
          zoomTooltip: "Click to zoom",
          panLeft: "&lt<",
          panRight: ">>",
          rescaleYAxis: "Autoscale Y Axis",
          rescaleYAxisButton: "[Autoaxis]",
          removeSeries: "[Remove]",
          removeSeriesTitle: "Remove from graph",
          revertSeriesButton: "[Use fullname]",
          optionsTitle: "Options:",
          graphType: "Graph type",
          graphTypes: {
            lines: "Line",
            points: "Scatter",
            linesAndPoints: "Line (with points)",
            bars: "Bar",
            stacked: "Stacked"
          },
          addSeriesTitle: "Add Series:",
          panLeft: "<<",
          panLeftTooltip: "Pan left",
          panRight: ">>",
          panRightTooltip: "Pan right",
          autoUnits: "Automatic",
          connectionError: "Connection error",
          linkButton: "Link",
          linkDropDownText1: "Paste link in email or IM",
          linkDropDownText2: "Paste HTML to embed in website",
          goLink: "Go",

          // in ajaxtimegraph.js
          snapToNow: "Snap to now",

          // in opsviewgraphs.js
          addSeriesButton: "Add",
          addHost: "Host",
          addService: "Service",
          addMetric: "Metric",
          loading: "Loading...",
          invalid: "Invalid",
          invalidSeries: "Host, service, metric combination does not exist.",
          showThresholds: "[Show thresholds]",
          hideThresholds: "[Hide thresholds]"
        },
};

These urls are needed for the widget to function properly. “bookmarkLink” and “embedTag” can include the markers:

{{state}}, {{width}}, and {{height}}

These are replaced with the state string, current width and height (in pixels) of the graph.

urls: {
          // in opsviewgraphs.js
          seriesAutocompleter: "http://..../search/performancemetric/", // add series autocompleter
          loadingIcon: "busy.png", // autocompleter loading icon
          invalidIcon: "invalid.png", // invalid series icon

          // in ajaxgraph.js
          svgYLabel: "ajaxgraph-ylabel.svg", // yaxis special svg
          connectionErrorIcon: "connection-error.png", // connection error icon in toolbar
          bookmarkLink: 'http://...?state={{state}}', // url to use for Link drop down
          embedTag: "<iframe src='{{state}}'></iframe>" // url to use for Link drop down

        }

This defines the list of set zoom level buttons that are displayed on the toolbar. The width attribute is the x-axis width for this zoom level, and the height attribute would be the height of yaxis. Either or both of width and height may be defined.

// zoom buttons
        zooms: [
          {label: "1h", width: 60*60*1000},
          {label: "1d", width: 24*60*60*1000},
          {label: "1w", width: 7*24*60*60*1000},
          {label: "1M", width: 30*24*60*60*1000},
          {label: "4M", width: 4*30*24*60*60*1000},
          {label: "1y", width: 365*24*60*60*1000}
        ],

These are the various units that the x and y axis labels can be displayed in. When options.flags.x/yUnits is set users will be able to use the graph options drop down to choose from one of these units, or choose automatic which will automatically choose the best units for the scale based on the min and max values below. Each unit has a name, a function that takex a number and returns that number is a formatted string, and optionally min and max values that the unit is suitable for.

 // units
        units: {
          // list of all units
          xaxis: [
            // in form { name: '<Name of unit>',
            //                 f: function(num,axes) { <returning num as string with unit> }
            //                 [ min: <min value suitable for>, ] [ max: <max unit suitable for>, ]
            // e.g. { name: 'None', f: null },
            //      { name: 'Milliseconds', f: function(n,a) { return (n*1000).toFixed(3) + "ms"; },
            //        min: 0.00001, max: 1 },
            //      { name: 'Seconds', f: function(n,a) { return (n).toFixed(3) + "m"; },
            //        min: 1, max: 60 }
            //      { name: 'Minutes', f: function(n,a) { return (n/60).toFixed(3) + "mins"; },
            //        min: 60, max: 60*60 },
            //      { name: 'Hours', f: function(n,a) { return (n/60/60).toFixed(3) + "hours"; },
            //        min: 60*60, max: 60*60*24 }
          ],
          yaxis: [
            // same as x
            // e.g.
            // { name: 'Kilo', min: 100, f: function(n,a) { return sigFigs(n/1000,3)+'k'; } },
            // { name: 'Mega', min: 10000, f: function(n,a) { return sigFigs(n/1000000,3)+'M'; } },
            // { name: 'Giga', min: 10000000, f: function(n,a) { return sigFigs(n/1000000000,3)+'G'; } }
          ],
   }

A graph group is a collection of graphs that allows certain methods to be invoked for a collection of graphs at once. It also provides state serialization and deserialization for multiple graphs at once. The constructor takes a single argument: a function that will create and return a new graph. If there are more graphs in the state string, than in the group, a call to “loadState” will use this constructor function to make any additional graphs as they are required to restore state from a state string.

var allGraphs = new AjaxGraphs.GraphGroup(function() {
  // create container
  var e = $AG.createElement('div', { id: 'anothergraph'+$AG.uuid() });
  e.style.width = "500px"; e.style.height = "300px";
  $('moreGraphs').appendChild(e);

  // create a graph
  var g = new OpsviewGraphs.Graph(e, graphDataAdapter, graphOptions);
  new ResizableElement(e, 300, 250, 2000, 1024);

  // return it
  return g;
});

// Add a graph
allGraphs.children.add(graph);

// Remove a graph
allGraphs.children.remove(graph);

// Save state of all graphs to a state string
var state = allGraphs.saveState();

// Load all graph's from state string
$J(document).ready(function() {
  // revert graphs to saved state
  allGraphs.loadState("...state....string...");
});

// Add a series to all graphs
allGraphs.addSeries("host::service::metric");

Add graphing options into ajaxgraphs.js.

Programmatically add elements. Add an event observe to see if there are changes and execute a callback to make the changes. See commit 3620 for an example of adding a new option.

There are catches that are done in the callback section of ajaxgraph.js. However, these can catch errors that are called within a callback! Check for the success flag and see what the data returns. If the data returns a string, there was some error in Javascript which is blocked. This has been changed to throw to the browser, so check browser error console for more information.