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

 < previousnext > 

 

scroll

 

<scroll transition='string'
        delay='int'
        duration='float' 
            
        x='int'
        y='int'
        width='int'
        height='int'
        alpha='int'
            
        url_button_1_idle='string'
        url_button_1_over='string'
        url_button_1_press='string'
        url_button_2_idle='string'
        url_button_2_over='string'
        url_button_2_press='string'
        url_slider_body='string'
        url_slider_handle_1='string'
        url_slider_handle_2='string'
        
        button_length='int'
        slider_handle_length='int'
        gap='int'
        button_speed='int'
        buttons_together='boolean'
        start='int'
        span='int'
        drag='boolean'
        reverse_handle='boolean'
        scroll_detail='int'
        stop_detail='int'
        external_control='boolean'
		
        timeout='string'
        retry='string'
        />
             


Description

scroll activates and sets the attributes of a slider that makes the chart scrollable. Scrolling is supported by all chart types except for 3d, pie, donut, polar, scatter, bubble, and image charts.

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

 


Scroll Bar Anatomy:

The scroll bar itself has no background. However, any graphic can be added underneath it with the draw function.

The scroll bar can function vertically by making its height greater than its width. This can be used with charts that scroll vertically such as the bar chart.

 


The scroll attributes are:

  • transition: The type of transition to draw the scroll bar with. Valid values are dissolve, drop, spin, scale, zoom, blink, slide_right, slide_left, slide_up, slide_down, and none. The default is none, which draws the scroll bar immediately without a transition.

  • delay: The delay in seconds before starting the transition. The default is zero.

  • duration: The transition's duration in seconds. The default is 1.


  • x: The horizontal position of the scroll bar's top-left corner relative to the upper left corner of the background (0, 0). The bar can be placed anywhere, not just below the chart. The default is zero.

  • y: The vertical position of the scroll bar's top-left corner relative to the upper left corner of the background (0, 0). The bar can be placed anywhere, not just below the chart. The default is zero.

  • width: The scroll bar's width. If the width is greater than the height, then the scroll bar functions horizontally. Otherwise it functions vertically. The default is 200.

  • height: The scroll bar's height. If the height is greater than the width, then the scroll bar functions vertically. Otherwise it functions horizontally. The default is 20.

  • alpha: The scroll bar's transparency. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.


  • url_button_1_idle: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as the idle state of button 1 (when the mouse is outside the button). If this is set to default, then the default image is used instead. This attribute is required to render a scroll bar, but button_length can be set to zero to hide the buttons.

  • url_button_1_over: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as the over state of button 1 (when the mouse is over the button). If this is set to default, then the default image is used instead. If this attribute is omitted, then it acquires the value of url_button_1_idle.

  • url_button_1_press: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as the press state of button 1 (when the button is pressed). If this is set to default, then the default image is used instead. If this attribute is omitted, then it acquires the value of url_button_1_idle.

  • url_button_2_idle: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as the idle state of button 2 (when the mouse is outside the button). If this is set to default, then the default image is used instead. This attribute is required to render a scroll bar, but button_length can be set to zero to hide the buttons.

  • url_button_2_over: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as the over state of button 2 (when the mouse is over the button). If this is set to default, then the default image is used instead. If this attribute is omitted, then it acquires the value of url_button_2_idle.

  • url_button_2_press: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as the press state of button 2 (when the button is pressed). If this is set to default, then the default image is used instead. If this attribute is omitted, then it acquires the value of url_button_2_idle.

  • url_slider_body: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as the slider body. Because this image gets stretched, avoid designs that can get distorted. If this is set to default, then the default image is used instead. If this is omitted, then the scroll bar does not have a slider body.

  • url_slider_handle_1: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as slider handle 1. If this is set to default, then the default image is used instead. If this is omitted, then the scroll bar doesn not have slider handles. The slider handles can be dragged to increase or decrease the visible portion of a chart.

  • url_slider_handle_2: The URL of a JPEG, unanimated GIF, PNG, or SWF image to use as slider handle 2. If this is set to default, then the default image is used instead. If this is omitted, then the scroll bar doesn not have slider handles. The slider handles can be dragged to increase or decrease the visible portion of a chart.


  • button_length: The length of each of button 1 and button 2 in pixels. The default is 20.

  • slider_handle_length: The length of each of slider handle 1 and slider handle 2 in pixels. The default is 5.

  • gap: The gap in pixels between a button and the slider when they bump into each other. The default is 1.

  • button_speed: The percentage by which button 1 and button 2 scroll the chart with each click. A value of 10, for example, scrolls the chart by 10% with each click. The default is 10.

  • buttons_together: A boolean that indicates whether button 1 and button 2 are separated at either end of the scroll bar, or together at its end. The default is false (not together).

  • start: The initial position of the chart in percent. For example, a value of 10 starts the chart at 10% of its range. The default is zero.

  • span: The initial visible area of the chart in percent. The default is 100 (all the chart is visible).

  • drag: A boolean that indicates whether the chart can be scrolled by clicking and dragging it in addition to using the scroll bar. It is not recommended to use this feature when link_data is already used to make the chart clickable. Valid values are true or false. The default is false.

  • reverse_handle: A boolean that indicates whether to use url_slider_body for the handle itself, or for the areas outside of the handle. This can be used to render the handle as a gap in the slider (see the Examples section below). Valid values are true or false. The default is false (do not reverse the handle).

  • scroll_detail: Redrawing numerous data points repeatedly while scrolling can be slow. This attribute determines the maximum number of visible data points to calculate at each scrolling step. Higher values produce more detailed graphics and slower scrolling. Lower values produce less detailed graphics and faster scrolling. This attribute does not have an effect on small charts with a few data points. Valid values are over 10. The default is 60. See Managing Large Charts below.

  • stop_detail: Determines the maximum number of visible data points to calculate when the scrolling stops. Higher values produce more detailed graphics. Lower values produce less detailed graphics. This attribute does not have an effect on small charts with a few data points. Valid values are over 10. The default is all the data points in the chart (full detail). See Managing Large Charts below.

  • external_control: A boolean that indicates whether this chart can be scrolled with external commands or not. This can be used to prevent a child chart from scrolling when its parent does (see Scrolling Multiple Charts below). Valid values are true or false. The default is true (a parent scrolls a child).


  • timeout: The number of seconds to wait before loading scroll images times out. The default is 30 seconds.

  • retry: The number of times to try loading the scroll images before displaying a loading error message. The default is 2 (try twice).

 


