|
Clickmaps and mouseover labelsClickmaps (clickable imagemaps) allow web browser users to click on a region in an image which behaves as a hyperlink to a new web page. Mouseover labels, also refered to as "tooltips" or "pop-up text bubbles", allow web browser users to hover the mouse pointer over an image region and see a popup text bubble that gives additional information, which can be a powerful, clutter-avoiding annotation technique. Some live examples are shown below. Ploticus supports these capabilities for various types of plots and graphs, annotations, and arbitrary rectangular regions. There are three different strategies for achieving clickable regions and/or mouseover labels:
Typical methodHere's a typical method for generating a PNG image with client-side image map: 1. If you want clickable regions, use the clickmapurl attribute in your plotting proc (or prefab) to specify a URL. Data field contents are represented in the URL constructs like this: @@2. Example: in proc bars, you specify clickmapurl: http://abc.com/cgi-bin/showall?id=@@2 ... the user can click on any bar and go to the URL, where id will be based on data field 2. For very long URLs, see troubleshooting below. 2. If you want mouseover labels, use the clickmaplabel attribute in your plotting proc (or prefab) to specify a label. Data field contents are represented in the label using constructs like this: @@3. Example: in proc bars, you specify clickmaplabel: @@4 ... the user can hover the mouse pointer over any bar and see the popup text bubble label showing the contents of data field 4. 3. Generate HTML like this: <map name="map1"> [ Execute ploticus here.. use the -csmap command line option and generate an output file called eg. mypic.png .. It will write <area> tags to its standard output. ] </map> <img src="mypic.png" usemap="#map1"> To generate a server-side image map instead, use step 1 above, then execute ploticus, using the -map and perhaps the -mapfile command line options. Then incorporate your mapfile into your HTML using a construct like this: <a href="mypic.map"> <img src="mypic.png" ismap > </a> ExamplesHere's a gallery example that uses a client-side imagemap to implement mouseover text labels (move your mouse over the bars). A number of live script examples that you can try are provided below.Here's a prefab example: The following prefab command generates a bar graph with both clickmap and mouseover label support. Click-thru URLs would be built using the contents of data field 2, and mouseover labels will be displayed using the contents of data field 3. pl -prefab bars data=myfile.dat delim=tab y=1 \ clickmapurl="http://abc.com/cgi-bin/showcase?caseid=@2" \ clickmaplabel="@3" -csmapHere's an SVG mouseover example. (see the ploticus SVG page for more info). Special syntax for deploying new windowsSometimes it is desirable to deploy a new window when the user clicks on an image. Here's an example of how to do this in ploticus. clickmapurl: [target=new]http://abc.com/cgi-bin/show?id=@@4 Ploticus will pass the HTML target=new attribute through to the HTML area tags. You can use any standard target name. This works with client-side maps and SVG. New in 2.33Troubleshooting and LimitationsThe -csmap command line option (or -map which is deprecated) must be used to turn on mapping.. the presence of a clickmapurl or clickmaplabel attribute in a script or prefab does not by itself turn on mapping.The -csmapdemo command line option may be used (in place of -csmap) to show the mapped regions outlined in green. Also, when -csmapdemo is used along with -png, -jpg of -gif, a complete HTML chunk linking the output image with the map will be written to standard output, as an aid to development. Note that if two generated mapped regions overlap, they are stacked in the order generated (the last generated is on "top"). There is an upper limitation of 500 clickmap zones / 500 mouseover labels per job. Clickmap urls associated with an areadef can be up to 255 characters in length. Otherwise there's no length limit other then script line length. Tooltip labels have no length limit other than script line length. Longer URLs can be expressed (versions 2.40+) by using variables to hold portions of the url (be sure to use double at-signs) for example: #set queryprog = "http://abc.com/cgi-bin/query" ... clickmapurl: @@queryprog?... URL encodingPloticus allows clickmap URLs to be constructed from various elements including literal text, script variables, data field contents, and axis values (when doing an areadef grid). Some of these elements are subject to automatic standard URL encoding, while others are not. element URL encoding done ------------ --------------- literal text no script variables no data field contents yes axis values (grid) yesSee also proc settings for settings that effect url encoding. How it works with different graphical elementsPie graphs, bar graphs, and scatterplots
Annotations and arbitrary rectangles
Legend entries
Covering the entire plotting area
Regular consecutive intervals (or a grid) within the plotting area
Setting a default URL for the entire image
Notes
Grid mapping may not be used with more than one plotting area per image.
Live examples to tryMost of the following script examples have been run with -csmapdemo to add the green overlay showing where clickable regions are. Try clicking on these images.. they are mapped to a live CGI program that will echo the passed parameters.clickmap_pie ![]() Click on pie slice labels. ![]() Click here to see script source. An example where proc annotate was used to create a simple E-R diagram for a database. Entity bubbles support text annotation that appears when the mouse hovers over them, and click-thru to actual database table documentation. Try hovering the mouse pointer over an entity bubble, and then click on the bubble. Click here to see another gallery example that uses a client-side imagemap with mouseover text labels (but no URLs)clickmap_leg ![]() Click on legend entries. clickmap_area2 ![]() Mapped plotting area grid. Numeric in X and Y. Click on plotting area. To try the SVG equivalent click here. clickmap_area3 ![]() Same as above, but with finer granularity. This is done by executing an invisible X axis and an invisible Y axis for the clickmap (in addition to the visible axes) using the automatically determined stub increment, divided by 4. snpmap1 ![]() Mapped plotting area grid. Numeric in X; categories in Y. Note that the mapped grid (Y) is influenced by stubslide. colorgrid ![]() Data points are mapped. Click on any data point. clickmap_area ![]() Mapped plotting area grid. Months in X, numeric in Y. Note that month format is controlled using proc axis clickmapvalformat. clickmap_log ![]() Mapped plotting area grid in Y. Log example. Click on plotting area. clickmap_time2 ![]() Mapped timeline bars. clickmap_mouse ![]() Mapped plotting area grid. Categories in X. Note that the X stubs are (mostly) included in the mapped regions. This is done using the proc xaxis clickmapextent attribute. clickmap_hit ![]() Mapped plotting area grid. Datetimes in X. The datetimes are mapped in 6 hour increments, even though stubs appear every 24 hours. This is done by executing an invisible X axis for the clickmap, using 6 hour increments. |
![]() data display engine Copyright Steve Grubb ![]() |
Ploticus is hosted at http://ploticus.sourceforge.net |
|