Need a simple example - Githubissues

falconair commented 11 years ago

For the past half an hour I've been trying to get an example working. There really should be a simple, but COMPLETE example.

I first tried to play around with jsfiddle.net. When that didn't work, I tried to run a simple example on my local machine, even that doesn't work (I just get an empty page with no errors in the console).

My code is here, you are welcome to use it (just surrounds sample 'snippet' with html tags--note that I only brought jquery into it to make sure my page was ready, before attempting to add a network):

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://sigmajs.org/js/prettify.js"></script>
    <script type="text/javascript" src="http://sigmajs.org/js/sigma.min.js"></script>
    <script>
        $(document).ready(function() {
            var sigRoot = document.getElementById('sig');
            var sigInst = sigma.init(sigRoot).drawingProperties({
              defaultLabelColor: '#ccc',
              font: 'Arial',
              edgeColor: 'source',
              defaultEdgeType: 'curve'
            }).graphProperties({
              minNodeSize: 1,
              maxNodeSize: 10
            });

            sigInst.addNode('hello',{
              label: 'Hello',
              color: '#ff0000'
            }).addNode('world',{
              label: 'World !',
              color: '#00ff00'
            }).addEdge('hello_world','hello','world').draw();
          });
    </script>

</head>
<body>
    <div id="sig">
        <canvas width="1170px" height="216px">
    </div>

</body>
</html>

miketheman commented 11 years ago

I agree - we need a simple example.

This one errors out with:

Uncaught ReferenceError: $ is not defined

ghost commented 11 years ago

Hi, my ambition outweighs my experience. I too would love to see a simple working example.

Miketheman, i dont see that ReferenceError

miketheman commented 11 years ago

@maddog007 - I was testing this code while removing the jQuery dependency on $(document)... Didn't work, put it back.

@falconair - I figured out a basic working example. Here's the code:

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://sigmajs.org/js/sigma.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var sigRoot = document.getElementById('sig');
      var sigInst = sigma.init(sigRoot).drawingProperties({
        defaultLabelColor: '#ccc',
        font: 'Arial',
        edgeColor: 'source',
        defaultEdgeType: 'curve'
      }).graphProperties({
        minNodeSize: 1,
        maxNodeSize: 10
      });

      sigInst.addNode('hello',{
        label: 'Hello',
        color: '#ff0000',
        x: 1
      }).addNode('world',{
        label: 'World !',
        color: '#00ff00',
        x: 2
      }).addEdge('hello_world','hello','world').draw();
    });
  </script>

  <style type="text/css">
    /* sigma.js context : */
    .sigma {
      margin-left:auto;
      margin-right:auto;
      position: relative;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      background: #222;
      width: 80%;
      height: 80%;
      top: 0;
      left: 0;
    }
  </style>

</head>
<body>

  <div class="sigma" id="sig"></div>

</body>
</html>

Let me know how that works for you.

ghost commented 11 years ago

Hello world ! Now I see why they call you mike the man. cheers

falconair commented 11 years ago

Yup, this works when I download this code and run it in my browser. However, it doesn't work why I try to run it in jsfiddle. Good enough for me though. Thanks!

jacomyal commented 11 years ago

The problem was on the container's height. I just took your example and added in the CSS "min-height: 200px;". Now it works: http://jsfiddle.net/kZG4w/

dtracers commented 10 years ago

dont mean to cause an issue, but when I run this the jsfiddle no longer works. It says that sigma no longer exists in the location you are pointing to. but it also no longer works when I try and run it locally using version 1.0.2 saying that the init function is undefined specifically: Uncaught TypeError: undefined is not a function Is there a way to make this simple example work again?

apitts commented 10 years ago

@dtracers I suspect that you would have more luck following the more recent tutorial on sigmajs.org. I believe the issue may be that the fiddle used the old sigma - v1.0 was essentially a rewrite as I understand it. So, you should probably use v1.0.2 and the tutorial on sigmajs.org rather than that fiddle.

dtracers commented 10 years ago

Ahh thank you! I have been attempting to do some items that are slightly more advance than the tutorial and was trying to follow all of the answers on stack overflow. They are all out of date too.

kyyash commented 6 years ago

I do not see arrows when I use this ? var sigInst = new sigma({ graph: this.sigmaJson, container: 'connGraph-sigma', settings: { defaultNodeColor: '#ec5148',
} }); sigInst.drawingProperties({ defaultLabelColor: '#ccc', font: 'Arial', edgeColor: 'source', defaultEdgeType: 'curve' }).graphProperties({ minNodeSize: 1, maxNodeSize: 10 });

sigInst.graph.nodes().forEach(function(node, i, a) {
  node.x = Math.cos(Math.PI * 2 * i / a.length);
  node.y = Math.sin(Math.PI * 2 * i / a.length);
});

// sigInst.drawingProperties({defaultEdgetArrow:'target'}); sigInst.refresh();

azw413 commented 9 months ago

Can these examples be updated with the latest version of sigmajs? We need a simple single page HTML example which works with the latest versions. Most web apps are not using Javascript backends and so just having npm examples is not helpful whereas a static HTML page can be implemented in any backend language.

sim51 commented 9 months ago

I don't really understand what you want, if it is to have a working example on which you can test the library without having npm on your computer, or if you want to push in production an html page (with sigma) without to have a web/js workspace on your pc.

For the first one, you can run all the examples on code sandbox.

on github, go to the folder of the example you want to run
replace in the url github.com by githubbox.com

For the second point, you can check this example : https://jsfiddle.net/w7uq3h0o/

jacomyal / sigma.js

Need a simple example #61