| Locate Previous Next | Contents |
The chances are that you want to build a whole library of associated charts and backup details, and you are probably very happy to have some program decide the file names for you. This section of the tutorial shows how you might do this for a barchart (say loaf-type by day, using the bread data we started with) so that the summary chart is backed up by some tables of data.
Jumping from a Barchart
First, we had better make the barchart again, this time adding a key and some jump information ...
dailytot+22 7 3½demand
chName 'mybar'
chSet 'head' 'Total Demand for the Three Bread Products'
chSet 'key' 'White' 'Brown' 'Organic'
chSet 'xlab' 'Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday'
chHref 'Mon' 'Tue' 'Wed' 'Thu' 'Fri' 'Sat' 'Sun'°.,'Wh.htm' 'Br.htm' 'Org.htm'
chBar dailytot
PGchClose
png0.6 psMakePNG PG
Notice a small shortcut which you can take here if you supply jumps for every data element you can simply list them all as a matching matrix, omitting the information about the particular row/column they belong to.
'Mon' 'Tue' 'Wed' 'Thu' 'Fri' 'Sat' 'Sun'°.,'Wh.htm' 'Br.htm' 'Org.htm' MonWh.htm MonBr.htm MonOrg.htm TueWh.htm TueBr.htm TueOrg.htm WedWh.htm WedBr.htm WedOrg.htm ThuWh.htm ThuBr.htm ThuOrg.htm FriWh.htm FriBr.htm FriOrg.htm SatWh.htm SatBr.htm SatOrg.htm SunWh.htm SunBr.htm SunOrg.htm
I also used chName to enforce my own name for the chart, as I know I will only need one here!
First, lets write the binary data to disk ...
'c:\temp\mybar.png' psrput png
... then see what we got as the imagemap ...
2png
<MAP name="mybar">
<area shape="rect" coords="28,88,33,163" href="MonWh.htm">
<area shape="rect" coords="60,97,65,163" href="TueWh.htm">
....
<area shape="rect" coords="204,138,209,163" href="SatOrg.htm">
<area shape="rect" coords="236,158,241,163" href="SunOrg.htm">
</MAP>
Hopefully, you got 21 lines, each defining the rectangle around each data bar. Go back to Notepad, and paste this into a new document (or just overwrite first.htm if you prefer). Add some text such as ...
<h2>Summary Bread Data</h2> <img src="mybar.png" usemap="#mybar" border=0> <p>Click on the bars to see the detailed information!</p>
Note that because we gave the chart our own name (mybar in the example) we use this name to refer to it in the imagemap. This makes it a little easier to type it correctly! Now when you load this file into the browser, you will be able to wave the mouse over the bars, and the status line at the bottom will show the jump target.
Of course none of the links will actually work until we create those 21 little files, but that can be left as an exercise for the evening!
Summary
You can define jumps for an entire chart by providing a matrix of jump targets which exactly matches your data. You can force the imagemap to have a sensible name by naming the chart first!