CODEWITHSUNDEEP
javajavascriptjquerycytoscape.js
rusalka
rusalka

Reputation: 1

Cytoscape.js - How to display nodes generated in Java

I want to display graph using data generated on server side of Java EE application. So my question is how to put some data structure (JSONObject) to "elements" section of below code:

$(function(){ // on dom ready

var cy = cytoscape({
container: document.getElementById('cy'),

style: cytoscape.stylesheet()
.selector('node')
  .css({
    'content': 'data(id)'
  })
.selector('edge')
  .css({
    'target-arrow-shape': 'triangle',
    'width': 4,
    'line-color': '#ddd',
    'target-arrow-color': '#ddd'
  })
.selector('.highlighted')
  .css({
    'background-color': '#61bffc',
    'line-color': '#61bffc',
    'target-arrow-color': '#61bffc',
    'transition-property': 'background-color, line-color, target-arrow-color',
    'transition-duration': '0.5s'
  }),

elements: {
  nodes: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'c' } },
    { data: { id: 'd' } },
    { data: { id: 'e' } }
  ], 

  edges: [
    { data: { id: 'a"e', weight: 1, source: 'a', target: 'e' } },
    { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
    { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
    { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
    { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
    { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
    { data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
  ]
},

layout: {
name: 'breadthfirst',
directed: true,
roots: '#a',
padding: 10 }});

Full example can be found here. I don't mind using scriptlet on page with graph logic to invoke some java code which will get me required data. But after that how to put result under "elements" to achieve dynamically generated graph (nodes and edges)?

Upvotes: 0

Views: 640

Answers (1)

Ajit Singh
Ajit Singh

Reputation: 115

It is a simple error with closing braces. Change:

layout: { name: 'breadthfirst', directed: true, roots: '#a', padding: 10 }});

to:

layout: { name: 'breadthfirst', directed: true, roots: '#a', padding: 10 }}); });

i.e., add }); at the end and the graph will show up.

Upvotes: 1

Related Questions