networkmap.js

A library for visualizing flows in networks. The most common use case would be network weathermaps. Networkmap.js is compleatly running on the clientside, configuration can either be done by loading a JSON file or building the weathermap directly in the browser with the API.

Simple Example

Initialize a networkmap and load a configuration file from the server. Here is the JSON file used in the example.

  var map;
  window.addEvent('load', function(){
    map = new networkMap.Graph('example1').load('assets/weathermap/example1.json');
  });

Register a Datasource

By regitering a new datasource it is possible to load custom data into the graph. The datasource is a function that takes two parameters url and requests. requests is an array of request object. Each of the request objects has two properties link and callback. request.link is a instance of networkMap.LinkPath, and request.callback should be called to update the LinkPath.

networkMap.registerDatasource('example', function(url, requests){
  requests.each(function(request){
    // Example on how to get the node to get node specific data
    //request.link.getNode().options.id;

    new Request.JSON({
      url: 'assets/request/' + request.link.getNode().options.id + '/' + request.link.options.name,
      onSuccess: function(response){
        request.callback({
          url: url,
          request: request.link,
          value: response.value,
          realValue: response.realValue
        });
      }
    }).get();

    
  });
});

var map;
window.addEvent('load', function(){
  map = new networkMap.Graph('example2', {datasource: 'example'}).load('assets/weathermap/example2.json');
});

Adding Custom Event Handlers

In this example the normal click event and hover event is replaced.
The click function takes two arguments, e and link. e is an event, and link is an instance of networkMap.LinkPath from which it is posssible to access link and node information.
The hover function takes three arguments. e and link which is the same as above, and el which is a DOM element where it is possible to inject your own HTML.

networkMap.registerEvent('click', function(e, link){
  window.location.href = 'http://example.com/fqdn/' + link.getNode().options.id + '/if/' + link.options.name; 
}); 

networkMap.registerEvent('hover', function(e, link, el){
  // remove the original click event
  el.removeEvents('click'); 
        
  // set custom html in the hover popup
  el.set('html', '' + link.options.name + ''); 
});

var map;
window.addEvent('load', function(){
  map = new networkMap.Graph('example3').load('assets/weathermap/example1.json');
});