Adding HTML Jumps to Data

Often, a graphic is the most useful place to put hypertext links to other graphs or to text webpages. GraPL can add links very simply, either directly from the pie-sectors, bars or markers on your charts, or in the text of headings and subheads (although this will only work with VML graphics and Internet Explorer 5 or higher).

Linking from piechart sectors

The first example is included in your samples folder as project Weblinks, but you can easily recreate it from scratch if you prefer. What we need is a simple datasheet, such as:

You can see that the first two columns just make an ordinary piechart, but that we have an extra text column which holds the name of the web-page that we want to associate with each pie sector. Of course this can be any HREF you like – here I have just jumped to some test pages in the same folder as the chart. To specify these links as hypertext jumps, add the Pie element to your chart specification as normal, switch to the Properties tab and add a Hyperlink property. Simply set this as the column of jumps – of course they will not actually work from the GraPL thumbnail, but you can see the destination in the statusbar as you move the mouse around:

Now to test it ‘for real’ by saving the chart as an HTML page and running it up in Internet Explorer. First we should make some sample pages for it to jump to – an easy way to do this is to add three more GraPL datasheets with the detailed figures for each region, say:

... now select File,Export sheet,Save as Webpage (or press the Export as HTML tool button) and save the datasheet as North.htm:

If we now export the chart to the same directory (switch back to the Charts tab and hit the Export button again):

... then you can run up the chart page in Internet Explorer 5 and you will find that all the links show as you would hope, and that if you click on the North sector of the pie, you are immediately sent to the details table. If you are not sure that your page will be viewed in IE5, select File,Export chart,Webpage with image which will save the graphic as a .PNG file and add a suitable html image map to the page definition. This works just as well, but is slower to load and is shown slightly less tidily by the browser.

Calling a Web Server from a barchart

Of course you can jump from a pie to a bar, and so on down the chain. Here is a possible datasheet for our Eastern division:

We could simply add a matching table of links (it would need three rows and two columns here to match the three products and two categories) and this would work in just the same way as the pie example if we set the Hyperlinks property to EastLinks:

However you can see that this rapidly gets complicated and requires a good deal of typing if you have lots of products. Also you might not want to call a static web page here – suppose you have a server application which is fielding the queries and creating the detail tables dynamically. What you will need is for the link to call back to the server, passing it the row and column in the data that was clicked – then it can easily work out which product and division you meant. If you give GraPL a single link for an entire chart (note the quotes here to prevent GraPL from trying to run this as an expression):

... then when you save the webpage you will find that the bars all have jumps like “cgi-bin/myscript?row=2&col=3” which is in the standard internet format for a query string. The row and column values represent the location in your datasheet (counting from 1) of the data value that was used to make each bar.

Linking from headings and footnotes (IE5 and above)

As a final touch, we could add a link to the corporate homepage from a footnote on our piechart. Simply add a link like:

Property	Value
Footnote	See our home page at {url www.grapl.com} today!

Again, you will not see any change to the chart in the preview, but when you export the chart in the VML format, you will find that the link works as you expect. You can add links to the main heading, the subheading, the footnote, or include them in chart keys. You can also use a Note element to add free text anywhere on the chart, and naturally you can have links embedded here too.

Please note that these links (from text) will only work if you use the VML-style of graphic. Linking from the chart data (pie sectors, bars and so on) will work using any picture format – you can use Paint Shop Pro to convert the .PNG file to a compressed .GIF and as long as you do not resize the image (and obviously change the src = “xxx.PNG” value to match the new filetype) the jumps will remain valid.

Continue to: Hints, Tips and JavaScript Handlers