---

title: Mugl File Reference

docs: selected

permalink: /docs/mugl-reference/

layout: master

---

$(document).ready(function() {

$('body').scrollspy({ target: '.sidebar-menu', offset: 50 });

<div class="row">

<div class="col-md-9">

<h1 id="top">Mugl File Reference</h1>

<p>The core elements of a Multigraph XML file.</p>

<h2 id="window-element">The Window Element</h2>

<p>The optional <code>&lt;window&gt;</code> element customizes the default border, margin, padding box, and plot area regions. The window can be thought of as a set of (mostly invisible) nested rectangles inside of a block-level <code>&lt;div&gt;</code> element. See the figure in the following section for an illustration.</p>

<pre class="syntaxhighlight"><code>&lt;mugl&gt;

&lt;window

width="INTEGER"

height="INTEGER"

border="INTEGER(2)"

bordercolor="COLOR(black)"

margin="INTEGER(2)"

padding="INTEGER(5)"&gt;

&lt;/window&gt;

&lt;/mugl&gt;

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Attributes</h4>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>width</code><br><code>height</code>

</div>

<div class="col-md-10">

<p>Width and height of the graph (in pixels); usually defined with the <code>data-width</code> and <code>data-height</code> attributes specified in the HTML (or CSS) or with options passed to the Multigraph constructor in JavaScript code.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>border</code>

</div>

<div class="col-md-10">

<p>The width of the optional border (in pixels) to draw around the graph.</p>

<p>Default: <code>"2"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>bordercolor</code>

</div>

<div class="col-md-10">

<p>The color to use for the <code>&lt;window&gt;</code> border. Either an expression of the form 0xRRGGBB or one of the following strings: black, red, green, blue, yellow, magenta, cyan, or white.</p>

<p>Default: <code>"black"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>margin</code>

</div>

<div class="col-md-10">

<p>Number of pixels of blank space to allow on all sides between the window and the border.</p>

<p>Default: <code>"2"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>padding</code>

</div>

<div class="col-md-10">

<p>Number of pixels of blank space to allow inside the border; everything else (other than the border) that multigraph draws will be clipped to an imaginary rectangle that is inset by this number of pixels.</p>

<p>Default: <code>"5"</code></p>

</div>

</div>

</li>

</ul>

<h2 id="plotarea-element">The Plotarea Element</h2>

<p>This element defines attributes about the plot area and padding box. The padding box (which includes the plot area) serves as the clipping region for everything that multigraph draws, including axes, labels, and titles. The plot area is region where data points are drawn. There can be <em>at most</em> one of these elements in a mugl file.</p>

<div class="row">

<div class="col-md-2"></div>

<div class="col-md-8">

<img src="/images/MarginBorderPlotarea.png" style="max-width: 100%; max-height: 100%;" />

</div>

<div class="col-md-2"></div>

<pre class="syntaxhighlight"><code>&lt;mugl&gt;

&lt;plotarea

marginbottom="INTEGER(35)"

margintop="INTEGER(10)"

marginleft="INTEGER(38)"

marginright="INTEGER(35)"

border="INTEGER(0)"

bordercolor="COLOR(0xeeeeee)"

color="COLOR">

&lt;/plotarea&gt;

&lt;/mugl&gt;

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Attributes</h4>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>marginbottom</code>

</div>

<div class="col-md-10">

<p>Offset from the bottom side.</p>

<p>Default: <code>"35"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>margintop</code>

</div>

<div class="col-md-10">

<p>Offset from the top side.</p>

<p>Default: <code>"10"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>marginleft</code>

</div>

<div class="col-md-10">

<p>Offset from the left side.</p>

<p>Default: <code>"38"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>marginright</code>

</div>

<div class="col-md-10">

<p>Offset from the right side.</p>

<p>Default: <code>"35"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>border</code>

</div>

<div class="col-md-10">

<p>The width in pixels of a border to be drawn around the plotarea.</p>

<p>Default: <code>"0"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>bordercolor</code>

</div>

<div class="col-md-10">

<p>The color to use for the <code>&lt;plotarea&gt;</code> border. Either an expression of the form 0xRRGGBB or one of the following strings: black, red, green, blue, yellow, magenta, cyan, or white.</p>

<p>Default: <code>"0xeeeeee"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>color</code>

</div>

<div class="col-md-10">

<p>The color to fill the background of the <code>&lt;plotarea&gt;</code>. Either an expression of the form 0xRRGGBB or one of the following strings: black, red, green, blue, yellow, magenta, cyan, or white.</p>

<p>Default: <code>"0xeeeeee"</code></p>

</div>

</div>

</li>

</ul>

<h2 id="axis-elements">The Axis Elements</h2>

<p>The <code>&lt;horizontalaxis&gt;</code> and <code>&lt;verticalaxis&gt;</code> elements define the location, display properties, data types, and range of values of a graph's axes. A graph can have one or more of both axis elements.</p>

<p>These attribute values determine the way that each kind of axis is displayed relative to the plot area. The position of each axis is relative to an edge of the plot area, but all or part of the axis may lie outside the plot area (in the padding box). In particular, a negative position value represents a distance away from the plot area (into the padding box).</p>

<pre class="syntaxhighlight"><code>&lt;mugl&gt;

&lt;horizontalaxis

id="STRING"

type="DATATYPE(number)"

length="RELLEN(1.0)"

base="POINT(-1,1)"

anchor="DOUBLE(-1)"

position="POINT(0,0)"

min="DATAVALUEORAUTO(auto)"

max="DATAVALUEORAUTO(auto)"

minposition="RELPOS(-1.0)"

maxposition="RELPOS(1.0)"

color="COLOR(black)"

linewidth="INTEGER(1)"

tickmin="INTEGER(-3)"

tickmax="INTEGER(3)"

tickcolor="COLOR(black)"&gt;

&lt;title

base="DOUBLE(0)"

anchor="POINT"

position="POINT"

angle="DOUBLE(0)"&gt;

&lt;/title&gt;

&lt;labels

format="STRING"

start="DATAVALUE(0)"

angle="DOUBLE(0)"

position="POINT"

anchor="POINT"

color="COLOR(black)"

spacing="STRING"

densityfactor="DOUBLE(1.0)"&gt;

&lt;label

format="STRING"

start="DATAVALUE(0)"

angle="DOUBLE(0)"

position="POINT"

anchor="POINT"

color="COLOR(black)"

spacing="STRING"

densityfactor="DOUBLE(1.0)" /&gt;

&lt;label .../&gt;

&lt;label .../&gt;

&lt;/labels&gt;

&lt;grid

color="COLOR(0xeeeeee)"

visible="BOOLEAN(false)"&gt;

&lt;/grid&gt;

&lt;pan

allowed="BOOLEAN(yes)"

min="DATAVALUE"

max="DATAVALUE"&gt;

&lt;/pan&gt;

&lt;zoom

allowed="BOOLEAN(yes)"

min="DATAMEASURE"

max="DATAMEASURE"

anchor="DATAVALUE"&gt;

&lt;/zoom&gt;

&lt;binding

id="STRING"

min="DATAVALUE"

max="DATAVALUE"&gt;

&lt;/binding&gt;

&lt;/horizontalaxis&gt;

&lt;/mugl&gt;

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Attributes</h4>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>id</code>

</div>

<div class="col-md-10">

<p>An identifier that can be used to refer to this axis elsewhere in the mugl file.</p>

<p>Default: <code>"x"</code> and <code>"y"</code> for horizontal and vertical axes respectively, and then <code>"x1"</code> or <code>"y1"</code>, <code>"y1"</code> or <code>"y2"</code>, etc, for any additional axes.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>type</code>

</div>

<div class="col-md-10">

<p>The data type for the axis, either <code>"number"</code> or <code>"datetime"</code>.</p>

<p>Default: <code>"number"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>length</code>

</div>

<div class="col-md-10">

<p>The length of the axis.</p>

<p>There are two ways to specify the axis length.</p>

<p>The first way is to provide a number between 0 and 1 (in quotes), which represents a fraction of the parallel dimension of the plot area (width for horizontal axes, height for vertical axes). For example, given a horizontal axis, a value of <code>"1"</code> means that the axis length is exactly the width of the plot area, and a value of <code>"0.5"</code> would mean that the axis is half as long as the width of the plot area.</p>

<p>The second way is to give an expression of the form <code>"A+B"</code> or <code>"A-B"</code>. In this case, the first number A represents a fraction of the parallel dimension of the plot area, as above, and the second number +B or -B represents a number of pixels to add or subtract from that length. For example, a length of <code>"1-10"</code> for a horizontal axis would mean 10 pixels less than the width of the plot area. A value of <code>"0.5+20"</code> for a vertical axis would mean 20 pixels longer than half the height of the plot area.</p>

<p>If for some reason you want to specify an axis length exactly in terms of pixels, use <code>"0"</code> for A. For example, <code>"0+200"</code> would give an axis that is 200 pixels long. (Note that you definitely need to specify the <code>0+</code> in this case; if you specify a length simply as <code>"200"</code>, Multigraph will interpret it according to the first method above, as 200 times the width or height of the plot area.)</p>

<p>Default: <code>"1.0"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>base</code>

</div>

<div class="col-md-10">

<p>The location of the base point relative to the plot area.</p>

<p>Default: <code>"-1 -1"</code> (lower left corner of the plot area)</p>

<p>Described in detail in the <a href="#positioning--axes-positioning">Axes Positioning</a> section.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>anchor</code>

</div>

<div class="col-md-10">

<p>A number between -1 and 1 (in quotes) indicating the location of the anchor point along the axis.</p>

<p>Default: <code>"-1"</code> (the left endpoint of a horizontal axis, or the bottom endpoint of a vertical axis).</p>

<p>Described in detail in the <a href="#positioning--axes-positioning">Axes Positioning</a> section.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>position</code>

</div>

<div class="col-md-10">

<p>A coordinate pair of pixel offsets.</p>

<p>Default: <code>"0 0"</code></p>

<p>Described in detail in the <a href="#positioning--position-attribute">Position Attribute</a> section.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>min</code><br><code>max</code>

</div>

<div class="col-md-10">

<p>The minimum/maximum data value for the axis; i.e. the data value corresponding to the left (for horizontal axes) or bottom (for vertical axes) endpoint of the axis. If the axis type is <code>"number"</code>, the value is a number. If the type is <code>"datetime"</code>, the value is a datetime in the format YYYYMMDDHHmmss.</p>

<p>Default: <code>"auto"</code>. (Computed from data set; must be specified when using a custom web service.)</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>minposition</code><br><code>maxposition</code>

</div>

<div class="col-md-10">

<p>Indicates the location along the axis corresponding to the minimum or maximum data value (before any panning or zooming that the user might do). This is expressed in general in the form <code>"A+B"</code> or <code>"A-B"</code>, where <code>A</code> is a relative coordinate between -1 and 1, and <code>B</code> is an optional pixel offset (default is 0).</p>

<p>For example, <code>minposition="-1+5"</code> corresponds to a point that is 5 pixels to the right of the left endpoint, or above the bottom endpoint; <code>maxposition="1-5"</code> corresponds to a point that is 5 pixels to the left of the right endpoint, or below the top endpoint.</p>

<p>Default (<code>minposition</code>): <code>"-1.0"</code></p>

<p>Default (<code>maxposition</code>): <code>"1.0"</code></p>

<p><small>Note: it is possible to specify a <code>minposition</code> and <code>maxposition</code> combination in which the minimum position is to the right of, or above, the max position, which will cause the data values along the axis to increase in the opposite direction from usual (increasing leftward for horizontal axes, or downward for vertical axes). This is perfectly valid and will work correctly, but you should make sure that it is really what you want before deciding to make use of this feature, because it is likely to be confusing to users, unless there is a good reason to portray your data in this manner.</small></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>color</code>

</div>

<div class="col-md-10">

<p>The color of the line to draw for the axis. Either an expression of the form 0xRRGGBB or one of the following strings: <code>"black"</code>, <code>"red"</code>, <code>"green"</code>, <code>"blue"</code>, <code>"yellow"</code>, <code>"magenta"</code>, <code>cyan</code>, or <code>"white"</code></p>

<p>Default: <code>"black"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>linewidth</code>

</div>

<div class="col-md-10">

<p>The pixel thickness of the line to draw for the axis.</p>

<p>Default: <code>"1"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>tickmin</code>

</div>

<div class="col-md-10">

<p>The length, in pixels, of the part of the axis tick marks that extends below the axis.</p>

<p>Default: <code>"-3"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>tickmax</code>

</div>

<div class="col-md-10">

<p>The length, in pixels, of the part of the axis tick marks that extends above the axis.</p>

<p>Default: <code>"3"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>tickcolor</code>

</div>

<div class="col-md-10">

<p>The color of the axis tick marks. Either an expression of the form 0xRRGGBB or one of the following strings: <code>"black"</code>, <code>"red"</code>, <code>"green"</code>, <code>"blue"</code>, <code>"yellow"</code>, <code>"magenta"</code>, <code>cyan</code>, or <code>"white"</code></p>

<p>Default: <code>"black"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>positionbase</code>

</div>

<div class="col-md-10">

<p>Deprecated.</p>

<p>Use the <code>base</code> attribute instead to switch a vertical axis to be placed relative to the right edge of the plot area (<code>base="1 -1"</code>, for example), or to switch a horizontal axis to be placed relative to the top edge of the plot area (<code>base="-1 1"</code>, for example).</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2">

<code>pregap</code><br><code>postgap</code>

</div>

<div class="col-md-10">

Deprecated.

</div>

</div>

</li>

</ul>

<br />

<h3>Axis Sub-Elements</h3>

<h4 id="axis-sub-element--title">Title</h4>

<p>The title for the axis. An axis title is positioned and oriented according to its <code>position</code>, <code>anchor</code>, and <code>angle</code> attributes (see the <a href="#positioning">positioning</a> section for details). The title is positioned relative to the the center of the axis. To prevent a title from being drawn at all, use an empty title tag, i.e. <code>&lt;title/&gt;</code></p>

<p>Default: the axis <code>id</code></p>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Attributes</h4>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>position</code></div>

<div class="col-md-10">

<p>A pixel offset from the axis center point.</p>

<p>Default: depends on the axis; chosen to look reasonable in most common situations</p>

<p>Described in detail in the <a href="#positioning--position-attribute">Position Attribute</a> section.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>anchor</code></div>

<div class="col-md-10">

<p>Default: depends on the choice and position of the axis.</p>

<p>Described in detail in the <a href="#positioning--base-and-anchor-attributes">Base & Anchor Attributes</a> section.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>angle</code></div>

<div class="col-md-10">

<p>Default: <code>"0"</code></p>

<p>Described in detail in the <a href="#positioning--angle-attribute">Angle Attribute</a> section.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>base</code></div>

<div class="col-md-10">

<p>Default: <code>"0"</code></p>

<p>Described in detail in the <a href="#positioning--base-and-anchor-attributes">Base & Anchor Attributes</a> section.</p>

</div>

</div>

</li>

</ul>

<h4 id="axis-sub-element--labels">Labels</h4>

<p>Specifies how multigraph will draw tick marks along the axes and defines tick mark text labels. Multigraph will attempt to choose the densest tick spacing possible from the defined <code>spacing</code> attribute(s) so that the labels do not overlap. Attributes applied to the <code>&lt;labels&gt;</code> element are applied to all spacing intervals.</p>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Attributes</h4>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>color</code></div>

<div class="col-md-10">

<p>The color of the line to draw for the axis. Either an expression of the form 0xRRGGBB or one of the following strings: <code>"black"</code>, <code>"red"</code>, <code>"green"</code>, <code>"blue"</code>, <code>"yellow"</code>, <code>"magenta"</code>, <code>cyan</code>, or <code>"white"</code>.</p>

<p>Default: <code>"black"</code></code>

</div>

</div>

</li>

</ul>

<h5 id="axis--labels-sub-element--label">Sub-Element: Label</h5>

<p>To customize specific spacing intervals, leave out a <code>spacing</code> attribute in the <code>&lt;labels&gt;</code> element and define <code>&lt;label&gt;</code> sub-elements each with a single number for the <code>spacing</code> attribute. Any attributes defined in these sub-elements will be applied to a specific spacing interval and override any attributes defined in the parent <code>&lt;labels&gt;</code> element.</p>

<p>The following attributes apply to the <code>&lt;labels&gt;</code> element and any <code>&lt;label&gt;</code> sub-elements.</p>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Attributes</h4>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>spacing</code></div>

<div class="col-md-10">

<p>Defines axis tick spacing intervals.</p>

<p>When defined in the <code>&lt;labels&gt;</code> element, the value of <code>spacing</code> is a list of numbers sorted in descending order, separated by spaces. This list specifies the possible spacings to be used between tick marks on the axis. The default value for a number axis is <code>"10000</code> <code>5000</code> <code>2000</code> <code>1000</code> <code>500</code> <code>200</code> <code>100</code> <code>50</code> <code>20</code> <code>10</code> <code>5 2 1 0.1</code> <code>0.01 0.001"</code>. The default value for a datetime axis is <code>"1000Y</code> <code>500Y</code> <code>200Y</code> <code>100Y</code> <code>50Y</code> <code>20Y</code> <code>10Y</code> <code>5Y</code> <code>2Y</code> <code>1Y</code> <code>6M</code> <code>3M</code> <code>2M</code> <code>1M</code> <code>7D 3D 2D 1D</code> <code>12H 6H 3H 2H 1H"</code></p>

<p>When using <code>&lt;label&gt;</code> sub-elements, the <code>spacing</code> attribute is a single number, and there is no <code>spacing</code> attribute for the <code>&lt;labels&gt;</code> element.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>start</code></div>

<div class="col-md-10">

<p>Indicates where tick marks should be aligned on the axis. The location of axis tick marks is determined by <code>start</code> and <code>spacing</code>. Multigraph will draw tick marks, and labels for them, at locations <code>T + n*S</code>, where <code>T</code> is the value of <code>start</code>, <code>S</code> is the value of <code>spacing</code>, for each integer <code>n</code> such that <code>T + n*S</code> is visible in the graph's padding area.</p>

<p>Default: <code>"0"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>densityfactor</code></div>

<div class="col-md-10">

<p>Note: this attribute is not yet fully implemented in Multigraph 4.0.</p>

<p>This is a factor that can be used to tweak Multigraph's concept of what constitutes an "optimal" density of labels along the axis. It must be a positive number; values greather than 1 result in more labels, and values less than one result in fewer labels.</p>

<p>Default: <code>"1.0"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>angle</code><br><code>position</code><br><code>anchor</code></div>

<div class="col-md-10">

<p>These determine the location and orientation of each tick mark's label relative to the location of the tic mark itself. See the <a href="#positioning--axes-positioning">Axes Positioning</a> section for details.</p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>format</code></div>

<div class="col-md-10">

<p>String describing the format to be used for tick labels. The syntax depends on the type of the axis. For an axis of type <code>'number'</code>, it should be a C-style "printf" format string, such as <code>'%1d'</code>, which is the default. For a <code>'datetime'</code> type axis, it should be a string containing some combination of the following special format characters, each of which should be preceeded by a <code>%</code>. Any characters in the format string that are not preceded by a <code>%</code> are included verbatim in the formatted result.</p>

<p>Default (number axis): <code>"%.1f"</code></p>

<p>Default (datetime axis): <code>"%Y-%M-%D %H:%i"</code></p>

<div class="row">

<div class="col-md-6">

<table class="table table-bordered table-condensed table-striped">

<tbody>

<tr>

<td><strong>Character</strong></td>

<td><strong>Description</strong></td>

</tr>

<tr>

<td>Y</td><td>four digit year</td>

</tr>

<tr>

<td>d</td><td>day of month without leading zero</td>

</tr>

<tr>

<td>h</td><td>hour of day, 12-hour clock</td>

</tr>

<tr>

<td>m</td><td>month number without leading zero</td>

</tr>

<tr>

<td>N</td><td>month name, spelled out</td>

</tr>

<tr>

<td>P</td><td>AM or PM</td>

</tr>

<tr>

<td>i</td><td>minutes</td>

</tr>

<tr>

<td>v</td><td>deciseconds (10ths of a second)</td>

</tr>

<tr>

<td>q</td><td>milliseconds (1000ths of a second)</td>

</tr>

<tr>

<td>W</td><td>weekday name, spelled out</td>

</tr>

</tbody>

</table>

</div>

<div class="col-md-6">

<table class="table table-bordered table-condensed table-striped">

<tbody>

<tr>

<td><strong>Character</strong></td>

<td><strong>Description</strong></td>

</tr>

<tr>

<td>y</td><td>two digit year</td>

</tr>

<tr>

<td>D</td><td>2-digit day of month with leading zero</td>

</tr>

<tr>

<td>H</td><td>hour of day, 24-hour clock</td>

</tr>

<tr>

<td>M</td><td>2-digit month number with leading zero</td>

</tr>

<tr>

<td>n</td><td>month name, 3 letter abbreviation</td>

</tr>

<tr>

<td>p</td><td>am or pm</td>

</tr>

<tr>

<td>s</td><td>seconds</td>

</tr>

<tr>

<td>V</td><td>centiseconds (100ths of a second)</td>

</tr>

<tr>

<td>L</td><td>newline</td>

</tr>

<tr>

<td>w</td><td>weekday name, 3-letter abbreviation</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>

</li>

</ul>

<h4 id="axis-sub-element--grid">Grid</h4>

<p>When this element is defined Multigraph will draw grid lines perpendicular to the axis being customized at the location of each tick mark. If this element is left absent, Multigraph will not draw grid lines along the axis. If you want both horizontal and vertical grid lines, be sure to include a <code>&lt;grid&gt;</code> sub-element in both axis elements.</p>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Attributes</h4>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>color</code></div>

<div class="col-md-10">

<p>Defines the grid line color as a hex value. </p>

<p>Default: <code>"0xeeeeee"</code>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>visible</code></div>

<div class="col-md-10">

<p>Indicates whether grid lines should be drawn for this axis. Either <code>"true"</code> or <code>"false"</code></p>

<p>Default: <code>"false"</code>

</div>

</div>

</li>

</ul>

<h4 id="axis-sub-element--pan">Pan</h4>

<p>Used to configure the type of panning that Multigraph allows the user to do for the axis.</p>

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Attributes</h4>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>allowed</code></div>

<div class="col-md-10">

<p>Either <code>"yes"</code> or <code>"no"</code></p>

<p>Default: <code>"yes"</code></p>

</div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col-md-2"><code>min</code></div>

<div class="col-md-10">

<p>Minimum data value to ever be displayed for this axis; panning is never allowed to go below this number.</p>

</div>