Quickstart

Ready to get started? This page provides an introduction to Multigraph.

Hello, Multigraph!

A Multigraph consists of two parts: a <div> element in an HTML page, and a "mugl" file (a type of xml file) that describes the graph to display in that <div> element. For example, if you put the graph.html and graph.xml files below in a directory on your web server, and view the graph.html file in a browser, you should see a Multigraph like the one shown here.

graph.html

<html>
  <head>
    <script type="text/javascript" src="//multigraph.org/download/multigraph-min.js"></script>
  </head>
  <body>
    <div class="multigraph" data-src="graph.xml" data-width="500" data-height="400"></div>
  </body>
</html>

graph.xml

Multigraph

<mugl>
  <data> 
    <values>
      0, 3
      2, 4
      4, 3
      6, 4.5
      9, 0
      10,5
    </values>
  </data>
</mugl>

You can put any number of Multigraphs in a web page. Multigraph examines your page for all <div> elements having a class of multigraph, looking at the data-src, data-width, and data-height attributes to determine the MUGL file and size of the graph to put into each element.

Creating a <div> of class multigraph is just one way of creating a Multigraph; it's also possible to invoke Multigraph from JavaScript code in your page. In particular, Multigraph works as a JQuery plugin, so you can use JQuery to target an arbitrary <div> in your page and insert a Multigraph into it. See the Using Multigraph with JavaScript page for more details.

To see many more examples of MUGL files, check out the examples page.

For more details on how to write MUGL files and how to use Multigraph in general, see the Documentation page.