Getting started

The canvas

<html>
  <head>
    <script type="text/javascript" src="../js-graph-it.js"></script>
    <link rel="stylesheet" type="text/css" href="../js-graph-it.css">
  </head>
  <body onload="initPageObjects();">
    <div class="canvas" id="mainCanvas"
      style="width: 350px; height: 250px; border: 1px solid black;">
    </div>
  </body>
</html>

Now we need to declare an element that contains the graph, such an element is called a canvas and can be a html body or div element. This means that you can use either the entire page or one or more sections of it as canvases.

Canvases have particular behaviours, e.g. the absolute positioning of the inner elements, hence, using the body element as canvas is only recommended if the whole page is actually a graph.

In our example we will place a div element in the page as the canvas:

A canvas is identified by the canvas css class.

It is also required that a canvas has a unique id declared.

Since the content of the canvas will probably have absolute positioning, it is strongly recommended to set the dimensions for the element. The canvas' content won't change it's external size.