# Wiki Discussion: Generating Cytoscape.js graphs with SWI-Prolog

**URL:** <https://swi-prolog.discourse.group/t/wiki-discussion-generating-cytoscape-js-graphs-with-swi-prolog/2816>\
**Category:** Wiki Discussion\
**Created:** [August 23, 2020, 11:22am UTC](https://swi-prolog.discourse.group/t/wiki-discussion-generating-cytoscape-js-graphs-with-swi-prolog/2816 "2020-08-23T11:22:24Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![EricGT](https://avatars.discourse-cdn.com/v4/letter/e/f1d935/32.png) [@EricGT](https://swi-prolog.discourse.group/u/EricGT)\
**Post date:** [September 11, 2020, 5:08pm UTC](https://swi-prolog.discourse.group/t/wiki-discussion-generating-cytoscape-js-graphs-with-swi-prolog/2816/6 "2020-09-11T17:08:04Z")

</div>

Another example.

This one passes the data as [JSON](https://www.json.org/json-en.html) and not as JSON wrapped with a JavaScript variable. This is important because JSON is much easier to validate as input when being accepted for use on a web site. With SWI-Prolog the validation of the JSON can be done with DCGs and quasiquotations. ([ref](https://swi-prolog.discourse.group/t/is-there-a-way-to-go-from-html-to-the-prolog-representation-of-the-html/2901))

Uses  
a. JavaScript [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).  
b. JavaScript [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

This has two buttons that will display data in the Internet browser console. F12 for Chrome, FireFox or Edge.

1. Show the same JSON data used by [cytoscpae()](https://js.cytoscape.org/#notation/elements-json)
2. Demonstrates how to select values from the Cytoscape.js objects using JavaScript [array map](https://www.w3schools.com/jsref/jsref_map.asp)

This is just code for demonstration purposes; it has not been enhanced for production use.

Since this code uses JavaScript fetch, a server is required to pass the files to the Internet browser. If you are on Windows and install [node.js](https://nodejs.org/en/) you can start the server by clicking on `http_server.lnk`, then access the page as noted by the node.js startup messages.

> **Details - Click triangle to expand.**
>
> You will need to create `http_server.lnk` with the properties
> 
> Target: `C:\Windows\System32\cmd.exe /k "http_server.bat"`  
> Start in: Clear field so it is empty
> 
> http\_server.bat
> 
> ```prolog
> SET PATH=%ProgramFiles%\nodejs;%AppData%\npm
> http-server --cors
> 
> ```
> 
> index.html
> 
> ```html
> <!DOCTYPE html>
> <html>
> <head>
> <title>Cytoscape.js - Example - pass data as JSON</title>
> <link rel="stylesheet" href="style.css">
> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.2/cytoscape.min.js" integrity="sha512-PqivlaNWoXvHYlvku80fbWO/yBiRmGhISj5uVdAodyqsGprDcVZy6aecJDVNE0fIIE/YeiOzp5yJTR5ZjFlR4Q==" crossorigin="anonymous"></script>
> <script src="script.js" defer="defer"></script>
> </head>
> 
> <body>
> <div id="cy"></div>
> <input type='button' id='showJson' value='Show JSON'>
> <input type='button' id='showPositions' value='Show Positions'>
> </body>
> 
> </html>
> 
> ```
> 
> style.css
> 
> ```css
> #cy {
> width: 100%;
> height: 100%;
> position: absolute;
> top: 0px;
> left: 0px;
> }
> #showJson {
> font-size: 40px;
> font-weight: bold;
> width: 10%;
> height: 5%;
> position: absolute;
> top: 5%;
> right: 80%;
> }
> #showPositions {
> font-size: 40px;
> font-weight: bold;
> width: 10%;
> height: 5%;
> position: absolute;
> top: 15%;
> right: 80%;
> }
> 
> ```
> 
> script.js
> 
> ```javascript
> Promise.all([
> fetch('/elements.json'),
> fetch('/style.json'),
> fetch('/layout.json')
> ]).then(function (responses) {
> return Promise.all(responses.map(function (response) {
> return response.json();
> }));
> }).then(data => {
> cy = cytoscape(
> {
> container: document.getElementById('cy'),
> elements: data[0],
> style: data[1],
> layout: data[2]
> }
> );
> return cy
> }).then(cy => {
> let showJsonButton = document.getElementById('showJson');
> showJsonButton.addEventListener('click', function () {
> console.log('Elements:');
> console.log( cy.elements().jsons() ); // Gets all elements - JSON
> console.log('Styles:');
> console.log( cy.style().json() ); // Gets all styles - JSON
> console.log('Layout:');
> console.log(cy.options().layout); // Gets layout
> });
> 
> let showPositionsButton = document.getElementById('showPositions');
> showPositionsButton.addEventListener('click', function () {
> let positions = cy.nodes().map(node => node.position());
> console.log('Positions:');
> console.log(positions);
> });
> }).catch(function (error) {
> console.log(error);
> });
> 
> ```
> 
> elements.json
> 
> ```json
> {
> "nodes": [
> { "data": { "id": "a" } },
> { "data": { "id": "b" } }
> ],
> "edges": [
> { "data": { "source": "a", "target": "b" } }
> ]
> }
> 
> ```
> 
> style.json
> 
> ```json
> [
> {
> "selector": "node",
> "style": {
> "label": "data(id)"
> }
> },
> {
> "selector": "edge",
> "style": {
> "curve-style": "haystack"
> }
> }
> ]
> 
> ```
> 
> layout.json
> 
> ```json
> {
> "name": "grid"
> }
> 
> ```

---

_[View the full topic](https://swi-prolog.discourse.group/t/wiki-discussion-generating-cytoscape-js-graphs-with-swi-prolog/2816)._