<graph>

Examples Page 2

Attribute Example: description, decorative

Typically the description attribute should be specified for each <graph>. In special cases, the decorative attribute could be specified instead to indicate it can be ignored by screen readers.

Attribute Example: identicalAxisScales

<p>Without <attr>identicalAxisScales</attr></p> 
<graph name="g" xmin="-5" xmax="5" grid="1 1" size="small">
  <shortDescription>A graph with different scales for the x and y axes</shortDescription>
  <point/>
  <line>y=x</line>
</graph>
 
<p>With <attr>identicalAxisScales</attr></p> 
<graph extend="$g" identicalAxisScales>
  <shortDescription>A graph that is tall so its axes are the same scale</shortDescription>
</graph>

When the identicalAxisScales attribute is used, the overall proportions of the <graph> will be proportional to the range of the $x$ and $y$ axes, and the grid will be perfectly square.

Attribute Example: displayXAxis, displayYAxis

<graph name="g" 
  displayXAxis="false" 
  displayYAxis="false" 
  size="small"
  >
    <shortDescription>A graph without x or y-axis displayed</shortDescription>
    <point/>
    <line>y = x</line>
</graph>

Use the displayXAxis and displayYAxis attributes to set rendering of the axes to true or false.

Attribute Example: displayXAxisTickLabels, displayYAxisTickLabels

<graph 
  name="g" 
  displayXAxisTickLabels="false" 
  displayYAxisTickLabels="false" 
  size="small"
  >
    <shortDescription>A graph without axis tick labels</shortDescription>
    <point/>
    <line>y = x</line>
</graph>

Use the displayXAxisTickLabels and displayYAxisTickLabels attributes to set rendering of the axes tick labels to true or false.

Attribute Example: xLabelPosition, yLabelPosition

<graph name="g" 
  xLabelPosition="left" 
  yLabelPosition="bottom" 
  showNavigation="false"
  >
    <shortDescription>A graph with the x-label at the left and the y-label at the bottom</shortDescription>
    <xLabel><m>x</m></xLabel>
    <yLabel><m>y</m></yLabel>
    <point/> 
    <line>y = x</line>
</graph>

Use the xLabelPosition attribute to choose between a left position and a right position for the $x$-axis label. The default position is right.

Use the yLabelPosition attribute to choose between a top position and a bottom position for the $y$-axis label. The default position is top.

Attribute Example: yLabelAlignment

<graph 
  name="g" 
  yLabelAlignment="right"  
  showNavigation="false">
    <shortDescription>A graph with the y-label aligned to the right of the axis</shortDescription>
    <yLabel><m>y</m></yLabel>
    <xLabel><m>x</m></xLabel>
    <point/>
    <line>y = x</line>
</graph>

Use the yLabelAlignment attribute to choose between a left alignment and a right alignment for the $y$-axis label. The default position is left, which means the label appears to the left of the vertical axis.

Attribute Example: xTickScaleFactor, yTickScaleFactor

The xTickScaleFactor and yTickScaleFactor attributes apply a numerical multiplier to the $x$-axis and the $y$-axis, respectively.

Attribute Example: showNavigation

<graph name="g" showNavigation="false" size="small">
  <shortDescription>A graph where the navigation controls are not shown</shortDescription>
  <point/>
  <line>y = x</line>
</graph>
 
<graph extend="$g" showNavigation="true">
  <shortDescription>A graph where the navigation controls are shown (the default)</shortDescription>
</graph>

The showNavigation attribute controls whether the default zooming controls at the bottom of the <graph> are visible. Even when the controls are not shown, the graph can still be panned by dragging it or zoomed by holding down Shift while scrolling. By default, showNavigation is set to true.

Attribute Example: fixAxes

<graph name="g" fixAxes="true" size="small">
  <shortDescription>A graph with the axes fixed</shortDescription>
  <point/>
  <line>y = x</line>
</graph>
 
<graph extend="$g" fixAxes="false" link="false">
  <shortDescription>A graph without the axes fixed (the default)</shortDescription>
</graph>

If the fixAxes attribute is set to true, the user cannot zoom in and out of the <graph> or pan the graph from side to side. The navigation buttons at the base of the graph will also not appear. By default, fixAxes is set to false.

Attribute Example: grid

The grid attribute specifies the spacing of the gridlines. Valid values are none, medium, dense, and a b (where a is the x-axis spacing and b is the y-axis spacing).

The default <graph> does not show a grid; however, if only grid is specified, then a default medium grid is shown.

Unless the grid="a b" specification is used, all grid spacings adapt to the scale of the graph.

Attribute Example: showBorder

The showBorder attribute can be set to false to suppress rendering of the default border.

Property Example: Attributes as properties 1

The above listed <graph> attributes are also accessible as properties.

Property Example: Attributes as properties 2

The above listed <graph> attributes are also accessible as properties.

Property Example: xScale, yScale

The xScale and yScale properties return the current extents of the graph axes and adapt to the zooming of the graph.