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

 < previous 

 

Javascript to Flash Communication

 

Some charts functions can be controlled by sending messages to the tool from javascript.

Sending messages from Javascript to Flash (a chart) is not supported by all browsers. Browsers supporting it are Internet Explorer 5.0 and higher, Netscape 8.0 and higher, Mozilla 1.7.5 and higher, Firefox 1.0 and higher, Safari 1.3 and higher. An alternative to javascript is to draw buttons inside the chart, and use link to trigger updates.

The Full Screen mode and saving as bitmap must be activated by a user action (mouse click). They can not be activated from external javascript commands. This is a flash security feature that the tool itself cannot work around.

 


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',

 


Update URL

To update a chart from javascript by sending it an update URL:

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


<SCRIPT LANGUAGE=JavaScript>
  
   function My_Function (){
   
      // the update url to download the xml update from
      url = "http://your_server/update.xml";
   
      // show a spinning wheel while downloading the update
      spinning_wheel = true; 
   
      // number of seconds to wait before a download times out
      timeout = 30; 
   
      // number of times to try downloading before displaying an error
      retry = 2; 
      
      // the update mode (see the update function)
      mode = "reset";
   
      document.my_chart_1.Update_URL( url, spinning_wheel, timeout, retry, mode );   

   }
 
</script>


<BODY bgcolor="#FFFFFF">

<!-- your chart here -->

</BODY>
</HTML>

 


Update XML

To update a chart from javascript by sending it XML code:

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


<SCRIPT LANGUAGE=JavaScript>
  
   function My_Function(){
   
      // the update xml code without line breaks
      xml = "<chart><chart_type>bar</chart_type></chart>";
   
      // show a spinning wheel while loading the update
      spinning_wheel = true; 
      
      // the update mode (see the update function)
      mode = "reset";
   
      document.my_chart_1.Update_XML( xml, spinning_wheel, mode );   

   } 
</script>


<BODY bgcolor="#FFFFFF">

<!-- your chart here -->

</BODY>
</HTML>

 


Javascript Data Source

To create a chart with javascript without using an external XML source file:

 

1. Omit xml_source from FlashVars and give your chart a unique ID in the web page:

<!-- web page -->

'FlashVars', 'chart_id=my_chart_1&library_path=charts_library', 
'id', 'my_chart_1',
'name', 'my_chart_1',

 

2. When the xml_source is omitted, the tool automatically sends a message to a Loaded_Chart javascript function. This function can be used to send the XML code back to the tool like this:

<!-- web page -->

<SCRIPT LANGUAGE=JavaScript>
  
   function Loaded_Chart( id ){

      if( id=="my_chart_1" ){ 
      
         // the chart's xml code without line breaks
         xml = "<chart><chart_type>bar</chart_type></chart>";
   
         // don't show a spinning wheel while loading the update   
         spinning_wheel = false; 
         
         // the update mode (see the update function)
         mode = "reset";
   
         document.my_chart_1.Update_XML( xml, spinning_wheel, mode );   
      
       }
   }
 
</script>

 


Render Count

To inquire if the chart has been rendered and how many times:

<!-- web page -->
<SCRIPT LANGUAGE=JavaScript>
   
   // send a request to flash
   document.my_chart_1.Get_Render_Count();
   
   // receive the reply from flash
   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   

      ...
   }
 
</script>

 


Scroll

To scroll a chart from javascript:

<!-- web page -->
<SCRIPT LANGUAGE=JavaScript>

   // the scroll position (0-100)
   start = 10;
   
   // the visible area size (0-100)
   span = 50;
   
   document.my_chart_1.Scroll( start, span );   
 
</script>

 


Print

To print a chart from javascript:

<!-- web page -->
<SCRIPT LANGUAGE=JavaScript>
  
   document.my_chart_1.Print();   
 
</script>

 


Toggle Legend

To toggle legends and turn on or off series graphics:

<!-- web page -->
<SCRIPT LANGUAGE=JavaScript>
   
   // the legend to toggle (0-n)
   index = 0;
   
   document.my_chart_1.Toggle_Legend( index );   
 
</script>

 

 

 < previous 


Copyright 2003-2014, maani.us