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

 < previousnext > 

 

draw

 

<draw>

   <!-- circle --/>
   <circle layer='string'
           transition='string'
           delay='number' 
           duration='number'
           x='number' 
           y='number' 
           radius='number'  
           fill_color='string' 
           fill_alpha='number' 
           line_color='string' 
           line_alpha='number'
           line_thickness='number'
           shadow='string'
           bevel='string'
           glow='string'
           blur='string'
           blend='string'
           />
           
    <!-- image (JPEG, unanimated GIF, PNG, or SWF) --/>
    <image layer='string'
           transition='string'
           delay='number' 
           duration='number'
           url='string' 
           x='number' 
           y='number' 
           width='number'  
           height='number' 
           rotation='number' 
           alpha='number' 
           shadow='string'
           bevel='string'
           glow='string'
           blur='string'
           timeout='number'
           retry='number'
           blend='string'
           />

     <!-- line --/>
     <line layer='string'
           transition='string'
           delay='number' 
           duration='number'
           x1='number' 
           y1='number' 
           x2='number'  
           y2='number' 
           line_color='string' 
           line_alpha='number'
           line_thickness='number'
           shadow='string'
           bevel='string'
           glow='string'
           blur='string'
           blend='string'
           />
           
     <!-- rect --/>
     <rect layer='string'
           transition='string'
           delay='number' 
           duration='number'
           x='number' 
           y='number' 
           width='number'  
           height='number' 
           rotation='number' 
           fill_color='string' 
           fill_alpha='number'
           line_color='string' 
           line_alpha='number'
           line_thickness='number'
           corner_tl='number'
           corner_tr='number'
           corner_br='number'
           corner_bl='number'
           shadow='string'
           bevel='string'
           glow='string'
           blur='string'
           blend='string'
          />
           
     <!-- text --/>
     <text layer='string'
           transition='string'
           delay='number' 
           duration='number'
           x='number' 
           y='number' 
           width='number'  
           height='number' 
           h_align='string' 
           v_align='string' 
           rotation='number' 
           font='string' 
           bold='boolean' 
           size='number' 
           color='string' 
           alpha='number'
           shadow='string'
           bevel='string'
           glow='string'
           blur='string'
           blend='string'
           >text to draw</text>

   <!-- button --/>
   <button layer='string'
           transition='string'
           delay='number' 
           duration='number'
           url_idle='string' 
           url_over='string' 
           url_press='string' 
           x='number' 
           y='number' 
           width='number'  
           height='number' 
           alpha='number' 
           shadow='string'
           bevel='string'
           glow='string'
           blur='string'
           timeout='number'
           retry='number'
           blend='string'
           />

</draw>


Description

draw holds any number of elements to draw. A draw element can be a circle, image (JPEG, unanimated GIF, PNG, or SWF), line , rect, or text.

Use draw image to include SWF flash files with animation, rollover buttons, sounds, scripts, etc.

 


Circle

Each circle has the following attributes:

  • layer: The layer to draw the element in. Valid values are background, which places the element behind the chart, and foreground, which places the element in front of the chart. The default is foreground. Elements placed in the same layer are drawn in the same order they're arranged in the draw array.

  • transition: The way to make this element appear. 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 element 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 circle's center relative to the upper left corner of the background (0, 0). The default is zero.

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

  • radius: The circle's radius. The default is 100.

  • fill_color: The color inside the circle. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • fill_alpha: The transparency value inside the circle. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • line_color: The border's color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • line_alpha: The border's transparency value. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • line_thickness: The border's thickness. The default is 0 pixels.

  • shadow: The ID of a shadow filter to apply to the circle. This is omitted by default (no shadow).

  • bevel: The ID of a bevel filter to apply to the circle. This is omitted by default (no bevel).

  • glow: The ID of a glow filter to apply to the circle. This is omitted by default (no glow).

  • blur: The ID of a blur filter to apply to the circle. This is omitted by default (no blur).

  • blend: Determines how to mix the graphic's colors with other graphics underneath it. Valid values are:

    • add
    • darken
    • difference
    • hardlight
    • invert
    • lighten
    • multiply
    • normal
    • overlay
    • screen
    • subtract

 


Image

