Datetime Axis

This examples shows a plot in which the horizontal axis represents a date/time variable. Note the use of the empty <title/> element to suppress the title for the horizontal axis, and the "angle" and "anchor" attributes in the vertical axis's <title> element, which arrange for the "Temperature" title to be centered vertically along the vertical axis.

Also note the "spacing" attribute on the <labels> tag. Its value is a (space-separated) list of time intervals, "1D 12H 6H 4H 2H 1H", where "D" stands for "day", and "H" stands for "hour". These are the allowed spacings that Multigraph will use between successive labes (and tick marks) on the axis. As the user zooms in or out on the horizontal axis, Multigraph will always choose the spacing from this list that results in the greatest number of labels being drawn without having the labels overlap each other. Try zooming in and out on the horizontal axis in the graph below, and notice how the labeling changes as you do so.

Here is the MUGL for this example:

<?xml version="1.0"?>
<mugl>
  <horizontalaxis type="datetime" min="2008110100" max="2008110200">
    <labels format="%d %n%L%H:00" spacing="1D 12H 6H 4H 2H 1H" />
    <title/>
  </horizontalaxis>
  <verticalaxis   min="20" max="80">
    <title angle="90" anchor="0 -1">Temperature</title>
  </verticalaxis>
  <plot>
    <renderer type="line">
      <option name="linecolor" value="black"/>
      <option name="dotcolor"  value="blue"/>
    </renderer>
  </plot>
  <data>
    <variables>
      <variable id="time" type="datetime"/>
      <variable id="temp"/>
    </variables>
    <values>
      2008110100, 43.1
      2008110101, 41.0
      2008110102, 39.2
      2008110103, 37.4
      2008110104, 33.2
      2008110105, 33.1
      2008110106, 34.5
      2008110107, 35.1
      2008110108, 41.3
      2008110109, 48.1
      2008110110, 51.2
      2008110111, 60.3
      2008110112, 67.4
      2008110113, 63.1
      2008110114, 62.3
      2008110115, 68.2
      2008110116, 67.2
      2008110117, 53.2
      2008110118, 51.0
      2008110119, 49.1
      2008110120, 45.2
      2008110121, 42.1
      2008110122, 41.2
      2008110123, 43.1
      2008110200, 44.5
    </values>
  </data>
</mugl>
Note: this web site is for the old, Flash-based, version of Multigraph. Starting in December 2012, there is a new JavaScript/HTML5 version of Multigraph, which is distributed from the site multigraph.github.io. Future projects should use the new JavaScript/HTML5 version of Multigraph rather than the Flash version described here.