Annotations > JavaScript API

The annotations can be controlled by JavaScript using the following methods:

 
Function Name Parameter Description
showAnnotation(strGroupID) strGroupID Shows an annotation with the specified group ID.
hideAnnotation(strGroupID) strGroupID Hides an annotation with the specified group ID.

 
Using these methods

To use any of the methods above, you'll first need to register the chart with JavaScript by setting registerWithJS flag to 1, as under.

(Note the last parameter set as 1)

var chart1 = new FusionCharts("HLED.swf", "ChId1", "350", "100", "0", "1");
Thereafter, you can refer to the chart using its DOM Id and call any of these methods as shown below:

<HTML>
<HEAD>
   <TITLE>FusionWidgets v3 - JS API</TITLE>
   <script type="text/javascript" src="../Charts/FusionCharts.js"></script>
   <script language="javascript">
      //FC_ChartUpdated method is called when chart has changed value in real-time.
      function FC_ChartUpdated(DOMId){
         //Check if DOMId is that of the chart we want
         if (DOMId=="ChId1"){
            //Get reference to the chart
            var chartRef = getChartFromId(DOMId);
            //Show a particular annotation
            var chartValue = chartRef.showAnnotation("GRPRED");
           ... Do what your application demands...
         }
      }
   </script>   
</HEAD>
<BODY>
   <CENTER>
      <div id="chart1div">
         This text is replaced by the Flash movie.
      </div>
      <script type="text/javascript">
         var chart1 = new FusionCharts("../Charts/HLED.swf", "ChId1", "350", "100", "0", "1");
         chart1.setDataURL("Data.xml");
         chart1.render("chart1div");
      </script>      
</BODY>
</HTML>