Hints, Tips and JavaScript Handlers

This short section of the tutorial obviously cannot teach you JavaScript, internet programming and so on, however it should give you some feel for the possibilities that open up when you use VML graphics on your website. A useful first step is to add some hints and tips to the data so that the web-site user gets a little more information about the links.

Adding hints and tips to the piechart

GraPL treats the Hint and Tip properties in just the same way as Hyperlinks, so we can easily extend the piechart example like this:

Now all you need to do is to drag over the Hints and Tips settings from the Properties tab and set them up as:

Property	Value
Hints	Piedata.Hints
Tips	Piedata.Tips

... and you will see the hints rather than the hyperlinks shown in the statusbar as you wave the mouse over the thumbnail view. when you export the chart as a webpage (in either VML or PNG format) the tips will show as popups and the hints will appear in the browser statusbar. Use whichever method you prefer, or both if that is appropriate, to annotate the graphic.

Jumping to another frame

A very reasonable web-page design would be to use a 2-frame layout with a chart across the top and a small ‘info’ area at the bottom – clicking on the chart would leave it in place but select some appropriate extra information to be shown below. There is a nice demonstration of the technique on www.causeway.co.uk/demos where you can look at the monthly temperature and rainfall charts for the last 10 years, and when you click on a month you see a summary of the weather shown below the chart.

To add target frame information to a GraPL chart, append the frame id to each of the jumps in the links table, separating it from the URL with a semicolon, as in “summary.htm#coats;bottom” – this would jump to the ‘coats’ anchor in the summary page and display the information in the frame named “bottom”.

Adding JavaScript Handlers (IE5 only)

One of the nice things about VML graphics is that the chart is not just a dumb image – all the objects in it are ‘live’ in the browser so you can change them on the fly. The next example again assumes some knowledge of JavaScript, so you might just want to try it out from the Weblinks project, and come back to it if you need to do this sort of thing for real.

What we want to build is a web page where the bars ‘light up’ when the mouse is over them (this is the easy bit) and where we can change some other text on the page by clicking on the bars in turn. What I have set up here is a barchart where we can click on the bars to accumulate the value of each bar in the heading – obviously there are much more sensible things you can do, but it does make the point that:

• the web page can be told the actual data-values associated with each bar, pie-segment, marker or whatever.
• the various ‘boilerplate’ items like headings can easily be modified on the fly, in the browser, to report what we did

Here is the complete example, shown in the GraPL preview – obviously you will need to open the project and save it as a webpage to see how it actually runs in the browser:

The script fragment that does the work is called AddMe, and in this case I have just typed it in to a column in a datasheet. It is likely that future releases of GraPL will come with a simple text-editor that you can use to develop your scripts is a more comfortable way.

The named objects which you can modify are the Heading, Subhead, Footnote, X-Caption and Y-Caption. If you need to know more, please refer to any standard text on JavaScript programming – GraPL is simply taking your code and passing it through untouched to the web-page, so all the normal programming techniques and rules apply.