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

 < previousnext > 

 

Flash to Javascript Communication

 

Charts can send messages to javascript. This enables reading the status of a chart, controlling it from javascript, and synchronizing it with other web page elements.

When flash sends multiple messages to javascript around the same time, only the last message gets received. To work around this limitation, activate only the messages you need, or use Javascript to Flash communication to query the chart until you receive a response.

 


Web Page Preparation

Before using javascript, give each chart in the web page a unique ID to determine which chart is sending and receiving messages. Add the ID in 3 different places in the flash code of each chart:

'FlashVars', 'chart_id=my_chart_1&library_path=charts_library&xml_source=sample.xml', 
'id', 'my_chart_1',
'name', 'my_chart_1',

 


flash_to_javascript

If flash sends messages to a javascript function that does not exist, some browsers generate warning messages. To avoid this, add flash_to_javascript to the chart's XML Source to activate only the messages that have javascript functions to receive them:

<!-- XML Source -->
<chart>

<flash_to_javascript Loaded_Chart="false" Render_Count="true" Scrolled_Chart="true" Stopped_Scrolling="true" Toggled_Legend="true" />   

</chart>

 

  • Loaded_Chart: A boolean that indicates whether to send a message to a javascript function called Loaded_Chart right after the chart is loaded. This can be used to send the XML Source code to the chart from javascript. Valid values are true or false. The default is false (don't send this feedback to javascript).

  • Render_Count: A boolean that indicates whether to send a message to a javascript function called Render_Count after each time the chart gets rendered. Valid values are true or false. The default is false (don't send this feedback to javascript).

  • Scrolled_Chart: A boolean that indicates whether to send a message repeatedly to a javascript function called Scrolled_Chart as the chart gets scrolled. This can be used to receive the scrolling information of a chart, and make other charts scroll in sync with it (see scroll and Javascript to Flash). Valid values are true or false. The default is false (don't send this feedback to javascript).

  • Stopped_Scrolling: A boolean that indicates whether to send a message once to a javascript function called Stopped_Scrolling when scrolling stops. The default is false (don't send this feedback to javascript).

  • Toggled_Legend: A boolean that indicates whether to send a message to a javascript function called Toggled_Legend when the legend is clicked on or off. The default is false (don't send this feedback to javascript).

 


Javascript Functions

To receive the chart messages activated by flash_to_javascript, add the javascript functions to the web page before the <body> tag:

<!-- web page -->
<HTML>

<SCRIPT LANGUAGE=JavaScript>
<!--

   function Loaded_Chart( id ){
      //id is the chart's ID that sends a message
      if(id=="my_chart_1"){ ... }
   }
 
   function Render_Count( id, count ){
      //id is the chart's ID that sends a message
      
      // count is the number of times the chart has been rendered
      // count returns zero if the chart has never been rendered
      // count returns 1 if the chart has been rendered only once after the initial load
      // count returns 1 plus the number updates if the chart has been updated with the update function

      ...
   }
 
   function Scrolled_Chart( id, start, span ){
      //id is the chart's ID that sends a message
      //start is the position of the scroll bar in percent
      //span is the visible area of the chart in percent
      ...
   }
   
   function Stopped_Scrolling( id, start, span ){
      //id is the chart's ID that sends a message
      //start is the position of the scroll bar in percent
      //span is the visible area of the chart in percent
      ...
   }
   
   function Toggled_Legend( id, legend_index, series_on ){
      //id is the chart's ID that sends a message
      //legend_index is the clicked legend
      //series_on is a boolean indicating if the corresponding series is on or off
      ...
   }

-->
</script>

<BODY bgcolor="#FFFFFF">

<P>This is my web page.</P>

</BODY>
</HTML>

 


Link to Javascript

To make a javascript respond to a click on a link, omit the link's target and set the url to a javascript function:

<!-- XML Source -->
<chart>

   <link>
      <area x='290' y='100'width='75' height='25' url="javascript:alert('Hello World!')" />
      <area x='290' y='200'width='75' height='25' url="javascript:my_function('var1', 'var2')" />   
   </link>

</chart>

<HTML>

<!-- javascript in the web page -->
<SCRIPT LANGUAGE=JavaScript>
   function my_function( var1, var2 ){               
 		...
   } 
</script>

<BODY>

<!-- your chart here -->

</BODY>
</HTML>

 


Link_data to Javascript

To make a javascript respond to a click on a chart via link_data, set link-data's target to javascript, and set the url to a javascript function. To pass the click-variables to the javascript function, any occurrences of _col_, _row_, _value_, _category_, _series_, _x_, _y_, and _id_ in the URL are replaced with the actual values (_id_ is the chart's ID):

<!-- XML Source -->
<chart>

   <link_data url="javascript:my_function( _col_, _row_, _value_, _category_, _series_, _x_, _y_, _id_, 'Hello World!' )" target='javascript' /> 

</chart>

<HTML>

<!-- javascript in the web page -->
<SCRIPT LANGUAGE=JavaScript>
   function my_function( var1, var2, var3, var4, var5, var6, var7, var8, var8 ){               
 		...
   } 
</script>

<BODY>

<!-- your chart here -->

</BODY>
</HTML>

 

 

Example


<!-- XML Source -->
<chart>

   <!-- send to javascript messages related to scrolling, link_data, and link -->
   <flash_to_javascript Scrolled_Chart="true" />
   
   <link_data url="javascript:display_info( _series_, _category_, _value_ )" target='javascript' /> 

   <link>
      <area x='290' y='200' width='70' height='25' url="javascript:alert('This is generated by a link.')" />
   </link>

   
   <!-- create the necessary chart elements -->
   <chart_rect x='60' y='50' width='300' height='70' />
            
   <scroll x='60' y='145' width='300' height='20' slider_handle_length='8' button_length='20' start='20' span='50'
           url_button_1_idle='default'
           url_button_1_over='default'
           url_button_1_press='default'
           url_button_2_idle='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'
           />
		
   <draw>     
      <rect layer='background' x='60' y='120' width='300' height='25' fill_alpha='20' />
      <rect layer='background' x='58' y='144' width='304' height='22' fill_alpha='40' />
      <rect x='290' y='200' width='70' height='25' fill_color='cccccc' />
      <text x='310' y='204'>Link</text>
   </draw>         

</chart>


<!-- web page -->
<SCRIPT LANGUAGE=JavaScript>
<!--
 
function Scrolled_Chart(id, start, span){
 	document.output.Start.value=start;
 	document.output.Span.value=span;
}
 
function display_info( var1, var2, var3 ){
	temp_var="You clicked "+var1+", "+var2+". Value: "+var3;
	alert ( temp_var );
}

-->
</script>


<form name=output>
<P><B>Start:</B> <input type="text" value="" name="Start" size="20"></P>
<P><B>Span:</B> <input type="text" value="" name="Span" size="20"></P>
</form>

 

To test this, scroll the chart, click on the graphs, and click on the Link button:

Start:

Span:

 

 < previousnext > 


Copyright © 2003-2017, maani.us