XML/SWF Charts| CSS/XML Timeline Eons(New)| Timeline Eons| SlickBoard

 < previousnext > 

 

link

 

<link>
   <area x='number' 
         y='number' 
         width='number'  
         height='number' 
         url='string'
         priority='number' 
         target='string'
         tooltip='string'
         
         timeout='number'
         retry='number'
         spinning_wheel='boolean'
         wheel_x='number'
         wheel_y='number'
         />
           
   [ <area ... /> ]
   
</link>


Description

link holds any number of areas, each defining a rectangle and a URL to go to when the user clicks inside the rectangle. This can also be used to assign functions to mouse clicks, including chart updates, printing, etc.

This feature is available to registered users only. Unregistered software links all charts to this website.

Each link area has the following attributes:

  • x: The horizontal position of the rectangle's upper left corner relative to the upper left corner of the background (0, 0). The default value is zero.

  • y: The vertical position of the rectangle's upper left corner relative to the upper left corner of the background (0, 0). The default value is zero.

  • width: The rectangle's width. The default value is the background width.

  • height: The rectangle's height. The default value is the background height.

  • url: Relative or absolute URL to go to when the rectangle is clicked.

  • priority: If link rectangles overlap, the link's order determines its priorities. The first link has the highest priority, and the last has the lowest. The link with the highest priority is triggered. In addition, all links with this priority attribute set to 1 are also triggered. This enables triggering multiple overlapping links with just one click. For example, this enables updating a chart and launching a pop-up window with one click. The default is 0 (trigger this link only if its order gives it the highest priority).

  • target: Valid values are:

    • _self: opens the link in the same window (default).
    • _blank: opens the link in a new blank window.
    • _parent: opens the link in the immediate frameset parent.
    • _top: opens the link in the full body of the window .
    • string: opens the link in the window named <string>. If this window doesn't exist, a new window is opened and named <string>.

    • update: Updates the chart without reloading the web page. In this case, the URL must link to a script similar to that used in update.
    • print: Prints the chart. Place a link on top of a Print button to add a print function to the chart (see example below). In this case, the URL attribute is ignored.
    • save_as_bmp: Saves the chart as BMP. In this case, the URL attribute is ignored.
    • save_as_jpeg: Saves the chart as JPEG. In this case, the URL attribute is ignored.
    • save_as_png: Saves the chart as PNG. In this case, the URL attribute is ignored.
    • toggle_fullscreen: Toggles the screen mode between full-screen and normal-screen (see example below). In this case, the URL attribute is ignored.
    • scroll: This can be used to create buttons that scroll (or zoom) the chart to predefined positions. It is not necessary to give the chart a scroll bar to use this feature, but the chart type must support scrolling. If target is set to scroll, then url is used to define the new scroll position like this: url='start=50&span=20'. See Scroll & Zoom below.


  • tooltip: The text to display in the tooltip.

  • timeout: If the link's target is set to update, this attribute sets the number of seconds to wait before loading the update times out. The default is 30 seconds.

  • retry: If the link's target is set to update, this attribute sets the number of times to try loading the update before displaying a loading error message. The default is 2 (try twice).

  • spinning_wheel: If the link's target is set to update, this attribute determines whether to display a spinning wheel while loading the update or not. The default is false (do not display a spinning wheel).

  • wheel_x: The spinning wheel is centered by default in the chart area. This attribute determines a different horizontal position for the wheel. The default is omitted.

  • wheel_y: The spinning wheel is centered by default in the chart area. This attribute determines a different vertical position for the wheel. The default is omitted.

 


Links Over Buttons

Place links over design elements that look like buttons to produce functional buttons (see the example below and the Buttons page.) These buttons can do anything from printing, to jumping to other web pages, to updating anything in the chart (like changing colors, adding or removing data, etc.)

 


Scroll & Zoom

If the link's target is set to scroll, then the url attribute is used to define a new scroll position. This can be used to create buttons that scroll (or zoom) the chart to predefined positions. It is not necessary to give the chart a scroll bar to use this feature, but the chart type must support scrolling:

<chart>

   <!-- reduce the chart's height to make room for buttons -->
   <chart_rect height='100' />
               
   <!-- draw 2 simple rectangles and texts to use as buttons -->
   <draw>
      <rect x='97' y='200' width='66' height='25' fill_color='dddddd' />
      <text x='120' y='204'>2008</text>
      <rect x='237' y='200' width='66' height='25' fill_color='dddddd' />
      <text x='257' y='204'>All</text>
   </draw>

   <!-- add 2 links over the buttons to scroll the chart to different positions -->   
   <link>
      <area x='97' 
            y='200' 
            width='66'  
            height='25' 
            target='scroll'
            url='start=33&span=33'
            />

      <area x='237' 
            y='200' 
            width='66'  
            height='25' 
            target='scroll'
            url='start=0&span=100'
            />

   </link>

</chart>

 

With large charts, use scroll's scroll_detail attribute to control the scrolling speed, and set axis_value's mode to stretch to automatically adjust the value range (zoom in and out).

 


Link to Javascript

To make a javascript function respond to a click on a link, see Link to Javascript on this page.

 


Tooltip

To display a tooltip without linking to another page, omit area's URL and target attributes:

<link>
    <area x='10' y='10'width='50'height='50'tooltip='This is a hint.' />   
</link>

 

 

Example

<chart>

   <!-- reduce the chart's height to make room for buttons -->
   <chart_rect height='100' />
               
   <!-- draw 4 simple rectangles and texts to use as buttons -->
   <draw>
      <rect x='27' y='200' width='66' height='25' fill_color='dddddd' />
      <text x='39' y='204'>google</text>
      <rect x='97' y='200' width='66' height='25' fill_color='dddddd' />
      <text x='110' y='204'>update</text>
      <rect x='167' y='200' width='66' height='25' fill_color='dddddd' />
      <text x='185' y='204'>print</text>
      <rect x='237' y='200' width='66' height='25' fill_color='dddddd' />
      <text x='243' y='204'>javascript</text>
      <rect x='307' y='200' width='66' height='25' fill_color='dddddd' />
      <text x='320' y='204'>screen</text>
   </draw>

   <!-- add 4 links over the buttons, each triggers a different action -->   
   <link>
      <area x='27' 
            y='200' 
            width='66'  
            height='25' 
            url='http://www.google.com' 
            target='_self'
            tooltip='http://www.google.com' 
            />
           
      <area x='97' 
            y='200' 
            width='66'  
            height='25' 
            url='update_1.php'
            target='update'
            />
            
      <area x='167' 
            y='200' 
            width='66'  
            height='25' 
            target='print'
            />

      <area x='237' 
            y='200' 
            width='66'  
            height='25' 
            url="javascript:alert('Hello World!')"
            />
               
      <area x='307' 
            y='200' 
            width='66'  
            height='25' 
            target='toggle_fullscreen'
            />

   </link>

</chart>

 

 < previousnext > 


Copyright © 2003-2017, maani.us