Before working through the steps described here, download and install a copy of Multigraph as described in the previous section, Obtaining and Installing Multigraph. This is a simple process of unpacking a zip file and copying one file and one folder from it to your computer or web server.
Example 1. Simple Example Multigraph HTML File (graph.html)
<html> <head> <script src="Multigraph.js"></script> </head> <body onload="new Multigraph('graphdiv', 'graph.xml', [400,300]);"> <div id="graphdiv"/> </body> </html>
In this example, we assume that the "Multigraph.js" file and "Multigraph" folder are
in the same folder
where you create the HTML file. If you have installed them somewhere else, adjust
src="Multigraph.js" line accordingly.
The second step involved in creating a graph consists of writing a "mugl" (pronounced "muggle") file. "Mugl" is short for "Multigraph XML" and is a type of XML file that specifies the data to be graphed, and any preferences you have about how to display the data, axes, and other elements of the graph. The mugl file associated with the above example HTML file is called "graph.xml" (since that name is mentioned in the "new Multigraph(...)" line); Example 2, “Simple Example Mugl File (graph.xml)” shows a minimal example of such a file.
Example 2. Simple Example Mugl File (graph.xml)
<?xml version="1.0"?> <mugl> <data> <values> 0, 3 2, 4 4, 3 6, 10 9, 0 10,5 </values> </data> </mugl>
This very small mugl file indicates that the graph should
show a plot of the six points whose coordinates are specified in the body of the
values element. You can try putting this "graph.html" file
and "graph.xml" file in the folder where you've installed "Multigraph.js"
and the "Multigraph" folder, and then try loading "graph.xml" in your web browser.
You should see a graph that looks like Figure 1, “Simple Example Graph”.
Figure 1. Simple Example Graph
This simple example just scratches the surface of what is possible with multigraph. In this example, which does not specify anything about the style of the graph or the axes or their labels, multigraph makes a lot of default assumptions about how to create the graph, such as choosing a black "line" style graph, and horizontal and vertical ranges to match the given data. In general, these things and many more can be explicitly specified in the mugl file, which allows everything about the graph to be customized.
Mugl Files describes in detail how to write mugl files.