Code Monkey home page Code Monkey logo

Comments (6)

anvaka avatar anvaka commented on September 2, 2024

When you create a renderer instance set the 'container' property to required DOM element, where you want to place a graph. E.g.

   var renderer = Viva.Graph.View.renderer(graph,
        {
            container  : document.getElementById('graphDiv')
            // other settings
        });

from vivagraphjs.

Clay-Ferguson avatar Clay-Ferguson commented on September 2, 2024

@anvaka This is probably going to be a popular question. You may want to therefore address this question right at the beginning of your first example. Specifically in the readme.md would be best imo. That's where I was missing it.

Thanks! looking forward to trying this out. Looks awesome in the demos!

from vivagraphjs.

anvaka avatar anvaka commented on September 2, 2024

@Clay-Ferguson thanks! fixed

from vivagraphjs.

Clay-Ferguson avatar Clay-Ferguson commented on September 2, 2024

I tried to run it, and it renders a canvas object that's 1px by 1px. Not sure what i'm doing wrong. I'm sure I have the JS file loading correctly but not working yet.

from vivagraphjs.

anvaka avatar anvaka commented on September 2, 2024

check the CSS for the div - does it have width/height?

from vivagraphjs.

Clay-Ferguson avatar Clay-Ferguson commented on September 2, 2024

I tried again, but still can't get it. Here's the code:
I am sure the DIV exists, and has size 500x500px, and the vivaGraph.js is
definitely getting found and loaded correctly.
(So something's gotta be missing? Are there other dependecies? I have
jquery and polymer and lots of other javascript, BTW,
so maybe I should try on a blank page or something and get it running there
first).

I didn't (nor will I) run any command line code. ALL i'm doing is including
your JS file, right?

                    var graph = Viva.Graph.graph();
                    graph.addLink(1, 2);

///////////////
//var graphGenerator = Viva.Graph.generator();
//var graph = graphGenerator.grid(3, 3);

// var layout = Viva.Graph.Layout.forceDirected(graph, {
// springLength : 10,
// springCoeff : 0.0005,
// dragCoeff : 0.02,
// gravity : -1.2
// });

var graphics = Viva.Graph.View.webglGraphics();
var container = document.getElementById('searchResultsPanelSub');
if (container==null) {
console.log("container is null in viva!");
return;
}
var renderer = Viva.Graph.View.renderer(graph, {
container : container,
graphics : graphics//,
//layout : layout
});
renderer.run();

Best regards,
Clay Ferguson
[email protected]

On Wed, Mar 30, 2016 at 11:13 PM, Andrei Kashcha [email protected]
wrote:

check the CSS for the div - does it have width/height?


You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#6 (comment)

from vivagraphjs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.