Minimal Scroll Bar

It is not necessary to render a complete scroll bar to activate scrolling. This code is sufficient to reduce the visible span area, and to scroll by clicking and dragging the graphs:

<scroll span='60' drag='true' />

 

To render a partial scroll bar, only the url_button_1_idle and url_button_2_idle attributes are required. The slider body is optional and may or may not have slider handles (see the Examples section below). To show the slider body without the slider buttons, set the button_length to zero.

 


Scrolling Multiple Charts

To scroll multiple charts together, use the composite charts type and activate scrolling in the main chart (parent). The scrolling that takes place in the parent chart gets automatically transmitted to its children.

To prevent a child from scrolling when its parent scrolls, set the child's external_control attribute to false:

<scroll external_control='false' />

 

If scrolling is activated and performed in a child chart, other charts do not get affected.

See Composite Charts, the Examples section below, and the gallery examples.

 


Managing Large Charts

Rendering numerous data points can be slow on some machines, especially while scrolling. To produce a large chart and still render it quickly, this tool can calculate only a small sample of points while viewing a large span of data. Use the scroll_detail and stop_detail attributes to determine how much detail to show while scrolling, and how much detail to show after the scrolling stops.

If scrolling is slow, reduce scroll_detail to show less details while scrolling.

If rendering the entire chart is slow, reduce stop_detail to show less details even when there is no scrolling.

If showing the maximum detail is required, then increase stop_detail and reduce span to display a smaller portion of the chart. Allow users to scroll to see other portions of the chart, and omit the slider's handles to keep the span small.

See Performance for additional tips.