Each image has the following attributes:

  • layer: The layer to draw the element in. Valid values are background, which places the element behind the chart, and foreground, which places the element in front of the chart. The default is foreground. Elements placed in the same layer are drawn in the same order they're arranged in the draw array.

  • transition: The type of the transition. 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 element 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.

  • url: Relative or absolute URL of a JPEG, unanimated GIF, PNG, or SWF flash animation. This must be in the same sub-domain as the charts.swf file (flash security).

  • x: The horizontal position of the image's top-left corner relative to the upper left corner of the background (0, 0). This parameter is omitted by default.

  • y: The vertical position of the image's top-left corner relative to the upper left corner of the background (0, 0). This parameter is omitted by default.

  • width: The images's width. This parameter is omitted by default.

  • height: The images's height. This parameter is omitted by default.

  • rotation: The image's rotation around its upper-left corner (x, y). The default value is zero.

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

  • shadow: The ID of a shadow filter to apply to the image. This is omitted by default (no shadow).

  • bevel: The ID of a bevel filter to apply to the image. This is omitted by default (no bevel).

  • glow: The ID of a glow filter to apply to the image. This is omitted by default (no glow).

  • blur: The ID of a blur filter to apply to the image. This is omitted by default (no blur).

  • blend: Determines how to mix the graphic's colors with other graphics underneath it. Valid values are:

    • add
    • darken
    • difference
    • hardlight
    • invert
    • lighten
    • multiply
    • normal
    • overlay
    • screen
    • subtract


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

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

 

Make composite charts by drawing one chart (charts.swf) inside another. Pass the library and source paths in the query part of the charts.swf URL like this:

<chart>

   <!-- make this chart a pie chart -->
   <chart_type>pie</chart_type>

   <!-- draw another chart inside this one -->
   <draw>
      <image url='charts.swf?library_path=libs/charts_library&xml_source=sample.xml' />
   </draw>

</chart>

 

To give the second chart the same coordinate system as the first, omit the x, y, width, and height parameters from the draw function. See the examples in the gallery section.

The second charts.swf is rendered after the first chart with a small loading delay. Designing composite charts should take this delay into account.

 


Line

Each line has the following attributes:

  • layer: The layer to draw the element in. Valid values are background, which places the element behind the chart, and foreground, which places the element in front of the chart. The default is foreground. Elements placed in the same layer are drawn in the same order they're arranged in the draw array.

  • transition: The type of the transition. 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 element 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.

  • x1: The horizontal position of the line's start point relative to the upper left corner of the background (0, 0). The default is zero.

  • y1: The vertical position of the line's start point relative to the upper left corner of the background (0, 0). The default is zero.

  • x2: The horizontal position of the line's end point relative to the upper left corner of the background (0, 0). The default is 100.

  • y2: The vertical position of the line's end point relative to the upper left corner of the background (0, 0). The default is 100.

  • line_color: The line's color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • line_alpha: The line's transparency value. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • line_thickness: The line's thickness. The default is 1 pixel.

  • shadow: The ID of a shadow filter to apply to the line. This is omitted by default (no shadow).

  • bevel: The ID of a bevel filter to apply to the line. This is omitted by default (no bevel).

  • glow: The ID of a glow filter to apply to the line. This is omitted by default (no glow).

  • blur: The ID of a blur filter to apply to the line. This is omitted by default (no blur).

  • blend: Determines how to mix the graphic's colors with other graphics underneath it. Valid values are:

    • add
    • darken
    • difference
    • hardlight
    • invert
    • lighten
    • multiply
    • normal
    • overlay
    • screen
    • subtract

 


Rectangle

Each rect has the following attributes:

  • layer: The layer to draw the element in. Valid values are background, which places the element behind the chart, and foreground, which places the element in front of the chart. The default is foreground. Elements placed in the same layer are drawn in the same order they're arranged in the draw array.

  • transition: The type of the transition. 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 element 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 rectangle's upper left corner relative to the upper left corner of the background (0, 0). The default 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 is zero.

  • width: The rectangle's width. The default is 100.

  • height: The rectangle's height. The default is 100.

  • rotation: The rectangle's rotation around its upper left point (x, y). The default value is zero.

  • fill_color: The color inside the rectangle. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • fill_alpha: The transparency value inside the rectangle. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • line_color: The border's color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • line_alpha: The border's transparency value. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • line_thickness: The border's thickness. The default is 0 pixels.

  • corner_tl: The top-left corner radius in pixels. If this is set to a value above zero, then the top-left corner gets rounded by this radius amount. The default is omitted (square corner).

  • corner_tr: The top-right corner radius in pixels. If this is set to a value above zero, then the top-right corner gets rounded by this radius amount. The default is omitted (square corner).

  • corner_br: The bottom-right corner radius in pixels. If this is set to a value above zero, then the bottom-right corner gets rounded by this radius amount. The default is omitted (square corner).

  • corner_bl: The bottom-left corner radius in pixels. If this is set to a value above zero, then the bottom-left corner gets rounded by this radius amount. The default is omitted (square corner).

  • shadow: The ID of a shadow filter to apply to the rectangle. This is omitted by default (no shadow).

  • bevel: The ID of a bevel filter to apply to the rectangle. This is omitted by default (no bevel).

  • glow: The ID of a glow filter to apply to the rectangle. This is omitted by default (no glow).

  • blur: The ID of a blur filter to apply to the rectangle. This is omitted by default (no blur).

  • blend: Determines how to mix the graphic's colors with other graphics underneath it. Valid values are:

    • add
    • darken
    • difference
    • hardlight
    • invert
    • lighten
    • multiply
    • normal
    • overlay
    • screen
    • subtract

 


