Ready to get started? This page provides an introduction to 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.
<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>
<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.