The following chart contains 300 data points and scroll_detail is set to 100. By scrolling while the slider displays less than one third of the chart (less than 100 point), the scrolling graphics show the maximum detail. By scrolling while the slider displays more than one third of the chart (more than 100 point), the scrolling graphics show less detail (approximately 100 points). When the scrolling stops the chart shows the full detail.

This content requires JavaScript.

 


Scroll & Zoom

In addition to the scroll bar, it is possible to create regular buttons that scroll (or zoom) the chart to predefined positions. See link for details.

 

 

Example

<chart>

   <!-- adjust chart_rect to fit a scroll bar below it -->
   <chart_rect x='50' y='50' width='300' height='120' />
            
   <!-- draw a scroll bar background -->
   <draw>     
      <rect layer='background' x='50' y='170' width='300' height='25' fill_alpha='20' />   
      <rect layer='background' x='48' y='194' width='304' height='22' fill_alpha='40' />   
   </draw>         

   <!-- draw the scroll bar -->
   <scroll x='50'
           y='195'
           width='300'
           height='20'
           url_button_1_idle='default'
           url_button_2_idle='default'
           url_button_1_over='default'
           url_button_1_press='default'
           url_button_2_over='default'
           url_button_2_press='default' 
           url_slider_body='default'
           url_slider_handle_1='default'
           url_slider_handle_2='default'
           slider_handle_length='10'
           start='20'
           span='50'
           drag='true'
           />
		
</chart>

 


<chart>

   <!-- adjust chart_rect to fit scroll buttons on the sides -->
   <chart_rect x='100' y='75' width='225' height='100' />

   <!-- draw the scroll bar without the middle section -->
   <scroll x='20'
           y='75'
           width='360'
           height='100'
           url_button_1_idle='default'
           url_button_2_idle='default'
           button_length='50'		
           span='50'
           start='25'
           drag='true'
           />
		
</chart>

 


This example is a composite chart. The parent is the bottom chart that displays the whole x-axis without scrolling. The child is the top, scrolling chart. It displays a slider with the reverse_handle set to true to show the parent chart through the handle as a range preview. Click here to download the .swf files used in this scroll bar.

<chart>

   <!-- the parent chart (bottom, non-scrolling chart) -->
	
   <axis_value alpha='0' />
   <chart_border top_thickness='0' bottom_thickness='1' left_thickness='1' right_thickness='1' />
   <chart_grid_h alpha='0' />
   <chart_rect positive_alpha='0' y='184' height='51' />
	
   <draw>
      <rect layer='background' x='61' y='160' width='299' height='75' fill_color='ffffff' fill_alpha='90' />   
      <image url='charts.swf?library_path=charts_library&xml_source=xml%2FReference_scroll_5.xml' />
   </draw>
		
</chart>

<chart>

   <!-- the child chart (top, scrolling chart) -->

   <chart_border top_thickness='1' bottom_thickness='1' left_thickness='1' right_thickness='1' />              
   <chart_rect height='100' />

   <scroll x='60'
           y='185'
           width='301'
           height='50'
           url_button_1_idle='default'
           url_button_2_idle='default'
           url_slider_body='images/black.swf'
           url_slider_handle_1='images/preview_handle_1.swf'
           url_slider_handle_2='images/preview_handle_2.swf'
           button_length='0'
           slider_handle_length='30'
           start='20'
           span='40'
           reverse_handle='true'
           drag='true'
           />
		
</chart>

 


Vertical scrolling in a bar chart:

<chart>

   <chart_type>bar</chart_type>

   <!-- adjust chart_rect to fit a scroll bar -->
   <chart_rect x='100' width='250' />
   
   <!-- draw a scroll bar background -->
   <draw>     
      <rect layer='background' x='29' y='49' width='22' height='152' fill_alpha='20' />      
   </draw>    
   
   <scroll x='30'
           y='50'
           width='20'
           height='150'
           url_button_1_idle='default'
           url_button_2_idle='default'
           url_slider_body='default'
           url_slider_handle_1='default'
           url_slider_handle_2='default'
           start='20'
           span='40'
           />
		
</chart>

 


See the Gallery for additional examples. Click on the link below each chart to see its XML code.

 

 < previousnext > 


Copyright © 2003-2017, maani.us