HTML pushing graph down on the page

[dmvojticek]

I am trying insert a div container using HTML and CSS. Every time I insert HMTL code the Vivagraph gets pushed to the bottom of the page and when I attempt to drag it back up to the top the graph slides behind any HTML code. I have floated the container every possible way and tried using z-indexes, and neither has worked. The code is as follows. HTML:

This is a test Container

CSS:

box {

text-align: center;
background-color: #999;
border: 2px solid black;
float: left;
display: inline;
width: 220px;
height: 500px;
padding: 0;
margin: 0 0 0.5em 1em;
z-index: 1;
}

[dmvojticek]

It will not let me display the HTML, but it is a simple pair of div tags with id="box" with a paragraph "This is a Test Container" inside

[joerodrig]

Assuming the div you want to hold the graph in looks like <div id="box"></div>

You can update you renderer variable to reflect that like this:

var renderer = Viva.Graph.View.renderer(graph, {
                 graphics: graphics,
                 layout:layout,
                 container: document.getElementById("box");
             });

That will render the graph in your div element

If you go to the "prepareSettings" var in your vivagraph.js file you can see the default settings. The container, by default, is set to load in the body of your document(ex. container = container || window.document.body;).

[anvaka]

Thank you for answer @joerodrig3!