<graph>

Examples Page 2

Attribute Example: identicalAxisScales

<p>Without <attr>identicalAxisScales</attr></p> 
<graph name="g" xmin="-5" xmax="5" grid="1 1" size="small">
  <point/>
  <line>y=x</line>
</graph>
 
<p>With <attr>identicalAxisScales</attr></p> 
<graph extend="$g" identicalAxisScales/>

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">
    <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">
    <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">
    <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">
    <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">
  <point/>
  <line>y = x</line>
</graph>
 
<graph extend="$g" showNavigation="true"/>

The showNavigation attribute controls whether the default zooming and panning controls at the bottom of the <graph> are visible.

Attribute Example: fixAxes

<graph name="g" fixAxes="true" size="small">
  <point/>
  <line>y = x</line>
</graph>
 
<graph extend="$g" fixAxes="false" link="false"/>

If the fixAxes attribute is set to true, the user cannot zoom in and out of the <graph>. 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.