| 98 |
- |
1 |
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
|
|
|
2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>4.10. Image Maps for Plot Data</title><link rel="stylesheet" type="text/css" href="phplotdoc.css" /><meta name="generator" content="DocBook XSL Stylesheets V1.78.1" /><link rel="home" href="index.html" title="PHPlot Reference Manual" /><link rel="up" href="advanced.html" title="Chapter 4. PHPlot Advanced Topics" /><link rel="prev" href="adv-streaming.html" title="4.9. Streaming Plots" /><link rel="next" href="examples.html" title="Chapter 5. PHPlot Examples" /></head><body><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">4.10. Image Maps for Plot Data</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="adv-streaming.html">Prev</a> </td><th width="60%" align="center">Chapter 4. PHPlot Advanced Topics</th><td width="20%" align="right"> <a accesskey="n" href="examples.html">Next</a></td></tr></table><hr /></div><div class="sect1"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a id="adv-imgmap"></a>4.10. Image Maps for Plot Data</h2></div></div></div><div class="abstract"><p class="title"><strong></strong></p><p>
|
|
|
3 |
This section describes the use of the <code class="literal">data_points</code>
|
|
|
4 |
callback to generate an HTML image map (or other similar construct) from
|
|
|
5 |
plot data.
|
|
|
6 |
An image map created using this callback will contain links from the
|
|
|
7 |
data points or shapes on the plot.
|
|
|
8 |
This feature was first added in PHPlot-5.7.0 as an experimental feature,
|
|
|
9 |
and was first documented in this Reference Manual with PHPlot-6.0.0.
|
|
|
10 |
</p></div><div class="note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3><p>
|
|
|
11 |
Use of callbacks is documented in <a class="xref" href="callbacks.html" title="4.4. Callbacks">Section 4.4, “Callbacks”</a>.
|
|
|
12 |
</p></div><p>
|
|
|
13 |
The <code class="literal">data_points</code> callback makes the
|
|
|
14 |
<a class="link" href="concepts.html#def-devcoor">device coordinates</a> of
|
|
|
15 |
plotted data available to a script using PHPlot.
|
|
|
16 |
If a script registers a function as a handler for the
|
|
|
17 |
<code class="literal">data_points</code> callback name, the function will be called
|
|
|
18 |
repeatedly when the plot is being generated. Each call will contain
|
|
|
19 |
parameters describing the graphics for the corresponding data point.
|
|
|
20 |
These parameters can be used to create an HTML image map.
|
|
|
21 |
</p><p>
|
|
|
22 |
This feature is most likely only useful when generating embedded image data
|
|
|
23 |
with PHPlot.
|
|
|
24 |
(See <a class="xref" href="EncodeImage.html" title="EncodeImage"><span class="refentrytitle">EncodeImage</span></a> for details on embedded image data.)
|
|
|
25 |
This is because HTML requires the image map be included in the
|
|
|
26 |
HTML page which contains the reference to the plot image.
|
|
|
27 |
The browser will first request the HTML page, then make a second request for
|
|
|
28 |
the image. Normally, the image is generated by a script using PHPlot, but
|
|
|
29 |
the image map has to be available before this script runs.
|
|
|
30 |
Using embedded image data allows a single PHP script to produce both the
|
|
|
31 |
image map and the image data, and return the result as a single page.
|
|
|
32 |
</p><p>
|
|
|
33 |
Nevertheless, it is also possible to create an image map with a non-embedded
|
|
|
34 |
image. See <a class="xref" href="adv-imgmap.html#adv-imgmap-nonembed" title="4.10.4. Image Maps with Non-embedded Image Data">Section 4.10.4, “Image Maps with Non-embedded Image Data”</a> for details.
|
|
|
35 |
</p><p>
|
|
|
36 |
The <code class="literal">data_points</code> callback works with the following plot
|
|
|
37 |
types:
|
|
|
38 |
</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem"><p>
|
|
|
39 |
<a class="link" href="conc-plottypes.html#plottype-bars" title="3.4.2. Plot Type: bars (Bar Plot)">bars</a> and
|
|
|
40 |
<a class="link" href="conc-plottypes.html#plottype-stackedbars" title="3.4.15. Plot Type: stackedbars (Stacked Bar Plot)">stackedbars</a>
|
|
|
41 |
(both horizontal and vertical)
|
|
|
42 |
</p></li><li class="listitem"><p>
|
|
|
43 |
<a class="link" href="conc-plottypes.html#plottype-boxes" title="3.4.3. Plot Type: boxes (Box Plot)">boxes</a>
|
|
|
44 |
</p></li><li class="listitem"><p>
|
|
|
45 |
<a class="link" href="conc-plottypes.html#plottype-bubbles" title="3.4.4. Plot Type: bubbles (Bubble Plot)">bubbles</a>
|
|
|
46 |
</p></li><li class="listitem"><p>
|
|
|
47 |
<a class="link" href="conc-plottypes.html#plottype-ohlc" title="3.4.9. Plot Type: ohlc (Basic OHLC Plot)">ohlc</a>,
|
|
|
48 |
<a class="link" href="conc-plottypes.html#plottype-candlesticks" title="3.4.5. Plot Type: candlesticks (OHLC Candlesticks Plot)">candlesticks</a>, and
|
|
|
49 |
<a class="link" href="conc-plottypes.html#plottype-candlesticks2" title="3.4.6. Plot Type: candlesticks2 (OHLC Filled Candlesticks Plot)">candlesticks2</a>
|
|
|
50 |
</p></li><li class="listitem"><p>
|
|
|
51 |
<a class="link" href="conc-plottypes.html#plottype-pie" title="3.4.10. Plot Type: pie (Pie Plot)">pie</a>
|
|
|
52 |
</p></li><li class="listitem"><p>
|
|
|
53 |
<a class="link" href="conc-plottypes.html#plottype-points" title="3.4.11. Plot Type: points (Styled Dot Plot)">points</a> and
|
|
|
54 |
<a class="link" href="conc-plottypes.html#plottype-linepoints" title="3.4.7. Plot Type: linepoints (Lines and Points Plot)">linepoints</a>
|
|
|
55 |
(both standard and error bar plots)
|
|
|
56 |
</p></li></ul></div><p>
|
|
|
57 |
No other plot type is supported. This includes
|
|
|
58 |
<code class="literal">lines</code>,
|
|
|
59 |
<code class="literal">squared</code>, and
|
|
|
60 |
<code class="literal">thinbarline</code>,
|
|
|
61 |
which do not have well-defined areas which could map to data points, and
|
|
|
62 |
<code class="literal">area</code>,
|
|
|
63 |
<code class="literal">squaredarea</code>,
|
|
|
64 |
<code class="literal">stackedarea</code>, and
|
|
|
65 |
<code class="literal">stackedsquaredarea</code>
|
|
|
66 |
for which this feature has not been implemented.
|
|
|
67 |
</p><p>
|
|
|
68 |
The rest of this section contains details on the callback, usage with
|
|
|
69 |
each plot type, and additional information.
|
|
|
70 |
</p><div class="sect2"><div class="titlepage"><div><div><h3 class="title"><a id="adv-imgmap-usage"></a>4.10.1. Image Maps - Usage</h3></div></div></div><p>
|
|
|
71 |
To register a callback function to handle <code class="literal">data_points</code>, use:
|
|
|
72 |
</p><pre class="programlisting">$plot->SetCallback('data_points', 'my_handler', $my_arg);
|
|
|
73 |
</pre><p>
|
|
|
74 |
Where <code class="literal">my_handler</code> is the name of your function,
|
|
|
75 |
<code class="literal">$my_arg</code> is an optional additional argument to pass
|
|
|
76 |
to your function.
|
|
|
77 |
</p><p>
|
|
|
78 |
The <code class="literal">data_points</code> callback function
|
|
|
79 |
(<code class="function">my_handler()</code> above) will be called with 5
|
|
|
80 |
fixed-purpose arguments followed by variable arguments. The number and
|
|
|
81 |
purpose of the variable arguments depends on the plot type. If your
|
|
|
82 |
handler only needs to work with one specific plot type, you can declare
|
|
|
83 |
these arguments in your function definition.
|
|
|
84 |
</p><p>
|
|
|
85 |
If your handler must handle multiple plot types, define your function without
|
|
|
86 |
arguments and use <code class="function">func_get_arg()</code> or
|
|
|
87 |
<code class="function">func_get_args()</code> to access the arguments.
|
|
|
88 |
You can use the value of the 3rd argument, <code class="literal">$shape</code>,
|
|
|
89 |
to determine the number and usage of the variable arguments, since there is
|
|
|
90 |
one specific function argument set for each value of <code class="literal">$shape</code>.
|
|
|
91 |
See <a class="xref" href="adv-imgmap.html#adv-imgmap-callback" title="4.10.2. Image Maps - data_points Callback Parameter Summary">Section 4.10.2, “Image Maps - data_points Callback Parameter Summary”</a> for more information.
|
|
|
92 |
</p><p>
|
|
|
93 |
Here are the fixed arguments to the <code class="literal">data_points</code>
|
|
|
94 |
callback function, with this general declaration:
|
|
|
95 |
</p><pre class="programlisting">function my_handler($img, $passthru, $shape, $row, $column, ...)
|
|
|
96 |
</pre><p>
|
|
|
97 |
</p><div class="variablelist"><dl class="variablelist"><dt><span class="term">$img</span></dt><dd><p>
|
|
|
98 |
The image resource (standard for all callbacks).
|
|
|
99 |
Not generally used with a <code class="literal">data_points</code> callback, which
|
|
|
100 |
cannot safely draw on the image (since PHPlot is in the middle of drawing
|
|
|
101 |
the plot on the same image).
|
|
|
102 |
</p></dd><dt><span class="term">$passthru</span></dt><dd><p>
|
|
|
103 |
Pass-through argument, supplied in the <a class="xref" href="SetCallback.html" title="SetCallback"><span class="refentrytitle">SetCallback</span></a>() call
|
|
|
104 |
(standard for all callbacks, referred to above as <code class="literal">$my_arg</code>).
|
|
|
105 |
You can use this however you want, or ignore it.
|
|
|
106 |
</p></dd><dt><span class="term">$shape</span></dt><dd><p>
|
|
|
107 |
A word describing the shape of the area being described. This does not
|
|
|
108 |
necessarily correspond to an HTML image map <area> shape.
|
|
|
109 |
Each plot type passes a specific shape value, and the shape value defines
|
|
|
110 |
the usage of the variable arguments.
|
|
|
111 |
</p></dd><dt><span class="term">$row</span></dt><dd><p>
|
|
|
112 |
The number of the data row being plotted. This typically corresponds
|
|
|
113 |
to the ordinal of the X axis values (Y for horizontal plots), starting
|
|
|
114 |
with 0 for the first point, 1 for the second point, etc.
|
|
|
115 |
</p></dd><dt><span class="term">$column</span></dt><dd><p>
|
|
|
116 |
The column, or data set index, starting with 0 for the first data set.
|
|
|
117 |
This indicates which Y value for a given X, for example, or
|
|
|
118 |
which bar within a bar group, or segment within a stacked bar.
|
|
|
119 |
(For horizontal plots, this would indicate which X for a given Y.)
|
|
|
120 |
Always 0 for pie charts and OHLC plots, which only have a single data set.
|
|
|
121 |
</p></dd></dl></div><p>
|
|
|
122 |
</p><p>
|
|
|
123 |
For the variable arguments, refer to the sections below which describe each
|
|
|
124 |
plot type.
|
|
|
125 |
</p><div class="sect3"><div class="titlepage"><div><div><h4 class="title"><a id="adv-imgmap-bars"></a>4.10.1.1. Image Maps from Bars and Stackedbars Plots</h4></div></div></div><p>
|
|
|
126 |
With plot types <a class="link" href="conc-plottypes.html#plottype-bars" title="3.4.2. Plot Type: bars (Bar Plot)">bars</a>
|
|
|
127 |
and <a class="link" href="conc-plottypes.html#plottype-stackedbars" title="3.4.15. Plot Type: stackedbars (Stacked Bar Plot)">stackedbars</a>,
|
|
|
128 |
an image map can be produced which indicates the area of each bar or stacked
|
|
|
129 |
bar segment. This works with both vertical and horizontal plots.
|
|
|
130 |
</p><p>
|
|
|
131 |
For bar and stackedbar plots, the <code class="literal">data_points</code> callback
|
|
|
132 |
has this form:
|
|
|
133 |
</p><pre class="programlisting">function my_handler($img, $passthru, $shape, $row, $column, $x1, $y1, $x2, $y2)
|
|
|
134 |
</pre><p>
|
|
|
135 |
The first 2 arguments are standard for all PHPlot callbacks and are not
|
|
|
136 |
described here. The next 3 arguments are common to all data_points
|
|
|
137 |
callbacks, and there are 4 additional arguments:
|
|
|
138 |
</p><div class="variablelist"><dl class="variablelist"><dt><span class="term">$shape</span></dt><dd><p>
|
|
|
139 |
Always <code class="literal">rect</code>, indicating a rectangle shape.
|
|
|
140 |
</p></dd><dt><span class="term">$row</span></dt><dd><p>
|
|
|
141 |
This is the bar group index.
|
|
|
142 |
The left-most bar group (for vertical bar charts) is row 0.
|
|
|
143 |
</p></dd><dt><span class="term">$column</span></dt><dd><p>
|
|
|
144 |
This is the bar index within a group. For vertical plot type 'bars', index 0
|
|
|
145 |
is the left-most in the group. For vertical plot type 'stackedbars', index 0
|
|
|
146 |
is the bar segment closest to the X axis.
|
|
|
147 |
</p></dd><dt><span class="term">$x1, $y1</span></dt><dd><p>
|
|
|
148 |
Device coordinates of the upper left corner of a bar or segment.
|
|
|
149 |
</p></dd><dt><span class="term">$x2, $y2</span></dt><dd><p>
|
|
|
150 |
Device coordinates of the lower right corner of a bar or segment.
|
|
|
151 |
</p></dd></dl></div><p>
|
|
|
152 |
</p><p>
|
|
|
153 |
Generating an image map for bar and stackedbar plots is straight-forward.
|
|
|
154 |
The provided <code class="literal">$shape</code> and coordinates are compatible with
|
|
|
155 |
HTML <area> markup.
|
|
|
156 |
You must provide the URL, alternate text, and optionally a title (tooltip text).
|
|
|
157 |
</p><p>
|
|
|
158 |
This example appends the image map line to a string.
|
|
|
159 |
sprintf() is used to convert the coordinates to integers for cleaner HTML.
|
|
|
160 |
</p><pre class="programlisting">$coords = sprintf("%d,%d,%d,%d", $x1, $y1, $x2, $y2);
|
|
|
161 |
$image_map .= " <area shape=\"rect\" coords=\"$coords\""
|
|
|
162 |
.. " title=\"$title_text\" alt=\"$alt_text\" href=\"$url\">\n";
|
|
|
163 |
</pre><p>
|
|
|
164 |
The <code class="literal">$url</code>, <code class="literal">$title_text</code>, and
|
|
|
165 |
<code class="literal">$alt_text</code> would typically depend on the passed
|
|
|
166 |
<code class="literal">$row</code> and <code class="literal">$column</code>.
|
|
|
167 |
</p><p>
|
|
|
168 |
Refer to <a class="xref" href="ex-imagemap-bars.html" title="5.44. Example - Image Map from Bar Chart">Section 5.44, “Example - Image Map from Bar Chart”</a> for a complete example of an
|
|
|
169 |
image map for a bar chart.
|
|
|
170 |
</p></div><div class="sect3"><div class="titlepage"><div><div><h4 class="title"><a id="adv-imgmap-boxes"></a>4.10.1.2. Image Maps from Box Plots</h4></div></div></div><p>
|
|
|
171 |
With plot type <a class="link" href="conc-plottypes.html#plottype-boxes" title="3.4.3. Plot Type: boxes (Box Plot)">boxes</a>, an image map
|
|
|
172 |
can be produced which indicates the area of each data point.
|
|
|
173 |
This area is the bounding box which includes the box and both whiskers.
|
|
|
174 |
The bounding box does not include any outliers.
|
|
|
175 |
</p><p>
|
|
|
176 |
For box plots, the <code class="literal">data_points</code> callback
|
|
|
177 |
has this form:
|
|
|
178 |
</p><pre class="programlisting">function my_handler($img, $passthru, $shape, $row, $column, $x1, $y1, $x2, $y2)
|
|
|
179 |
</pre><p>
|
|
|
180 |
The first 2 arguments are standard for all PHPlot callbacks and are not
|
|
|
181 |
described here. The next 3 arguments are common to all data_points
|
|
|
182 |
callbacks, and there are 4 additional arguments:
|
|
|
183 |
</p><div class="variablelist"><dl class="variablelist"><dt><span class="term">$shape</span></dt><dd><p>
|
|
|
184 |
Always <code class="literal">rect</code>, indicating a rectangle shape.
|
|
|
185 |
</p></dd><dt><span class="term">$row</span></dt><dd><p>
|
|
|
186 |
The index of the data row, starting with 0 for the first X value.
|
|
|
187 |
</p></dd><dt><span class="term">$column</span></dt><dd><p>
|
|
|
188 |
This is unused, and always 0.
|
|
|
189 |
</p></dd><dt><span class="term">$x1, $y1</span></dt><dd><p>
|
|
|
190 |
Device coordinates of the upper left corner.
|
|
|
191 |
</p></dd><dt><span class="term">$x2, $y2</span></dt><dd><p>
|
|
|
192 |
Device coordinates of the lower right corner.
|
|
|
193 |
</p></dd></dl></div><p>
|
|
|
194 |
The upper left and lower right coordinates above refer to the bounding box
|
|
|
195 |
as described above.
|
|
|
196 |
</p><p>
|
|
|
197 |
Generating an image map for box plots is straight-forward.
|
|
|
198 |
The provided <code class="literal">$shape</code> and coordinates are compatible with
|
|
|
199 |
HTML <area> markup.
|
|
|
200 |
You must provide the URL, alternate text, and optionally a title (tooltip text).
|
|
|
201 |
</p><p>
|
|
|
202 |
This example appends the image map line to a string.
|
|
|
203 |
sprintf() is used to convert the coordinates to integers for cleaner HTML.
|
|
|
204 |
</p><pre class="programlisting">$coords = sprintf("%d,%d,%d,%d", $x1, $y1, $x2, $y2);
|
|
|
205 |
$image_map .= " <area shape=\"rect\" coords=\"$coords\""
|
|
|
206 |
.. " title=\"$title_text\" alt=\"$alt_text\" href=\"$url\">\n";
|
|
|
207 |
</pre><p>
|
|
|
208 |
The <code class="literal">$url</code>, <code class="literal">$title_text</code>, and
|
|
|
209 |
<code class="literal">$alt_text</code> would typically depend on the passed
|
|
|
210 |
<code class="literal">$row</code>.
|
|
|
211 |
</p><p>
|
|
|
212 |
<a class="xref" href="ex-imagemap-bars.html" title="5.44. Example - Image Map from Bar Chart">Section 5.44, “Example - Image Map from Bar Chart”</a> contains a complete example of an
|
|
|
213 |
image map for a bar chart, and the parameters and usage for box plots are
|
|
|
214 |
the same except that the $col (column) parameter is always 0, since there
|
|
|
215 |
is only one data set.
|
|
|
216 |
</p></div><div class="sect3"><div class="titlepage"><div><div><h4 class="title"><a id="adv-imgmap-bubble"></a>4.10.1.3. Image Maps from Bubbles Plots</h4></div></div></div><p>
|
|
|
217 |
With plot type <a class="link" href="conc-plottypes.html#plottype-bubbles" title="3.4.4. Plot Type: bubbles (Bubble Plot)">bubbles</a>,
|
|
|
218 |
an image map can be produced which indicates the area of each bubble.
|
|
|
219 |
</p><p>
|
|
|
220 |
For bubbles plots, the <code class="literal">data_points</code> callback
|
|
|
221 |
has this form:
|
|
|
222 |
</p><pre class="programlisting">function my_handler($img, $passthru, $shape, $row, $column, $x, $y, $diam)
|
|
|
223 |
</pre><p>
|
|
|
224 |
The first 2 arguments are standard for all PHPlot callbacks and are not
|
|
|
225 |
described here. The next 3 arguments are common to all data_points
|
|
|
226 |
callbacks, and there are 3 additional arguments:
|
|
|
227 |
</p><div class="variablelist"><dl class="variablelist"><dt><span class="term">$shape</span></dt><dd><p>
|
|
|
228 |
Always <code class="literal">circle</code>, indicating a disk shape.
|
|
|
229 |
</p></dd><dt><span class="term">$row</span></dt><dd><p>
|
|
|
230 |
The row is the index for the independent variable X.
|
|
|
231 |
The first X value has index 0.
|
|
|
232 |
</p></dd><dt><span class="term">$column</span></dt><dd><p>
|
|
|
233 |
The column is the index for the dependent variable Y.
|
|
|
234 |
For the first (or only) dataset for each X, the column index is 0.
|
|
|
235 |
</p></dd><dt><span class="term">$x, $y</span></dt><dd><p>
|
|
|
236 |
Device coordinates of the center of the bubble.
|
|
|
237 |
</p></dd><dt><span class="term">$diam</span></dt><dd><p>
|
|
|
238 |
Diameter of the bubble, in pixels.
|
|
|
239 |
</p></dd></dl></div><p>
|
|
|
240 |
</p><p>
|
|
|
241 |
Generating an image map for bubble plots is straight-forward.
|
|
|
242 |
PHPlot provides parameters that are compatible with HTML image map markup,
|
|
|
243 |
except that PHPlot provides a diameter, and HTML requires the radius.
|
|
|
244 |
</p><p>
|
|
|
245 |
Here is an example of generating one area in an image map from a bubbles
|
|
|
246 |
plot. You must provide the URL, alternate text, and
|
|
|
247 |
optionally a title (tooltip text). This appends the image map line to a
|
|
|
248 |
string. sprintf() is used to convert the coordinates to integers for
|
|
|
249 |
cleaner HTML.
|
|
|
250 |
</p><pre class="programlisting">$coords = sprintf("%d,%d,%d", $x, $y, $diam / 2);
|
|
|
251 |
$image_map .= " <area shape=\"circle\" coords=\"$coords\""
|
|
|
252 |
. " title=\"$title_text\" alt=\"$alt_text\" href=\"$url\">\n";
|
|
|
253 |
</pre><p>
|
|
|
254 |
The <code class="literal">$url</code>, <code class="literal">$title_text</code>, and
|
|
|
255 |
<code class="literal">$alt_text</code> would typically depend on the passed
|
|
|
256 |
<code class="literal">$row</code> and <code class="literal">$column</code>.
|
|
|
257 |
</p><p>
|
|
|
258 |
Other than the above code, a script to generate an image map for a bubbles
|
|
|
259 |
plot would be similar to <a class="xref" href="ex-imagemap-bars.html" title="5.44. Example - Image Map from Bar Chart">Section 5.44, “Example - Image Map from Bar Chart”</a>, which produces
|
|
|
260 |
a bar chart.
|
|
|
261 |
</p></div><div class="sect3"><div class="titlepage"><div><div><h4 class="title"><a id="adv-imgmap-ohlc"></a>4.10.1.4. Image Maps from Financial OHLC Plots</h4></div></div></div><p>
|
|
|
262 |
With plot types <a class="link" href="conc-plottypes.html#plottype-ohlc" title="3.4.9. Plot Type: ohlc (Basic OHLC Plot)">ohlc</a>,
|
|
|
263 |
<a class="link" href="conc-plottypes.html#plottype-candlesticks" title="3.4.5. Plot Type: candlesticks (OHLC Candlesticks Plot)">candlesticks</a>, and
|
|
|
264 |
<a class="link" href="conc-plottypes.html#plottype-candlesticks2" title="3.4.6. Plot Type: candlesticks2 (OHLC Filled Candlesticks Plot)">candlesticks2</a>
|
|
|
265 |
(collectively called OHLC - open, high, low, close plots),
|
|
|
266 |
an image map can be produced which indicates the area of each data point.
|
|
|
267 |
For candlesticks and candlesticks2 plots, this area is the bounding box
|
|
|
268 |
containing the candlestick and its wicks.
|
|
|
269 |
For ohlc plots, this area is the bounding box formed by the vertical line
|
|
|
270 |
and horizontal ticks.
|
|
|
271 |
</p><p>
|
|
|
272 |
For OHLC plots, the <code class="literal">data_points</code> callback
|
|
|
273 |
has this form:
|
|
|
274 |
</p><pre class="programlisting">function my_handler($img, $passthru, $shape, $row, $column, $x1, $y1, $x2, $y2)
|
|
|
275 |
</pre><p>
|
|
|
276 |
The first 2 arguments are standard for all PHPlot callbacks and are not
|
|
|
277 |
described here. The next 3 arguments are common to all data_points
|
|
|
278 |
callbacks, and there are 4 additional arguments:
|
|
|
279 |
</p><div class="variablelist"><dl class="variablelist"><dt><span class="term">$shape</span></dt><dd><p>
|
|
|
280 |
Always <code class="literal">rect</code>, indicating a rectangle shape.
|
|
|
281 |
</p></dd><dt><span class="term">$row</span></dt><dd><p>
|
|
|
282 |
The index of the data row, starting with 0 for the first X value.
|
|
|
283 |
</p></dd><dt><span class="term">$column</span></dt><dd><p>
|
|
|
284 |
This is unused, and always 0.
|
|
|
285 |
</p></dd><dt><span class="term">$x1, $y1</span></dt><dd><p>
|
|
|
286 |
Device coordinates of the upper left corner.
|
|
|
287 |
</p></dd><dt><span class="term">$x2, $y2</span></dt><dd><p>
|
|
|
288 |
Device coordinates of the lower right corner.
|
|
|
289 |
</p></dd></dl></div><p>
|
|
|
290 |
The upper left and lower right coordinates above refer to the bounding box
|
|
|
291 |
as described above.
|
|
|
292 |
</p><p>
|
|
|
293 |
Generating an image map for OHLC plots is straight-forward.
|
|
|
294 |
The provided <code class="literal">$shape</code> and coordinates are compatible with
|
|
|
295 |
HTML <area> markup.
|
|
|
296 |
You must provide the URL, alternate text, and optionally a title (tooltip text).
|
|
|
297 |
</p><p>
|
|
|
298 |
This example appends the image map line to a string.
|
|
|
299 |
sprintf() is used to convert the coordinates to integers for cleaner HTML.
|
|
|
300 |
</p><pre class="programlisting">$coords = sprintf("%d,%d,%d,%d", $x1, $y1, $x2, $y2);
|
|
|
301 |
$image_map .= " <area shape=\"rect\" coords=\"$coords\""
|
|
|
302 |
.. " title=\"$title_text\" alt=\"$alt_text\" href=\"$url\">\n";
|
|
|
303 |
</pre><p>
|
|
|
304 |
The <code class="literal">$url</code>, <code class="literal">$title_text</code>, and
|
|
|
305 |
<code class="literal">$alt_text</code> would typically depend on the passed
|
|
|
306 |
<code class="literal">$row</code>.
|
|
|
307 |
</p><p>
|
|
|
308 |
<a class="xref" href="ex-imagemap-bars.html" title="5.44. Example - Image Map from Bar Chart">Section 5.44, “Example - Image Map from Bar Chart”</a> contains a complete example of an
|
|
|
309 |
image map for a bar chart, and the parameters and usage for OHLC plots are
|
|
|
310 |
the same except that the $col (column) parameter is always 0, since there
|
|
|
311 |
is only one data set.
|
|
|
312 |
</p></div><div class="sect3"><div class="titlepage"><div><div><h4 class="title"><a id="adv-imgmap-pie"></a>4.10.1.5. Image Maps from Pie Plots</h4></div></div></div><p>
|
|
|
313 |
With plot type <a class="link" href="conc-plottypes.html#plottype-pie" title="3.4.10. Plot Type: pie (Pie Plot)">pie</a>,
|
|
|
314 |
an image map can be produced which indicates the area of each pie segment.
|
|
|
315 |
However, PHPlot only supplies the values which identify the outline of the
|
|
|
316 |
pie segment, and HTML maps do not support areas of this shape.
|
|
|
317 |
Therefore, the callback handler function needs to generate
|
|
|
318 |
one or more polygons which approximate the pie segment area.
|
|
|
319 |
</p><div class="note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3><p>
|
|
|
320 |
PHPlot does not attempt to draw pie segments that are too small (due to
|
|
|
321 |
the implementation of the PHP/GD drawing function). If a segment's calculated
|
|
|
322 |
start angle and end angle are equal (after converting to integers), the
|
|
|
323 |
segment will not be drawn, and the data_points callback will not be called for
|
|
|
324 |
that segment.
|
|
|
325 |
</p></div><p>
|
|
|
326 |
For pie charts, the <code class="literal">data_points</code> callback has this form:
|
|
|
327 |
</p><pre class="programlisting">function my_handler($img, $passthru, $shape, $row, $column, $x, $y,
|
|
|
328 |
$pie_width, $pie_height, $start_angle, $end_angle)
|
|
|
329 |
</pre><p>
|
|
|
330 |
The first 2 arguments are standard for all PHPlot callbacks and are not
|
|
|
331 |
described here. The next 3 arguments are common to all data_points
|
|
|
332 |
callbacks, and there are 6 additional arguments:
|
|
|
333 |
</p><div class="variablelist"><dl class="variablelist"><dt><span class="term">$shape</span></dt><dd><p>
|
|
|
334 |
Always <code class="literal">pie</code>, indicating a pie segment of an ellipse.
|
|
|
335 |
</p></dd><dt><span class="term">$row</span></dt><dd><p>
|
|
|
336 |
The pie segment index, starting at 0 for the first segment.
|
|
|
337 |
(By default, segments are drawn counter-clockwise from 0 degrees, but this
|
|
|
338 |
can be changed.)
|
|
|
339 |
</p></dd><dt><span class="term">$column</span></dt><dd><p>
|
|
|
340 |
This is unused, and always 0.
|
|
|
341 |
</p></dd><dt><span class="term">$x, $y</span></dt><dd><p>
|
|
|
342 |
Device coordinates of the center of the pie.
|
|
|
343 |
</p></dd><dt><span class="term">$pie_width</span></dt><dd><p>
|
|
|
344 |
Horizontal diameter of the pie, in pixels.
|
|
|
345 |
</p></dd><dt><span class="term">$pie_height</span></dt><dd><p>
|
|
|
346 |
Vertical diameter of the pie, in pixels.
|
|
|
347 |
</p></dd><dt><span class="term">$start_angle</span></dt><dd><p>
|
|
|
348 |
Starting angle for the segment, in clockwise degrees (see note).
|
|
|
349 |
</p></dd><dt><span class="term">$end_angle</span></dt><dd><p>
|
|
|
350 |
Ending angle for the segment, in clockwise degrees.
|
|
|
351 |
</p></dd></dl></div><p>
|
|
|
352 |
</p><div class="note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3><p>
|
|
|
353 |
<span class="emphasis"><em>clockwise degrees</em></span> means (360 - A), where A is an angle
|
|
|
354 |
measured in the conventional sense: counter-clockwise from the X axis.
|
|
|
355 |
For example, a pie segment that starts at the top of the pie ('North') and
|
|
|
356 |
ends at the bottom point ('South') would have start_angle=270 and end_angle=90.
|
|
|
357 |
The start_angle is always greater than the end angle.
|
|
|
358 |
</p></div><p>
|
|
|
359 |
Generating an image map for pie charts is more involved than with other
|
|
|
360 |
plot types.
|
|
|
361 |
Each pie segment is defined by the ellipse center point, the two diameter
|
|
|
362 |
values, and the start and end angles.
|
|
|
363 |
Due to the PHP/GD implementation, PHPlot uses clockwise angles (360-A), so
|
|
|
364 |
the start_angle is greater than the end_angle, and the segment is drawn
|
|
|
365 |
clockwise from the end_angle to the start_angle.
|
|
|
366 |
</p><p>
|
|
|
367 |
HTML image maps do not support ellipse section shapes directly.
|
|
|
368 |
Therefore, the callback function has to approximate the area using one or
|
|
|
369 |
more polygons.
|
|
|
370 |
</p><p>
|
|
|
371 |
The method shown in the example linked below approximates the pie segment
|
|
|
372 |
area using a polygon with one point at the pie center, one point at each
|
|
|
373 |
end of the arc, and zero or more points along the arc , such that the
|
|
|
374 |
maximum separation of points along the circumference is no more than 20
|
|
|
375 |
degrees. This has been found to produce a good fit for image maps. More
|
|
|
376 |
details on the method can be found in the example.
|
|
|
377 |
</p><p>
|
|
|
378 |
Once you have your points (converted to integers, in an array
|
|
|
379 |
<code class="literal">$points</code> with X and Y values alternating), you can generate
|
|
|
380 |
a line in the image map as follows.
|
|
|
381 |
This example appends the image map line to a string.
|
|
|
382 |
</p><pre class="programlisting">$coords = implode(',', $points);
|
|
|
383 |
$image_map .= " <area shape=\"poly\" coords=\"$coords\""
|
|
|
384 |
. " title=\"$title_text\" alt=\"$alt_text\" href=\"$url\">\n";
|
|
|
385 |
</pre><p>
|
|
|
386 |
The <code class="literal">$url</code>, <code class="literal">$title_text</code>, and
|
|
|
387 |
<code class="literal">$alt_text</code> would typically depend on the passed
|
|
|
388 |
<code class="literal">$row</code>.
|
|
|
389 |
</p><p>
|
|
|
390 |
Refer to <a class="xref" href="ex-imagemap-pie.html" title="5.45. Example - Image Map from Pie Chart">Section 5.45, “Example - Image Map from Pie Chart”</a> for a complete example of an
|
|
|
391 |
image map for a pie chart.
|
|
|
392 |
</p></div><div class="sect3"><div class="titlepage"><div><div><h4 class="title"><a id="adv-imgmap-points"></a>4.10.1.6. Image Maps from Points and Linepoints Plots</h4></div></div></div><p>
|
|
|
393 |
With plot types <a class="link" href="conc-plottypes.html#plottype-points" title="3.4.11. Plot Type: points (Styled Dot Plot)">points</a>
|
|
|
394 |
and <a class="link" href="conc-plottypes.html#plottype-linepoints" title="3.4.7. Plot Type: linepoints (Lines and Points Plot)">linepoints</a>,
|
|
|
395 |
an image map can be produced which indicates the area around each point.
|
|
|
396 |
The lines in a linepoints plot are not part of the image map areas.
|
|
|
397 |
This also works with error plots that use these plot types, however the
|
|
|
398 |
error bars are not part of the image map areas.
|
|
|
399 |
</p><p>
|
|
|
400 |
For points and linepoints plots, the <code class="literal">data_points</code> callback
|
|
|
401 |
has this form:
|
|
|
402 |
</p><pre class="programlisting">function my_handler($img, $passthru, $shape, $row, $column, $x, $y)
|
|
|
403 |
</pre><p>
|
|
|
404 |
The first 2 arguments are standard for all PHPlot callbacks and are not
|
|
|
405 |
described here. The next 3 arguments are common to all data_points
|
|
|
406 |
callbacks, and there are 2 additional arguments:
|
|
|
407 |
</p><div class="variablelist"><dl class="variablelist"><dt><span class="term">$shape</span></dt><dd><p>
|
|
|
408 |
Always <code class="literal">dot</code>, indicating a single point.
|
|
|
409 |
</p></dd><dt><span class="term">$row</span></dt><dd><p>
|
|
|
410 |
The row is the index for the independent variable X.
|
|
|
411 |
The first X value has index 0.
|
|
|
412 |
</p></dd><dt><span class="term">$column</span></dt><dd><p>
|
|
|
413 |
The column is the index for the dependent variable Y.
|
|
|
414 |
For the first (or only) dataset for each X, the column index is 0.
|
|
|
415 |
</p></dd><dt><span class="term">$x, $y</span></dt><dd><p>
|
|
|
416 |
Device coordinates of the center of the point marker.
|
|
|
417 |
</p></dd></dl></div><p>
|
|
|
418 |
</p><p>
|
|
|
419 |
Generating an image map for points and linepoints plots is straight-forward.
|
|
|
420 |
PHPlot provides only the center coordinates for each point marker. It
|
|
|
421 |
does not indicate the shape or size of the marker, nor the coordinates of
|
|
|
422 |
any line segments or error bars. To generate an image map, you should use a
|
|
|
423 |
fixed radius size and define the image map areas as circles with that
|
|
|
424 |
radius centered around each data point. You need to choose a radius. A
|
|
|
425 |
larger radius provides a larger clickable area, but the area of adjacent
|
|
|
426 |
points may overlap.
|
|
|
427 |
</p><p>
|
|
|
428 |
Here is an example of generating one area in an image map from a points
|
|
|
429 |
or linepoints plot. You must provide the URL, alternate text, and
|
|
|
430 |
optionally a title (tooltip text). This appends the image map line to a
|
|
|
431 |
string. sprintf() is used to convert the coordinates to integers for
|
|
|
432 |
cleaner HTML. This example uses a 20 pixel radius for the areas around
|
|
|
433 |
each data point.
|
|
|
434 |
</p><pre class="programlisting">define('MAP_RADIUS', 20); // Capture area circle radii
|
|
|
435 |
$coords = sprintf("%d,%d,%d", $x, $y, MAP_RADIUS);
|
|
|
436 |
$image_map .= " <area shape=\"circle\" coords=\"$coords\""
|
|
|
437 |
. " title=\"$title_text\" alt=\"$alt_text\" href=\"$url\">\n";
|
|
|
438 |
</pre><p>
|
|
|
439 |
The <code class="literal">$url</code>, <code class="literal">$title_text</code>, and
|
|
|
440 |
<code class="literal">$alt_text</code> would typically depend on the passed
|
|
|
441 |
<code class="literal">$row</code> and <code class="literal">$column</code>.
|
|
|
442 |
</p><p>
|
|
|
443 |
Other than the above code, a script to generate an image map for a points or
|
|
|
444 |
linepoints plot would be similar to <a class="xref" href="ex-imagemap-bars.html" title="5.44. Example - Image Map from Bar Chart">Section 5.44, “Example - Image Map from Bar Chart”</a>, which
|
|
|
445 |
produces a bar chart.
|
|
|
446 |
</p></div></div><div class="sect2"><div class="titlepage"><div><div><h3 class="title"><a id="adv-imgmap-callback"></a>4.10.2. Image Maps - data_points Callback Parameter Summary</h3></div></div></div><p>
|
|
|
447 |
The following table contains a summary of the <code class="literal">data_points</code>
|
|
|
448 |
callback parameters for each supported plot type.
|
|
|
449 |
|
|
|
450 |
|
|
|
451 |
</p><div class="informaltable"><table summary="data_points callback parameter summary" border="1"><colgroup><col class="c1" /><col class="c2" /></colgroup><thead><tr><th>Plot Type(s)</th><th>Callback Parameters / Notes</th></tr></thead><tbody><tr><td rowspan="2">bars, stackedbars </td><td>$img, $passthru, $shape='rect', $row, $column, $x1, $y1, $x2, $y2</td></tr><tr><td>
|
|
|
452 |
Image map area does not include shading.
|
|
|
453 |
</td></tr><tr><td rowspan="2">boxes</td><td>$img, $passthru, $shape='rect', $row, 0, $x1, $y1, $x2, $y2</td></tr><tr><td>
|
|
|
454 |
Rectangle shape includes box and whiskers. It does not include
|
|
|
455 |
any outliers.
|
|
|
456 |
</td></tr><tr><td rowspan="2">bubbles</td><td>$img, $passthru, $shape='circle', $row, $column, $x, $y, $diam</td></tr><tr><td>
|
|
|
457 |
x,y is center. Use diam/2 for radius in image map circle area.
|
|
|
458 |
</td></tr><tr><td rowspan="2">candlesticks, candlesticks, ohlc</td><td>$img, $passthru, $shape='rect', $row, 0, $x1, $y1, $x2, $y2</td></tr><tr><td>
|
|
|
459 |
Rectangle shape includes body, wicks, ticks of each candlestick
|
|
|
460 |
or OHLC marker.
|
|
|
461 |
</td></tr><tr><td rowspan="2">pie</td><td>$img, $passthru, $shape='pie', $row, 0, $x, $y, $width, $height, $start_angle, $end_angle</td></tr><tr><td>
|
|
|
462 |
Callback needs to fit a polygon to the ellipse segment.
|
|
|
463 |
</td></tr><tr><td rowspan="2">points, linepoints</td><td>$img, $passthru, $shape='dot', $row, $column, $x, $y</td></tr><tr><td>
|
|
|
464 |
x,y is center. Supply a radius for image map circle areas.
|
|
|
465 |
Image map area will cover the points only, not lines.
|
|
|
466 |
</td></tr></tbody></table></div><p>
|
|
|
467 |
</p></div><div class="sect2"><div class="titlepage"><div><div><h3 class="title"><a id="adv-imgmap-impl-notes"></a>4.10.3. Image Maps - Implementation Notes and Limitations</h3></div></div></div><p>
|
|
|
468 |
Since most PHPlot scripts will not produce image maps, the burden of
|
|
|
469 |
converting data points into a format for HTML image maps was left to the
|
|
|
470 |
implementation in the callback function. This is why PHPlot passes the
|
|
|
471 |
diameter values it already calculated (instead of radius values), and why
|
|
|
472 |
pie chart segments must be interpolated by the callback function.
|
|
|
473 |
</p><p>
|
|
|
474 |
You can generate image maps for error plots (data types
|
|
|
475 |
<a class="link" href="conc-datatypes.html#data-data-error">data-data-error</a> and
|
|
|
476 |
<a class="link" href="conc-datatypes.html#data-data-yx-error">data-data-yx-error</a>)
|
|
|
477 |
with points and linepoints plot types, but the image map areas will not
|
|
|
478 |
include the error bars. For these plot types, the only the coordinates of
|
|
|
479 |
the data points are provided.
|
|
|
480 |
</p><p>
|
|
|
481 |
PHPlot does not provide the data values from the data array that go with
|
|
|
482 |
the points. If you need these values, for example in tooltips, your callback
|
|
|
483 |
function needs to get them from the data array, using the $row and $column
|
|
|
484 |
index values. This may be complex for pie charts (for example, if you want
|
|
|
485 |
tooltip text to show the percentage value of the pie segment).
|
|
|
486 |
<a class="xref" href="ex-imagemap-pie.html" title="5.45. Example - Image Map from Pie Chart">Section 5.45, “Example - Image Map from Pie Chart”</a> shows access to data values for a pie
|
|
|
487 |
chart in the simple case of data type <code class="literal">text-data-single</code>.
|
|
|
488 |
<a class="xref" href="ex-imagemap-nonembed.html" title="5.46. Example - Image Map and Non-embedded Plot Image">Section 5.46, “Example - Image Map and Non-embedded Plot Image”</a> shows access to data values for a
|
|
|
489 |
bar chart.
|
|
|
490 |
</p><p>
|
|
|
491 |
For OHLC plots (candlesticks, candlesticks2, and ohlc plot types), and
|
|
|
492 |
for box plots,
|
|
|
493 |
PHPlot does not provide the callback with the coordinates of individual
|
|
|
494 |
features (such as the candlestick body rather than the high point wick).
|
|
|
495 |
PHPlot only provides the bounding box rectangle for the overall data point
|
|
|
496 |
graphic.
|
|
|
497 |
</p><p>
|
|
|
498 |
The image map must be located in the same HTML file as the image reference.
|
|
|
499 |
Although the HTML definition of the <code class="literal">usemap</code> attribute
|
|
|
500 |
of the <code class="literal"><img></code> tag seems to indicate that a URL to an
|
|
|
501 |
external file containing the map may be used, this does not in fact work.
|
|
|
502 |
</p></div><div class="sect2"><div class="titlepage"><div><div><h3 class="title"><a id="adv-imgmap-nonembed"></a>4.10.4. Image Maps with Non-embedded Image Data</h3></div></div></div><p>
|
|
|
503 |
It is also possible to generate an image map when the PHPlot script
|
|
|
504 |
produces an image in the normal way (not embedded) and returns it to the
|
|
|
505 |
browser as image data. But the script will need to run twice: once to
|
|
|
506 |
generate the PHPlot image, and once to generate the containing HTML page
|
|
|
507 |
with the image map. (You can use two separate scripts instead, but this is
|
|
|
508 |
not recommended, since both operations must create identical plots so the
|
|
|
509 |
image map areas correspond to the plot areas.)
|
|
|
510 |
</p><p>
|
|
|
511 |
In the following example, the script normally generates an HTML page. The page
|
|
|
512 |
contains an image map, generated with PHPlot, and also a
|
|
|
513 |
<code class="literal"><img></code> image tag which points back to the same script
|
|
|
514 |
to have it generate the plot image.
|
|
|
515 |
When requesting the image, the script adds a parameter 'mode=plot' to the
|
|
|
516 |
URL. This tells the second execution of the script to generate the image
|
|
|
517 |
data instead of the HTML page.
|
|
|
518 |
</p><p>
|
|
|
519 |
The obvious drawback to this method is that you are processing a complete
|
|
|
520 |
plot twice each time a plot is needed. The first time, only the image map
|
|
|
521 |
is needed, and the plot itself is discarded. This is inefficient, especially
|
|
|
522 |
if the plotting script needs to query a database or perform extensive
|
|
|
523 |
calculations.
|
|
|
524 |
</p><p>
|
|
|
525 |
Another concern is if the script queries a database, the data could change
|
|
|
526 |
between the two uses of the script, resulting in an image map and plot
|
|
|
527 |
which do not correlate.
|
|
|
528 |
</p><p>
|
|
|
529 |
The rest of this section contains selected, annotated code from
|
|
|
530 |
<a class="xref" href="ex-imagemap-nonembed.html" title="5.46. Example - Image Map and Non-embedded Plot Image">Section 5.46, “Example - Image Map and Non-embedded Plot Image”</a>.
|
|
|
531 |
</p><p>
|
|
|
532 |
Start by checking for the mode parameter:
|
|
|
533 |
</p><pre class="programlisting"># Produce an image if the URL has mode=plot, and an HTML page otherwise:
|
|
|
534 |
$do_html = empty($_GET['mode']) || $_GET['mode'] != 'plot';
|
|
|
535 |
</pre><p>
|
|
|
536 |
</p><p>
|
|
|
537 |
The callback handler is the same as the other imagemap examples, in that it
|
|
|
538 |
appends to the global string $image_map one line from the image map.
|
|
|
539 |
</p><pre class="programlisting"># Callback for 'data_points' : Generate 1 line in the image map.
|
|
|
540 |
function store_map($im, $data, $shape, $row, $col, $x1, $y1, $x2, $y2)
|
|
|
541 |
{ ... }
|
|
|
542 |
</pre><p>
|
|
|
543 |
</p><p>
|
|
|
544 |
The <code class="function">generate_html()</code> function creates the containing
|
|
|
545 |
HTML page. Only parts of the code are shown.
|
|
|
546 |
</p><pre class="programlisting">function generate_html()
|
|
|
547 |
{
|
|
|
548 |
global $image_map;
|
|
|
549 |
</pre><p>
|
|
|
550 |
</p><p>
|
|
|
551 |
Create a self-referencing URL with mode=plot parameter for the
|
|
|
552 |
<code class="literal"><img></code> tag:
|
|
|
553 |
</p><pre class="programlisting"> # If the URL already has parameters, use & separator, else ?.
|
|
|
554 |
$sep = empty($_SERVER['QUERY_STRING']) ? '?' : '&';
|
|
|
555 |
$url = htmlspecialchars($_SERVER['REQUEST_URI'] . $sep . 'mode=plot');
|
|
|
556 |
</pre><p>
|
|
|
557 |
</p><p>
|
|
|
558 |
Now generate the HTML page. Include the image map using the global string
|
|
|
559 |
<code class="literal">$image_map</code>, which our callback function has
|
|
|
560 |
built line-by-line as PHPlot produced the plot.
|
|
|
561 |
Also include the reference to the plot image. This will result in the browser
|
|
|
562 |
making a second request to the script, this time with the mode=plot parameter.
|
|
|
563 |
</p><pre class="programlisting"> echo <<<END
|
|
|
564 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
|
565 |
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
566 |
<html>
|
|
|
567 |
...
|
|
|
568 |
<map name="map1">
|
|
|
569 |
$image_map
|
|
|
570 |
</map>
|
|
|
571 |
...
|
|
|
572 |
<img src="$url" alt="Plot image" usemap="#map1">
|
|
|
573 |
...
|
|
|
574 |
</html>
|
|
|
575 |
|
|
|
576 |
END;
|
|
|
577 |
}
|
|
|
578 |
</pre><p>
|
|
|
579 |
</p><p>
|
|
|
580 |
This ends the <code class="function">generate_html()</code> function.
|
|
|
581 |
</p><p>
|
|
|
582 |
In the main body of the script, create a PHPlot object and configure the
|
|
|
583 |
plot as usual. Set the <code class="literal">data_points</code> callback. (You need only
|
|
|
584 |
do this in the case of generating HTML, not the image case.)
|
|
|
585 |
There are two other places where the operation differs for the HTML or image
|
|
|
586 |
generation, based on the <code class="literal">$do_html</code> flag: disabling automatic
|
|
|
587 |
output with <a class="xref" href="SetPrintImage.html" title="SetPrintImage"><span class="refentrytitle">SetPrintImage</span></a>, and calling
|
|
|
588 |
the <code class="function">generate_html()</code> function at the end.
|
|
|
589 |
</p><pre class="programlisting">$plot = new PHPlot(800, 600);
|
|
|
590 |
if ($do_html) {
|
|
|
591 |
// Do not output the image in this mode:
|
|
|
592 |
$plot->SetPrintImage(False);
|
|
|
593 |
// Set the callback for image map generation:
|
|
|
594 |
$plot->SetCallback('data_points', 'store_map');
|
|
|
595 |
}
|
|
|
596 |
... // Set up the plot, data values, plot type, etc.
|
|
|
597 |
// Output the image (in plot mode), or build the image map (in html mode):
|
|
|
598 |
$plot->DrawGraph();
|
|
|
599 |
if ($do_html) generate_html();
|
|
|
600 |
</pre><p>
|
|
|
601 |
</p><p>
|
|
|
602 |
That's all. If <code class="literal">$do_html</code> is true, no image will be produced
|
|
|
603 |
(due to <code class="literal">SetPrintImage(False)</code>),
|
|
|
604 |
and <code class="function">generate_html()</code> will be called.
|
|
|
605 |
If <code class="literal">$do_html</code> is false, <code class="function">DrawGraph()</code>
|
|
|
606 |
will output the plot image, and the map data will be not be produced or output.
|
|
|
607 |
</p></div></div><div class="navfooter"><hr /><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="adv-streaming.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="advanced.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="examples.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">4.9. Streaming Plots </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> Chapter 5. PHPlot Examples</td></tr></table></div></body></html>
|