Using the Actuate JavaScript API in chart interactive features
BIRT reports support adding interactive features to a chart to enhance the behavior of a chart in the viewer. The interactive chart features are available through the chart builder. Implement Actuate JavaScript API functions within interactive features.
An interactive chart feature supports a response to an event, such as the report user choosing an item or moving the mouse pointer over an item. The response can trigger an action, such as opening a web page, drilling to a detail report, or changing the appearance of the chart. For example, use a tooltip to display the series total when a user places the mouse over a bar in a bar chart, as shown in Figure 2-5.
Figure 22-16 Chart showing a ToolTip
Figure 2-5  
Interactive features can be added to a value series, the chart area, a legend, marker lines, the x- and y-axis, or a title. Figure 2-6 identifies these elements.
Figure 22-17 Areas for chart interactivity
Figure 2-6  
To add an interactive feature to a chart, either choose Format Chart in the chart builder and select a chart element to make interactive, or choose the Script in the chart builder and select the chart element to make interactive. Figure 2-7 shows the location of the Interactivity button for a value series.
Figure 22-18 Interactivity for chart legend
Figure 2-7  
Figure 2-8 shows the elements accessible using the Script feature.
Figure 22-18 Interactivity for chart legend
Figure 2-8  
The location of the Interactivity button varies by chart element. Click the Interactivity button to display the interactivity editor. Figure 2-9 shows the interactivity editor.
Figure 22-16 Chart showing a ToolTip
Figure 2-9  
The Action Details window displays a script that runs when the user clicks an item in the series. The script adds a filter to the table that displays below the chart. The filter restricts the data by the selected element. The code performs the following three tasks to handle this interactivity:
*
var table = actuate.getViewer(evt.srcElement || evt.target).getCurrentPageContent( ).getTableByBookmark( );
The event is taken from the Invoke Script action of a BIRT chart. Set the Invoke Script action in the second field of the interactivity editor. The Invoke Script action contains the following variables:
*
*
*
*
The code above uses getViewer and the evt object to obtain a handle for the viewer when an event occurs. The Firefox and Internet Explorer browsers implement the event differently. For Firefox, evt.target contains the name of the Viewer object. For Internet Explorer, evt.srcElement contains the name of the Viewer object.
The getCurrentPageContent.getTableByBookmark( ) function retrieves the Table object for the first table in the viewer. To target a different table, use a specific table bookmark as the input parameter for getTableByBookmark( ).
*
table.setFilters(new actuate.data.Filter("COUNTRY", "eq", categoryData));
This code example creates a new filter using the actuate.data.Filter constructor. The constructor takes three arguments:
*
column name: The column name is the name of the series. In this case, the y-axis is a list of countries, so a mouse click filters the table according to the COUNTRY column.
*
*
value: the value of the categoryData object generated by the event, which is a country. The filter returns rows with a COUNTRY value that matches the value selected by the user.
*
table.submit( );
The Actuate JavaScript API processes operations asynchronously. Actions are performed when submit( ) is called.
Figure 2-10 shows the chart before interaction.
When the user selects the bar for Australia in the value series, the table is filtered for Australia, as shown in Figure 2-11.
Figure 22-16 Chart showing a ToolTip
Figure 2-10  
Figure 22-16 Chart showing a ToolTip
Figure 2-11  

Additional Links:

Copyright Actuate Corporation 2012