| [ Index ] |
|
Code source de jpGraph 2.2 |
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="7101Usingtheautomaticdatetimescale.html"> 8 <LINK REL="Next" HREF="711Adjustinglabelsonatextscale.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="7101Usingtheautomaticdatetimescale.html">Previous</A> 26 <A HREF="711Adjustinglabelsonatextscale.html">Next</A> 27 <HR NOSHADE> 28 <H3><A NAME="7_10_2">7.10.2 Specifying a date/time scale with a manual 29 call-back</A></H3> 30 <P> In the following we will assume that all data points are specified 31 by a tuple where the date/time is specified as a timestamp in second in 32 the same format as is returned by the PHP function time().</P> 33 <P> The trick here is to use a label formatting callback routine which 34 gets called to format each label on the scale.</P> 35 <P> What we do is that we specify that the X-scale should be an ordinary 36 "int" scale (remember that the data values are timestamps which are 37 integers). We then install our custom label callback (with a call to <A href="../ref/Axis.html#_AXIS_SETLABELFORMATCALLBACK"> 38 SetLabelFormatCallback()</A>) which given a timestamp formats it to a 39 suitable human readable form. In our example we will use the PHP 40 function Date() for this purpose.</P> 41 <P> The callback we use will be<DIV class="phpscript"><CODE><FONT color="#000000"> 42 <FONT color="#0000BB"> </FONT><FONT color="#FF8000"> 43 // The callback that converts timestamp to minutes and seconds 44 <BR></FONT><FONT color="#007700">function </FONT><FONT color="#0000BB"> 45 TimeCallback</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 46 $aVal</FONT><FONT color="#007700">) { 47 <BR> return </FONT><FONT color="#0000BB">Date</FONT><FONT color="#007700"> 48 (</FONT><FONT color="#DD0000">'H:i:s'</FONT><FONT color="#007700">,</FONT><FONT 49 color="#0000BB">$aVal</FONT><FONT color="#007700">); 50 <BR>}</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P> 51 <P> Using some random data we can now generate the following graph<DIV class="example"> 52 <BR> <A href="exframes/frame_dateaxisex1.html" target="blank"><IMG border="0" 53 HEIGHT="250" src="img/img/img/img/img/img/dateaxisex1.png" WIDTH="324"></A> 54 <BR><B>Figure 82:</B> Example on how to format an axis to hold a 55 date/time scale using and integer scale and a callback routine <A href="exframes/frame_dateaxisex1.html" 56 target="blank">[src]</A> 57 <P></P> 58 </DIV></P> 59 <P> In the above example we have specified the X-scale manually to make 60 sure that the min/max values on the X-axis exactly matches the min/max 61 x-data values.</P> 62 <P> SetLabelFormatCallback() will be called for each of the displayed 63 labels and the argument passed on to the supplied function is the 64 default label that the library is assigning that specific label.</P> 65 <P> This means that if the data to be displayed is based on, for 66 example, timestamps which are given in seconds the displayed value 67 might not be aligned to how time/date values normally should be 68 displayed.</P> 69 <P> Using integer scales this will not work very well since the library 70 determines label positions to be at even positions (e.g. every 2,5,10, 71 20,50,100 etc) to suit the auto-scaling since the library will assume 72 that the data is integers and not timestamp values.</P> 73 <P> The best way to solve this is to use an integer X-scale together 74 with a a callback function with a manually specified scale. In order to 75 setup the scale a bit of manually work is needed. Depending on the data 76 to be displayed one should ensure that the scale starts and ends at 77 suitable times and that the tick interval chosen fits with an even 78 multiple of minutes, hours, days or what is best suited for the time 79 range that is to be displayed.</P> 80 <P> The following code example illustrates this. It creates some "fake" 81 data that is assumed to be sampled time based data and sets up some 82 suitable scales and tick interval. This script may be used as a basis 83 for more advanced handling of the time data.<DIV class="phpscript"> 84 (File: timestampex01.php) 85 <BR><CODE><FONT color="#000000"> <FONT color="#0000BB"><?php 86 <BR></FONT><FONT color="#FF8000"> 87 // Example on how to treat and format timestamp as human readable labels 88 <BR></FONT><FONT color="#007700">require_once(</FONT><FONT color="#DD0000"> 89 "../jpgraph.php"</FONT><FONT color="#007700">); 90 <BR>require_once(</FONT><FONT color="#DD0000">"../jpgraph_line.php"</FONT><FONT 91 color="#007700">); 92 <BR> 93 <BR></FONT><FONT color="#FF8000">// Number of "fake" data points 94 <BR></FONT><FONT color="#0000BB">DEFINE</FONT><FONT color="#007700">(</FONT><FONT 95 color="#DD0000">'NDATAPOINTS'</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 96 500</FONT><FONT color="#007700">); 97 <BR> 98 <BR></FONT><FONT color="#FF8000"> 99 // Assume data points are sample every 10th second 100 <BR></FONT><FONT color="#0000BB">DEFINE</FONT><FONT color="#007700">(</FONT><FONT 101 color="#DD0000">'SAMPLERATE'</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 102 10</FONT><FONT color="#007700">); 103 <BR> 104 <BR></FONT><FONT color="#FF8000"> 105 // Callback formatting function for the X-scale to convert timestamps 106 <BR>// to hour and minutes. 107 <BR></FONT><FONT color="#007700">function </FONT><FONT color="#0000BB"> 108 TimeCallback</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 109 $aVal</FONT><FONT color="#007700">) { 110 <BR> return </FONT><FONT color="#0000BB">Date</FONT><FONT color="#007700"> 111 (</FONT><FONT color="#DD0000">'H:i'</FONT><FONT color="#007700">, </FONT><FONT 112 color="#0000BB">$aVal</FONT><FONT color="#007700">); 113 <BR>} 114 <BR> 115 <BR></FONT><FONT color="#FF8000">// Get start time 116 <BR></FONT><FONT color="#0000BB">$start </FONT><FONT color="#007700">= </FONT><FONT 117 color="#0000BB">time</FONT><FONT color="#007700">(); 118 <BR></FONT><FONT color="#FF8000"> 119 // Set the start time to be on the closest minute just before the "start" timestamp 120 <BR></FONT><FONT color="#0000BB">$adjstart </FONT><FONT color="#007700"> 121 = </FONT><FONT color="#0000BB">floor</FONT><FONT color="#007700">(</FONT><FONT 122 color="#0000BB">$start </FONT><FONT color="#007700">/ </FONT><FONT color="#0000BB"> 123 60</FONT><FONT color="#007700">); 124 <BR> 125 <BR></FONT><FONT color="#FF8000"> 126 // Create a data set in range (20,100) and X-positions 127 <BR> 128 // We also apply a simple low pass filter on the data to make it less 129 <BR>// random and a little smoother 130 <BR></FONT><FONT color="#0000BB">$data </FONT><FONT color="#007700"> 131 = array(); 132 <BR></FONT><FONT color="#0000BB">$xdata </FONT><FONT color="#007700"> 133 = array(); 134 <BR></FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">[</FONT><FONT 135 color="#0000BB">0</FONT><FONT color="#007700">] = </FONT><FONT color="#0000BB"> 136 rand</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">20</FONT><FONT 137 color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700"> 138 ); 139 <BR></FONT><FONT color="#0000BB">$xdata</FONT><FONT color="#007700">[</FONT><FONT 140 color="#0000BB">0</FONT><FONT color="#007700">] = </FONT><FONT color="#0000BB"> 141 $adjstart</FONT><FONT color="#007700">; 142 <BR>for( </FONT><FONT color="#0000BB">$i</FONT><FONT color="#007700">=</FONT><FONT 143 color="#0000BB">1</FONT><FONT color="#007700">; </FONT><FONT color="#0000BB"> 144 $i </FONT><FONT color="#007700">< </FONT><FONT color="#0000BB"> 145 NDATAPOINTS</FONT><FONT color="#007700">; ++</FONT><FONT color="#0000BB"> 146 $i </FONT><FONT color="#007700">) { 147 <BR> </FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">[</FONT><FONT 148 color="#0000BB">$i</FONT><FONT color="#007700">] = </FONT><FONT color="#0000BB"> 149 rand</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">20</FONT><FONT 150 color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700"> 151 )*</FONT><FONT color="#0000BB">0.2 </FONT><FONT color="#007700">+ </FONT><FONT 152 color="#0000BB">$data</FONT><FONT color="#007700">[</FONT><FONT color="#0000BB"> 153 $i</FONT><FONT color="#007700">-</FONT><FONT color="#0000BB">1</FONT><FONT 154 color="#007700">]*</FONT><FONT color="#0000BB">0.8</FONT><FONT color="#007700"> 155 ; 156 <BR> </FONT><FONT color="#0000BB">$xdata</FONT><FONT color="#007700"> 157 [</FONT><FONT color="#0000BB">$i</FONT><FONT color="#007700">] = </FONT><FONT 158 color="#0000BB">$adjstart </FONT><FONT color="#007700">+ </FONT><FONT color="#0000BB"> 159 $i </FONT><FONT color="#007700">* </FONT><FONT color="#0000BB"> 160 SAMPLERATE</FONT><FONT color="#007700">; 161 <BR>} 162 <BR> 163 <BR></FONT><FONT color="#FF8000"> 164 // Assume that the data points represents data that is sampled every 10s 165 <BR>// when determing the end value on the scale. We also add some extra 166 <BR>// length to end on an even label tick. 167 <BR></FONT><FONT color="#0000BB">$adjend </FONT><FONT color="#007700">= </FONT><FONT 168 color="#0000BB">$adjstart </FONT><FONT color="#007700">+ (</FONT><FONT color="#0000BB"> 169 NDATAPOINTS</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">10</FONT><FONT 170 color="#007700">)*</FONT><FONT color="#0000BB">10</FONT><FONT color="#007700"> 171 ; 172 <BR> 173 <BR></FONT><FONT color="#0000BB">$graph </FONT><FONT color="#007700"> 174 = new </FONT><FONT color="#0000BB">Graph</FONT><FONT color="#007700">(</FONT><FONT 175 color="#0000BB">500</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 176 250</FONT><FONT color="#007700">); 177 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 178 color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 179 40</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">20</FONT><FONT 180 color="#007700">,</FONT><FONT color="#0000BB">30</FONT><FONT color="#007700"> 181 ,</FONT><FONT color="#0000BB">50</FONT><FONT color="#007700">); 182 <BR> 183 <BR></FONT><FONT color="#FF8000"> 184 // Now specify the X-scale explicit but let the Y-scale be auto-scaled 185 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 186 color="#0000BB">SetScale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 187 "intlin"</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT 188 color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700"> 189 ,</FONT><FONT color="#0000BB">$adjstart</FONT><FONT color="#007700">,</FONT><FONT 190 color="#0000BB">$adjend</FONT><FONT color="#007700">); 191 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 192 color="#0000BB">title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 193 Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 194 "Example on TimeStamp Callback"</FONT><FONT color="#007700">); 195 <BR> 196 <BR></FONT><FONT color="#FF8000"> 197 // Setup the callback and adjust the angle of the labels 198 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 199 color="#0000BB">xaxis</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 200 SetLabelFormatCallback</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 201 'TimeCallback'</FONT><FONT color="#007700">); 202 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 203 color="#0000BB">xaxis</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 204 SetLabelAngle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 205 90</FONT><FONT color="#007700">); 206 <BR> 207 <BR></FONT><FONT color="#FF8000"> 208 // Set the labels every 5min (i.e. 300seconds) and minor ticks every minute 209 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 210 color="#0000BB">xaxis</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 211 scale</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">ticks</FONT><FONT 212 color="#007700">-></FONT><FONT color="#0000BB">Set</FONT><FONT color="#007700"> 213 (</FONT><FONT color="#0000BB">300</FONT><FONT color="#007700">,</FONT><FONT 214 color="#0000BB">60</FONT><FONT color="#007700">); 215 <BR> 216 <BR></FONT><FONT color="#0000BB">$line </FONT><FONT color="#007700"> 217 = new </FONT><FONT color="#0000BB">LinePlot</FONT><FONT color="#007700"> 218 (</FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">,</FONT><FONT 219 color="#0000BB">$xdata</FONT><FONT color="#007700">); 220 <BR></FONT><FONT color="#0000BB">$line</FONT><FONT color="#007700">-></FONT><FONT 221 color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 222 'lightblue'</FONT><FONT color="#007700">); 223 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 224 color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 225 $line</FONT><FONT color="#007700">); 226 <BR> 227 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 228 color="#0000BB">Stroke</FONT><FONT color="#007700">(); 229 <BR></FONT><FONT color="#0000BB">?> 230 <BR></FONT></FONT></CODE></DIV></P> 231 <HR NOSHADE> 232 <A HREF="toc.html">Contents</A> 233 <A HREF="7101Usingtheautomaticdatetimescale.html">Previous</A> 234 <A HREF="711Adjustinglabelsonatextscale.html">Next</A> 235 </BODY> 236 </HTML>
titre
Description
Corps
titre
Description
Corps
titre
Description
Corps
titre
Corps
| Généré le : Sat Nov 24 09:27:55 2007 | par Balluche grâce à PHPXref 0.7 |
|
|