New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Need a simple example #61

Closed
falconair opened this Issue Dec 6, 2012 · 10 comments

Comments

Projects
None yet
6 participants
@falconair

falconair commented Dec 6, 2012

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

This comment has been minimized.

Show comment
Hide comment
@miketheman

miketheman Dec 28, 2012

I agree - we need a simple example.

This one errors out with:

Uncaught ReferenceError: $ is not defined 

miketheman commented Dec 28, 2012

I agree - we need a simple example.

This one errors out with:

Uncaught ReferenceError: $ is not defined 
@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Dec 29, 2012

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

Miketheman, i dont see that ReferenceError

ghost commented Dec 29, 2012

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

Miketheman, i dont see that ReferenceError

@miketheman

This comment has been minimized.

Show comment
Hide comment
@miketheman

miketheman Jan 1, 2013

@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.

miketheman commented Jan 1, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jan 2, 2013

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

ghost commented Jan 2, 2013

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

@falconair

This comment has been minimized.

Show comment
Hide comment
@falconair

falconair Jan 6, 2013

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!

falconair commented Jan 6, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jacomyal

jacomyal Feb 3, 2013

Owner

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/

Owner

jacomyal commented Feb 3, 2013

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/

@jacomyal jacomyal closed this Feb 3, 2013

@dtracers

This comment has been minimized.

Show comment
Hide comment
@dtracers

dtracers May 28, 2014

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?

dtracers commented May 28, 2014

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

This comment has been minimized.

Show comment
Hide comment
@apitts

apitts May 29, 2014

Contributor

@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.

Contributor

apitts commented May 29, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@dtracers

dtracers May 29, 2014

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.

dtracers commented May 29, 2014

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

This comment has been minimized.

Show comment
Hide comment
@kyyash

kyyash Apr 10, 2018

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();

kyyash commented Apr 10, 2018

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();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment