| 1 |
lars |
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="8101Usingtheautomaticdatetimescale.html">
|
|
|
8 |
<LINK REL="Next" HREF="811Adjustinglabelsonatextscale.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="8101Usingtheautomaticdatetimescale.html">Previous</A>
|
|
|
26 |
<A HREF="811Adjustinglabelsonatextscale.html">Next</A>
|
|
|
27 |
<HR NOSHADE>
|
|
|
28 |
<H3><A NAME="8_10_2">8.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/dateaxisex1.png" WIDTH="324"></A>
|
|
|
54 |
<BR><B>Figure 78:</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="8101Usingtheautomaticdatetimescale.html">Previous</A>
|
|
|
234 |
<A HREF="811Adjustinglabelsonatextscale.html">Next</A>
|
|
|
235 |
</BODY>
|
|
|
236 |
</HTML>
|