0

I'm trying to check if this basic HTML code is running in my browser, just to make sure there were no problems. This is my first time working with Sigma.js and still very new to JavaScript in general. The JSON data file is provided by the sigma.js website along with a basic code. The problem occurs when I open the HTML file into the browser and the screen is completely white. I realize this is probably a very basic question, but I could not find any response online that could help so I really appreciate your help!

<html>

<head>
  <script src="../src/sigma.min.js"></script>
  <script src="../src/sigma.parsers.json.min.js"></script>
  <script src="../plugins/sigma.parsers.json/sigma.parsers.json.js"></script>
</head>

<div id="container">

 <style type="text/css">
   #container {
     max-width: 400 px;
     height:       400 px;
     margin: auto;
   }
 </style>

 <body>

 </div>

<script>
  sigma.parsers.json('data/data.json', {

  container: 'container', 
   settings: {
    defaultNodeColor: '#ec5148'
   }
  });
</script>

The following is my data file I found on the sigma.js site itself

{
   "nodes": [
   {
     "id": "n0",
     "label": "A node",
    "x": 0,
    "y": 0,
     "size": 3
   },
    {
     "id": "n1",
     "label": "Another node",
     "x": 3,
     "y": 1,
      "size": 2
  },
   {
     "id": "n2",
     "label": "And a last one",
     "x": 1,
     "y": 3,
      "size": 1
   }
  ],
  "edges": [
   {
     "id": "e0",
     "source": "n0",
     "target": "n1"
   },
   {
     "id": "e1",
     "source": "n1",
      "target": "n2"
   },
   {
     "id": "e2",
     "source": "n2",
     "target": "n0"
   }
 ]
}
ivpavici
  • 1,117
  • 2
  • 19
  • 30
Patrick Adams
  • 1
  • 3
  • Open up your DevTools and check the Console tab -- any errors? Check the Network tab -- any 404s on your asset files? – Josh KG May 31 '16 at 16:55
  • Your HTML file is missing a doctype declaration and your `#container` div should be AFTER the opening `` tag. – Josh KG May 31 '16 at 16:57
  • @JoshKG Hey, yeah I added the doctype tag and changed the format for the #container. It still had no response on the screen – Patrick Adams May 31 '16 at 17:29
  • @JoshKG Also, for the DevTools, there def were errors! Thanks for the tip! It gave me this response: sigma.parsers.json.min.js:1 XMLHttpRequest cannot load file:///C:/Users/SocialMediaLab/Desktop/plzwork2/sigma.js/examples/data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.sigma.parsers.json @ sigma.parsers.json.min.js:1 Presenter.html:1 Uncaught SyntaxError: Unexpected end of JSON inpu – Patrick Adams May 31 '16 at 17:32
  • 1
    Ah, there's the problem -- are you running a local server, or just opening this HTML from file? I think you'll need to run a local server to make JSON calls like this. – Josh KG May 31 '16 at 17:34
  • @JoshKG I'm running the HTML from file, but I think it's still possible to make the JSON file calls from file because I downloaded the repositories of the Sigma.JS file they included an example on loading from an external JSON file. It was put in the same format as mine. Here is the link to the GitHub where the file is. https://github.com/jacomyal/sigma.js/blob/master/examples/load-external-json.html It produced a perfect result as advertised on the site. When switching their JSON file with my JSON file, it produced the desired result, so I feel the problem is with my HTML file. – Patrick Adams May 31 '16 at 17:37
  • This isn't Sigma.js stuff, this is HTML/JavaScript/Browser stuff. If you want to make an AJAX call to a local filesystem, you'll need to disable Cross Origin Request security in your header (depending on the browser). See this answer: http://stackoverflow.com/questions/5469440/jquery-ajax-request-from-local-filesystem-windows-file – Josh KG May 31 '16 at 17:43
  • @JoshKG I see! I found that running on firefox solved the problem as Google Chrome doesn't allow you to load files off the filesystems. It had to be on a server. However, the annoying part of this problem is that when running on firefox the same problem persisted. Even when I copied the exact code from the load-JSON file from the example into my file, the code wouldn't run, even though it was identical! – Patrick Adams May 31 '16 at 18:00
  • Ok! Console errors? (hit F12 in Firefox, then refresh your page) – Josh KG May 31 '16 at 18:03

0 Answers0