search

GraphAlchemist / Alchemy

Other
517 stars 232 forks source link

Multiple Graphs #558

Open thephysicsriot opened 9 years ago

thephysicsriot commented 9 years ago

I'm trying to put two graphs on the same page. With the alchemy = new Alchemy(config) and <div class="alchemy" id="alchemy"> combo, I am not sure how to achieve this.

I have a variable number of datasets and I want to dynamically assign div ids alchemy1, alchemy2, ..., etc then draw in the appropriate graph.

zivni commented 9 years ago

You can do it the following way. The problem I'm facing is that i can pan only one of the graphs. I see in the browser console that there are errors when panning/zooming. Does any one have a solution? 

<!DOCTYPE html>
<html lang = 'en'>
<head>
   <meta charset = 'utf -8'/>
   <link rel='stylesheet' href='http://cdn.graphalchemist.com/alchemy.min.css'>
   <script type='text/javascript' src='http://cdn.graphalchemist.com/alchemy.min.js'></script>
</head>
<body>
   <div id='alchemy1' class='alchemy' ></div>
   <div id='alchemy2' class='alchemy' ></div>
   <script>
      var some_data = {
                'nodes': [
                  {
                        'id': 1
                  },
                  {
                        'id': 2
                  },
                  {
                        'id': 3
                  }
                ],
                'edges': [
                  {
                    'source': 1,
                    'target': 2
                  },
                  {
                    'source': 1,
                    'target': 3,
                  }
                ]
              };
    var config = {
        directedEdges: true,
        graphHeight: function(){ return 400; },
        graphWidth: function(){ return 400; },
    };
    config.dataSource = some_data;
    config.divSelector = "#alchemy1";
    new Alchemy(config)

    config.divSelector = "#alchemy2";
    new Alchemy(config)
  </script>
</body>
thephysicsriot commented 9 years ago

I forgot about this question, but yes that is how I did it in the end. I also get the panning/zooming problem. Thanks for the response.