Chapter 2. Quick Start

Before working through the steps described here, download and install a copy of Multigraph as described in the previous section, Chapter 1, 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.

There are two steps involved in creating a web graph using Multigraph. The first is to create a web page (HTML file) that loads the javascript file "Multigraph.js". Somewhere in the HTML page, create a "div" tag and assign an "id" attribute to that div tag. The page body's "onload" function should create a new instance of a "Multigraph" object, giving the div's id attribute value, the name of a "mugl" file describing the graph (see below), and the desired width and height of the graph in pixels. Example 2.1, “Simple Example Multigraph HTML File (graph.html)” shows a simple example.

Example 2.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 the 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.2, “Simple Example Mugl File (graph.xml)” shows a minimal example of such a file.

Example 2.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 2.1, “Simple Example Graph”.

Figure 2.1. Simple Example Graph

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.

Chapter 4, Mugl Files describes in detail how to write mugl files.