Implementing Chart Events

Each element of a chart has a set of events that can be used to customize chart behavior. You can specify a JavaScript function that is executed when an end user triggers the event. The function is defined in an included JavaScript file in your project. For more information on charting events, see Charting Components.

For example, all data series include a Select event, which is triggered when an end user clicks the series in the chart, and a Spyglass event, which is triggered when the cursor hovers over the series. This section uses an example to show how these events are implemented in General Interface Builder.

The following charts use the Spyglass event to display descriptive text. The top chart, Major Categories, also uses the Select event to control data displayed in the bottom chart.

Select Event Example

The series component of the Major Categories chart has the following function associated with the Select event in the Events Editor palette:

eg.chart.doDrillDown(this.getChart(), strRECORDID);

The doDrillDown function displays detail data for the selected series in the Minor Categories chart. In the project, the function is defined in an included JavaScript file as follows:

chart.doDrillDown = function(objChart, strRecordId) {
      if (strRecordId == null) return;

   var objMinorChart =
      objChart.getServer().getJSXByName('minorCategories');
   objMinorChart.clearXmlData();

   var objNode = objChart.getRecordNode(strRecordId);
   var childNodes = objNode.getChildNodes();
   var node = null;
   while ((node = childNodes.next()) != null) {
      objMinorChart.insertRecordNode(node.cloneNode(), 'jsxroot',
         false);
   }

   objMinorChart.repaint();
};

The function takes a chart object, the Minor Categories chart, and a record ID string as input. It uses the jsx3.app.Model.getServer() method to get a handle to the server instance for the Minor Categories chart. The jsx3.xml.Cacheable.clearXmlData() method is called to clear the cached CDF document providing the currently visible data.

Analyzing the CDF code that provides chart data is useful when defining the steps to obtain detail data:

<data>
 <record jsxid="1" jsxtext="North East" jsxvalue="38"
  color="#003399">
    <record jsxid="1-1" jsxtext="New York" jsxvalue="17"
     color="#0033CC"/>
    <record jsxid="1-2" jsxtext="New Jersey" jsxvalue="10"
     color="#6666CC"/>
    <record jsxid="1-3" jsxtext="Pennsyl." jsxvalue="5"
     color="#0066FF"/>
    <record jsxid="1-4" jsxtext="Delaware" jsxvalue="4"
     color="#0099FF"/>
    <record jsxid="1-5" jsxtext="Others" jsxvalue="2"
     color="#33CCCC"/>
 </record>
...
</data>

The record ID, which is the value of the jsxid attribute provided by the user click, is passed to the jsx3.xml.CDF.getRecordNode() method. This method returns a jsx3.xml.Entity object representing the object handle to the CDF record. The getChildNodes () method then returns all nested records in the series for display in the Minor Categories chart. The detail records are inserted into the cached CDF document for the chart, and the chart is repainted in the browser.

Spyglass Event Example

The series components for both the Major Categories and Minor Categories charts have the following function associated with the Spyglass event in the Events Editor palette:

eg.chart.pieSpy(this.getChart(), strRECORDID);

The pieSpy function calculates and displays the percentage, relative to 100%, represented by a specific series. The formatted result is displayed in a spyglass window when the cursor hovers over the series. In the project, the function is defined in an included JavaScript file as follows:

chart.pieSpy = function(objChart, strRecordId) {
   var objNode = objChart.getRecordNode(strRecordId);
   var siblings = objNode.getParent().getChildNodes();

   var sum = 0;
   var node = null;
   while ((node = siblings.next()) != null) {
      sum += parseFloat(node.getAttribute('jsxvalue'));
   }

      return "<b>" + objNode.getAttribute('jsxtext') + "</b>: " +
         parseFloat(((100 * objNode.getAttribute('jsxvalue')
            sum).roundTo(0.1)).toString().substring(0,5)) + "%";
};

As in the Select Event example, the record ID, which is the value of the jsxid attribute provided by the user action, is passed to the jsx3.xml. CDF.getRecordNode() method. All child nodes in the series are retrieved, and the jsxvalue attribute for each row is totaled to obtain a sum for the series. The percentage is calculated by comparing the value of the current node to this sum, then formatted for display in the chart.

For information on Charting events, see General Interface GUI Event Reference or hover over an event name in the Events Editor palette.