In this example the network is supplied as a Cytoscape exportable JSON file, which is then parsed, passed to the Web Service to retrive sub-cellular locations and then displayed in the Cerebral style

Place the fllowing line within the HTML page:

<!-- Div with an unique identifier -->
<div id="cy"></div>
                                

The following JavaScript can also be placed within the HTML directly or within an included *.js file:

<!-- Map of genes: id_gene: name_gene. The id_gene can be any of the accepted ids on the subcellular localisation WebService :InnateDB,Ensembl,Entrez,UniProt -->
var genes = {"ENSG00000160691": "SHC1", "ENSG00000142192": "APP", "ENSG00000169783": "LINGO1", "ENSG00000105290": "APLP1"};
<!-- List of Cytoscape objects: only edges.  -->
var edges = [
  {
    "data": {
      "id": "375184",
      "name": "physical interaction",
      "source": "ENSG00000142192",
      "target": "ENSG00000160691",
      "idgroup": "375184"
    },
    "group": "edges"
  },
  {
    "data": {
      "id": "367978",
      "name": "direct interaction",
      "source": "ENSG00000142192",
      "target": "ENSG00000105290",
      "idgroup": "367978"
    },
    "group": "edges"
  },
  {
    "data": {
      "id": "26032",
      "name": "interologs mapping",
      "source": "ENSG00000142192",
      "target": "ENSG00000169783",
      "idgroup": "26032"
    },
    "group": "edges"
  }
];

var elements = [];
<!-- Ajax function to query the webservice to get the subcellular localisation from InnateDB.  -->
$.ajax({
    dataType: "json",
    async: false,
    type: "GET",
    url: "http://www.innatedb.com/cerebralLocalizationWS.do",
    data: 'xref=Ensembl&ids=' + JSON.stringify(Object.keys(genes)).replace('\[', '').replace('\]', '').replaceAll('"', ''),
    success: function(data){
        for (d in data) {
            var obj = {
                data: {
                    id: d,
                    name: genes[d],
                    localization: data[d],
                    color: defaultNodeColor
                },
                group: "nodes"
            };
            elements.push(obj)
        }
        elements = elements.concat(edges);
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        console.log(errorThrown);
    }
});
<!-- Inizialization of the Cytoscape_object.  -->
$('#cy').cytoscape({
    layout: options,
    showOverlay: false,
    zoom: 1,
    style: cerebral_style,
    elements: elements,
    ready: function() {
        cy = this;
        cerebral_ready(cy);
    }
});