Observe as the instructor examines more variable values as they change and as functions pass values.

  1. In the “other” Control Panel, under the Code tab, open the script for the function getDataForChart.

  1. Below the function declaration line, open a new line and type the debug(1) instruction, as shown here:
  2. Close the Code Editor window, and save the function.
  3. Return to the RevenuePieChart Component window.
  4. Click the Working Preview tab.

The Debugger window for the function passThisCustomerIDin appears. Notice that e.submitted appears in the Expression list, as when you last used the Debugger.

  1. Click the button once to execute the call to the function getDataForChart.


The window for that function appears:

  1. Double-click on args.


The Debugger adds it to the Expression list below the script, and displays a message under Value:

The Debugger identified args as a potential variable name, and indicates that it has not been declared yet.


  1. Click the        button.


The variable initialization executes, and the current value of args appears:

The +indicates that there may be more we can see about the parameter.

  1. Click the +.


The variable values list expands:

This makes the values easier to read and identify.

  1. Click the button again.

The args.Set method executes, and new values for args appear in the list.

  1. Add the sqlStmts variable to the list.
  2. Click the button.

Xbasic initializes the array element to 0.

  1. Add the arrayCount variable to the list.
  2. Click the button.

Xbasic initializes the arrayCount variable to 0.

  1. Click the button until the arrow is at the line after the statement dim chartDataTemplate as C.
  2. Move the mouse pointer over the variable name useThisCustomerID both places it appears in the function. Do not pin either box to the window.

Both times, the Debugger displays a box with the variables current value, passed in from the Component’s other Xbasic function.

  1. Double-click on the second appearance of the useThisCustomerID. (You could have used either one.)


The Debugger places the variable’s name and current value in the first row of the grid below the script window, as shown here:


  1. Double-click on the variable name chartDataTemplate, either in the current statement or in the dim statement. The variable name now appears in the Expression list:

The variable has no value yet.

  1. Click the button once to assign the string to chartDataTemplate. The variable’s new value appears:


Watch the same variables in your functions, and in addition:

  • Locate the variable chartData and add it to the Expression list.
  • Locate the variable sendThisToChart and add it to the Expression list, so you can see the JavaScript that Xbasic will send to browser.
  • Step through the script.
  • After executing the line arrayCount = sqlStmts.size(), notice the Value of arrayCount in the Expression list.