Text

Each text has the following attributes:

  • layer: The layer to draw the element in. Valid values are background, which places the element behind the chart, and foreground, which places the element in front of the chart. The default is foreground. Elements placed in the same layer are drawn in the same order they're arranged in the draw array.

  • transition: The type of the transition. 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 element 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 rectangle's upper left corner relative to the upper left corner of the background (0, 0).

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

  • width: The rectangle's width.

  • height: The rectangle's height.

  • h_align: The text's horizontal alignment inside the rectangle. Valid values are left, center, and right. The default is left.

  • v_align: The text's vertical alignment inside the rectangle. Valid values are top, middle, and bottom. The default is top.

  • rotation: The rectangle's rotation. This works only when the embedded font is used (see Fonts). The rectangle rotates around its upper left point (x, y). The default value is zero.

  • font: The font used to draw the text (see Fonts). The default is Arial.

  • bold: A boolean value that indicates whether the font is bold or not. The default is true.

  • size: The font's size. The default font size is calculated based on the background size.

  • color: The font's color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • alpha: This affects the text's transparency, only when the embedded font is used (see Fonts). Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • shadow: The ID of a shadow filter to apply to the text. This is omitted by default (no shadow).

  • bevel: The ID of a bevel filter to apply to the text. This is omitted by default (no bevel).

  • glow: The ID of a glow filter to apply to the text. This is omitted by default (no glow).

  • blur: The ID of a blur filter to apply to the text. This is omitted by default (no blur).

  • blend: Determines how to mix the graphic's colors with other graphics underneath it. Valid values are:

    • add
    • darken
    • difference
    • hardlight
    • invert
    • lighten
    • multiply
    • normal
    • overlay
    • screen
    • subtract


Multi-line Text

To draw multi-line text, break the text with \r. Example: "Show this in\rtwo lines".

 


Button

A button is just a visual element that does not perform an action. To make it perform an action, place a link over it. A button differs than an image in that it has different states (idle, mouse over, and mouse press). Each button has the following attributes:

  • layer: The layer to draw the element in. Valid values are background, which places the element behind the chart, and foreground, which places the element in front of the chart. The default is foreground. Elements placed in the same layer are drawn in the same order they're arranged in the draw array.

  • transition: The type of the transition. 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 element 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.

  • url_idle: Relative or absolute URL of a JPEG, unanimated GIF, PNG, or SWF flash animation for the button's idle state (when the mouse is outside of its boundaries). This must be in the same sub-domain as the "charts.swf" file (flash security).

  • url_over: Relative or absolute URL of a JPEG, unanimated GIF, PNG, or SWF flash animation for the button's roll over state (when the mouse is inside its boundaries). This must be in the same sub-domain as the charts.swf file (flash security). If this attribute is omitted, then it acquires the value of url_idle.

  • url_press: Relative or absolute URL of a JPEG, unanimated GIF, PNG, or SWF flash animation for the button's roll press state (when the button is clicked). This must be in the same sub-domain as the charts.swf file (flash security). If this attribute is omitted, then it acquires the value of url_idle.

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

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

  • width: The button's width. The default is 100.

  • height: The button's height. The default is 100.

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

  • shadow: The ID of a shadow filter to apply to the button. This is omitted by default (no shadow).

  • bevel: The ID of a bevel filter to apply to the button. This is omitted by default (no bevel).

  • glow: The ID of a glow filter to apply to the button. This is omitted by default (no glow).

  • blur: The ID of a blur filter to apply to the button. This is omitted by default (no blur).

  • blend: Determines how to mix the graphic's colors with other graphics underneath it. Valid values are:

    • add
    • darken
    • difference
    • hardlight
    • invert
    • lighten
    • multiply
    • normal
    • overlay
    • screen
    • subtract


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

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

 

 

Example

<chart>

   <!-- draw a JPEG image behind the chart -->
   <!-- draw a rectangle with 2 rounded corners -->   
   <!-- slide a text in front of the chart -->

   <draw>
   
      <image layer='background' 
             url='images/pattern.jpg' 
             x='0'  
             y='0'
             width='400'  
             height='250'
             alpha='75'
             />
      
      <rect x='100' 
            y='40' 
            width='200'  
            height='100' 
            fill_color='ff0000' 
            fill_alpha='50'
            line_thickness='0'
            corner_tr='40'
            corner_bl='40'
            />
            
      <text transition='slide_left'
            delay='1'
            duration='1'
            x='0'
            y='250' 
            width='250'  
            height='100' 
            h_align='center' 
            v_align='top' 
            rotation='-90' 
            size='65' 
            color='4400ff' 
            alpha='90'
            >graph</text>
               
      </draw>

</chart>

 

 < previousnext > 


Copyright © 2003-2017, maani.us