[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2  <HTML>
   3  <HEAD>
   4  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-iso-8859-1">
   5  <LINK REL="Start" HREF="index.html">
   6  <LINK REL="Contents" HREF="toc.html">
   7  <LINK REL="Prev" HREF="810Handlingdatetimescales.html">
   8  <LINK REL="Next" HREF="8102Specifyingadatetimescalewithamanualcallback.html">
   9  <STYLE TYPE="text/css"><!--
  10  BODY { font-family: serif }
  11  H1 { font-family: sans-serif }
  12  H2 { font-family: sans-serif }
  13  H3 { font-family: sans-serif }
  14  H4 { font-family: sans-serif }
  15  H5 { font-family: sans-serif }
  16  H6 { font-family: sans-serif }
  17  SUB { font-size: smaller }
  18  SUP { font-size: smaller }
  19  PRE { font-family: monospace }
  20  A { text-decoration: none }
  21  --></STYLE>
  22  </HEAD>
  23  <BODY>
  24  <A HREF="toc.html">Contents</A>
  25  <A HREF="810Handlingdatetimescales.html">Previous</A>
  26  <A HREF="8102Specifyingadatetimescalewithamanualcallback.html">Next</A>
  27  <HR NOSHADE>
  28  <H3><A NAME="8_10_1">8.10.1 Using the automatic date/time scale</A></H3>
  29  <P> The easiest way to get a date time scale for the X-axis is to use
  30   the pre-defined &quot;dat&quot; scale. To be able to use that it is first
  31   necessary to include the module<I> &quot;jpgraph_date.php&quot;</I> and the
  32   specify the scale, for example as &quot;datlin&quot; in the call to<I> SetScale()</I>
  33   as the following code snippet shows.<DIV class="phpscript"><CODE><FONT color="#000000">
  34   <FONT color="#0000BB">&nbsp;</FONT><FONT color="#007700">require_once(</FONT><FONT
  35  color="#DD0000">&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">);
  36  <BR>require_once(</FONT><FONT color="#DD0000">&quot;../jpgraph_line.php&quot;</FONT><FONT
  37  color="#007700">);
  38  <BR>require_once(</FONT><FONT color="#DD0000">&quot;../jpgraph_date.php&quot;</FONT><FONT
  39  color="#007700">);
  40  <BR>...
  41  <BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
  42  =&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Graph</FONT><FONT color="#007700">(</FONT><FONT
  43  color="#0000BB">540</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
  44  300</FONT><FONT color="#007700">);
  45  <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
  46  color="#0000BB">SetScale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
  47  'datlin'</FONT><FONT color="#007700">);
  48  <BR>...</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
  49  <P> The above code snippet would create a date/linear scale for the
  50   graph. We will first show a basic use of the date scale and then go on
  51   to illustrate how it is possible to tailor the exact formatting of the
  52   date axis.</P>
  53  <P> When using the fully automatic formatting the library will use the
  54   shortest possible string that uniquely identifieas a date/time. For
  55   example if the entire intervall falls within the same day only the time
  56   values will be displayed, if the intervall falls over several days then
  57   also the date will be added to the label.</P>
  58  <P> As usual it is also possible to manually force a certain label
  59   formatting to be used this is illustrated below.</P>
  60  <H4>8.10.1.1 Specifying the input data</H4>
  61  <P> The first basic example below creates a data set that emulates a
  62   sample rate every S second and falls over a total period of two days.
  63   It is important to note that the input data on the X-axis must be a in
  64   the form of timestamp data, i.e. the number of seconds from the system
  65   epoch. In PHP the current timestamp value is returned by the function<I>
  66   time()</I>.</P>
  67  <P> This means that it is always mandatory to specify two input vectors
  68   for a plot. For example to specify a line plot<DIV class="phpscript"><CODE>
  69  <FONT color="#000000"> <FONT color="#0000BB">&nbsp;$line&nbsp;</FONT><FONT color="#007700">
  70  =&nbsp;new&nbsp;</FONT><FONT color="#0000BB">LinePlot</FONT><FONT color="#007700">
  71  (</FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">,</FONT><FONT
  72  color="#0000BB">$xdata</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
  73  </FONT></FONT></CODE></DIV></P>
  74  <P> The example below show this in practice<DIV class="example">
  75  <BR> <A href="exframes/frame_dateaxisex2.html" target="blank"><IMG border="0"
  76  HEIGHT="300"  src="img/dateaxisex2.png" WIDTH="540"></A>
  77  <BR><B>Figure 76:</B> Using the special date X-axis with all default
  78   values <A href="exframes/frame_dateaxisex2.html" target="blank">[src]</A>
  79  &nbsp;
  80  <P></P>
  81  </DIV></P>
  82  <P> Please review the script (by following the [src] link) that creates
  83   this graph before continuing since we will base all further examples on
  84   the above example.</P>
  85  <H4>8.10.1.2 Adjusting the start and end alignment</H4>
  86  <P> As can be seen from the above example the scale starts slightly
  87   before the first data point. Why? This is of course by purpose in order
  88   to make the first time label to start on an &quot;even&quot; value, in this case
  89   on an hour. Depending on the entire interval of the graph the start
  90   value will always be chosen to be the largest &quot;even&quot; time value, this
  91   could for example be on an even minute, even 30min, even hour, even
  92   day, even week and so on.</P>
  93  <P> The alignment of the start (and end) vdate alignment can also be
  94   adjusted manually by using the two methods</P>
  95  <UL>
  96  <LI><I> SetTimeAlign($aStartAlign,$aEndAlign)</I></LI>
  97  <LI><I> SetDateAlign($aStartAlign,$aEndAlign)</I></LI>
  98  </UL>
  99  <P> These method allow the alignment to be made by specifying one of the
 100   following constants.</P>
 101  <P> For the SetTimeAlign() the following symbolic constants can be used</P>
 102  <OL>
 103  <LI> Alignment on seconds
 104  <UL>
 105  <LI> MINADJ_1, Align on a single second (This is the lowest resolution)</LI>
 106  <LI> MINADJ_5, Align on the nearest 5 seconds</LI>
 107  <LI> MINADJ_10, Align on the nearest 10 seconds</LI>
 108  <LI> MINADJ_15, Align on the nearest 15 seconds</LI>
 109  <LI> MINADJ_30, Align on the nearest 30 seconds</LI>
 110  </UL>
 111  </LI>
 112  <LI> Alignment on minutes
 113  <UL>
 114  <LI> MINADJ_1, Align to the nearest minute</LI>
 115  <LI> MINADJ_5, Align on the nearest 5 minutes</LI>
 116  <LI> MINADJ_10, Align on the nearest 10 minutes</LI>
 117  <LI> MINADJ_15, Align on the nearest 15 minutes</LI>
 118  <LI> MINADJ_30, Align on the nearest 30 minutes</LI>
 119  </UL>
 120  </LI>
 121  <LI> Alignment on hours
 122  <UL>
 123  <LI> HOURADJ_1, Align to the nearest hour</LI>
 124  <LI> HOURADJ_2, Align to the nearest two hour</LI>
 125  <LI> HOURADJ_3, Align to the nearest three hour</LI>
 126  <LI> HOURADJ_4, Align to the nearest four hour</LI>
 127  <LI> HOURADJ_6, Align to the nearest six hour</LI>
 128  <LI> HOURADJ_12, Align to the nearest tolw hour</LI>
 129  </UL>
 130  </LI>
 131  </OL>
 132  <P> For the<I> SetDateAlign()</I> the following symbolic constants can
 133   be used</P>
 134  <OL>
 135  <LI> Alignment on a day basis
 136  <UL>
 137  <LI> DAYADJ_1, Align on the start of a day</LI>
 138  <LI> DAYADJ_7, Align on the start of a week</LI>
 139  <LI> DAYADJ_WEEK, Synonym to DAYADJ_7</LI>
 140  </UL>
 141  </LI>
 142  <LI> Alignment on a monthly basis
 143  <UL>
 144  <LI> MONTHADJ_1, Align on a month start</LI>
 145  <LI> MONTHADJ_6, Align on the start of halfyear</LI>
 146  </UL>
 147  </LI>
 148  <LI> Alignment on a yearly basis
 149  <UL>
 150  <LI> YEARADJ_1, Align on a year</LI>
 151  <LI> YEARADJ_2, Align on a bi-yearly basis</LI>
 152  <LI> YEARADJ_5, Align on a 5 year basis</LI>
 153  </UL>
 154  </LI>
 155  </OL>
 156  <P> Some examples will calrify the use of these methods.</P>
 157  <P><B> Example 1.</B> We want the time adjustment to start on an even
 158   quarter of an hour, i.e. an even 15 minute period.<DIV class="phpscript">
 159  <CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
 160  -&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
 161  color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
 162  SetTimeAlign</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
 163  MINADJ_15</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
 164  </FONT></CODE></DIV></P>
 165  <P></P>
 166  <P><B> Example 2.</B> We want the time to start on an even 2 hour<DIV class="phpscript">
 167  <CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
 168  -&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
 169  color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
 170  SetTimeAlign</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
 171  HOURADJ_2</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
 172  </FONT></CODE></DIV></P>
 173  <P></P>
 174  <P><B> Example 3.</B> We want the start to be on an even day<DIV class="phpscript">
 175  <CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
 176  -&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
 177  color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
 178  SetDateAlign</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
 179  DAYADJ_1</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
 180  </FONT></CODE></DIV></P>
 181  <P></P>
 182  <H4>8.10.1.3 Adjusting the label format</H4>
 183  <P> The default label format always tries to use the shortest possible
 184   unique string. To manually set a manual scale the method<I>
 185   SetDateFormat()</I> is used for example as in<DIV class="phpscript"><CODE>
 186  <FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
 187  -&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
 188  color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
 189  SetDateFormat</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
 190  'H:i'</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
 191  </CODE></DIV></P>
 192  <P>The above example will force the labels to be displayed as hour (24h)
 193   and minutes.<DIV class="example">
 194  <BR> <A href="exframes/frame_dateaxisex4.html" target="blank"><IMG border="0"
 195  HEIGHT="300"  src="img/dateaxisex4.png" WIDTH="540"></A>
 196  <BR><B>Figure 77:</B> Using specific label format and align time axis to
 197   start and end on an even 10min <A href="exframes/frame_dateaxisex4.html"
 198  target="blank">[src]</A>&nbsp;
 199  <P></P>
 200  </DIV></P>
 201  <P></P>
 202  <H4>8.10.1.4 Adjusting the date scale density</H4>
 203  <P> As with the linear scale it is possible to indicate what density of
 204   scale ticks is needed. This is specified as usual with a call to<I>
 205   Graph::SetTickDensity()</I><DIV class="phpscript"><CODE><FONT color="#000000">
 206   <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
 207  color="#0000BB">SetTickDensity</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
 208  TICKD_DENSE</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
 209  </FONT></CODE></DIV></P>
 210  <P></P>
 211  <HR NOSHADE>
 212  <A HREF="toc.html">Contents</A>
 213  <A HREF="810Handlingdatetimescales.html">Previous</A>
 214  <A HREF="8102Specifyingadatetimescalewithamanualcallback.html">Next</A>
 215  </BODY>
 216  </HTML>