AT&T Home | AT&T Labs | Research
AT&T Labs, Inc. - Research

The Yoix® Scripting Language

Home | What's New | Grammar | Documentation | Download | License | YChart | YDAT | YWAIT | Byzgraf | FAQs

Yoix /

Yoix Interactive Periodic Table

An interactive perodic table of the elements and chart of the nuclides built using Yoix and YChart.

Yoix Interactive Unicode Chart

An interactive chart of Unicode characters Plane 0 (0000-FFFF) built using Yoix and YChart.

YChart is a tool for presenting interactive charts of information cells. Some familiar charts consisting of information cells are the periodic table of the elements, the chart of the nuclides and unicode character sets. YChart, like Byzgraf, provides a substantive and useful example of a tool that can be built using Yoix technology.

YChart, like YDAT, is an interactive tool for visualizing data. Though not as much of a data mining tool as YDAT, YChart is nonetheless a useful tool for getting information from data. Cell arrangement, cell sizing and cell coloring are the primary data visualization techniques that YChart provides. An interactive cell filtering and selection features are also part of YChart as is chart and cell mark-up, which in this context means allowing one to write, i.e., put marks, directly on the chart.

YChart is designed to allow developers to easily build their own charts. We give some examples below to show how only a few lines of code are needed to start displaying charts. Our more complex example shows a scheduling example, where the actual fall 2008 semester courses of three cooperating colleges are displayed and filterable by department, instructor and other parameters.

Even if you are not interested in incorporating YChart into your Yoix application, YChart may be of interest to you because we have built what we hope are two useful YChart applications for you. As highlighted to the right, these fully-functioning YChart applications are a periodic table of the elements and a unicode chart (Plane 0).

Building a YChart

The YChart library script file, the YChart module and the YChart demos and applications are included in the standard Yoix distribution and is available from our download page.

For the demos described here and the periodic table and unicode chart applications, the distribution includes shell or BAT files, as appropriate, that simplify command line invocation to a single command. However, for the more general case, there are several ways that a YChart script can be invoked. In the following, we assume all necessary files are in the current directory, which is usually not the case, and that all executable scripts can be found through the execution PATH set in the current operating environment. When these conditions do not hold, simple adjustments, such as using the full path name to file in question, will resolve the issue. Also, for the purposes of these sample command lines, we will assume that the ychart script is called: script_ychart.yx. The simplest way to start a YChart script is by an invocation of the form:

   ychart [ychart_options] script_ychart.yx
To use the YChart script library file, which is called ychart.yx, directly, one would use a command line invocation of the form:
   yoix [yoix_options] ychart.yx [ychart_options] script_ychart.yx
To go all the way down to the Java virtual machine, one would use a command of the form:
   java [java_options] -jar yoix.jar [yoix_options] ychart.yx [ychart_options] script_ychart.yx
where the file yoix.jar is the Yoix interpreter JAR file.

As is typical with the Yoix interpreter, the script could be accessed through a web server by simply specifying the URL, namely:

   ychart http://somewhere/script_ychart.yx
All the other forms mentioned above will also work with a URL.

A Minimal YChart Example

A minimal YChart script really only needs to contain a Yoix dictionary called ChartData, which itself only needs to contain a single function called LoadChart. As a very simple example, consider this complete YChart specification script:
Dictionary ChartData = {
  LoadChart() {
    int r;
    int c;

    rows = 12;
    columns = 12;
    chartcells = new Array[rows*columns];

    for (r = 0; r < rows; r++)
      for (c = max(0,r-1); c < min(r+1,columns); c++)
        NewChartCell(NULL, r, c, 1, 1, NULL, NULL);
[Image: minimalist YChart example]

Figure 1. Minimal YChart example

Without even knowing anything about the YChart script library, it is not too hard to figure out that the above script will construct a 12 row by 12 column chart with only, at most, the 3 cells in each row that straddle the diagonal actually constructed. If we put this script in a file called minimal_ychart.yx, which is how it is named in the YChart distribution, then invoking the special demo script available in the distribution, namely:
results in the YChart displayed in Figure 1.

This minimal example only overrides the default LoadChart function. Because nothing else was specified, cells have the default coloring, there is a default frame title and no cell labels appear. Nonetheless, at the same time, built into this simple chart are a number of features such as menubar, drop down and pop-up menus that give access to both chart and cell manipulation functions; zooming; key mappings; annotation mode and a navigation rose. We encourage you to try this example, which is contained in the distribution, and experiment with the various features that are available even in this simplest case.

Another, Simple YChart Example

Another simple example in the YChart distribution is in a file called simple_ychart.yx. The complete script involves about 1,700 non-commented, non-whitespace characters. You can run the simple_ychart.yx script as follows:
   ychart simple_ychart.yx
Figure 2 shows the script running and zoomed in to show some of the detail that is demonstrated by this script.
[Image: simple YChart demo program]

Figure 2. Simple YChart demo program

Following along in the script code and starting from the top of the script, we can run through the elements of the ChartData dictionary:

  • The GetCellLabelGenerators() function added a Top label in the upper left of each cell, a Bottom label in the lower left of each cell, and row and column information in the center of each cell.
  • The result of the GetColorMenuData() function is not really visible in the figure as it added items to the Colors menu available in the frame's menubar. The function defines three menu options: one for coloring the cells red, one for coloring the cells blue and one for coloring the cells with alternating cyan and green stripes. That option is set as the default. The actual coloring is managed by the function that is described next.
  • The GetCellBackground() function sets the background color of the cell which is passed in as an argument.
  • The AfterPressed() function is called when the mouse is clicked on a chart cell. The cell in question is provided as an argument. In this case, a mouse click causes a message to be printed on the standard error stream.
  • As with the minimal example discussed briefly above, the LoadChart() function constructs the cells that appear in the chart.
  • Finally, SetFrameTitle() does as its name says: it sets the JFrame title used to display the chart. The hex character, incidentally, represents the unicode character for the registered trademark symbol.
We encourage you to play around with the various menu bar and choice box options in these examples to learn about other YChart features. You can find information about the menu options and other features at the YChart help page, though this limited example does not exercise all the features listed on that page.

Those wishing to build a more complex YChart application will need to read through the extensive comments in the ychart.yx script file to learn about the various functions and variables used for configuring a YChart.

A Considerably More Complex Example

A considerably more complex example using real data demonstrates YChart being used to display schedule information. This example also demonstrates that YChart can have cells with differing dimensions. The schedule in question is the fall semester course schedule for a tri-college consortium. To gather the data for this example we used a custom, screen-scraping perl script (, which is also included in the distribution, to collect all the Spring 2009 course schedule information for Bryn Mawr, Haverford and Swarthmore from their Tri-College Course Guide web site ( Due to some questions we had regarding the validity of some of the data, we excluded any weekend classes and any classes scheduled between midnight and 6am. In addition, one class scheduled for a specific time, but not any specific day was also excluded. We retained classes that were apparently mis-scheduled into the same location at over-lapping times by adding a second instance of the location with the phrase Booked x 2 appended to its identifier.

The chart is organized to show individual locations, i.e., classrooms, as rows and time information spanning columns. Thus, cells in the chart describe classes occurring at specific locations over a specific length of time. Cell labelling displays course name, course id, time, day, department, instructor, college, location information. Mouse-over labels display course name and information pertaining to the current coloring scheme in effect. Data-specific color schemes are available based on day, college, department or instructor. Selector menus, i.e., pull-down menus at the bottom-center of the chart allow selection of the nearest cell to specific location, time and day information. Detail course guide information pertaining to a selected cell is displayed in an optionally displayed panel to the right of the chart. A URL for more information on the tri-college web site also displays and pressing a button in the GUI opens a browser to that webpage. Information for courses that span departments or use multiple instrucors is retained and diplays as semi-colon separated text where appropriate and also shows up in the course detail panel. Cell search based on any of the information in the cell labels as well as undisplayed information resulting from cross-listings, e.g., multiple departments or instructors, is available. Filters for day, college, department and instructor allow hiding of cells not currently of interest. Such hiding excludes the invisible cells from search and selection.

Some of the above features are shown in the figures below, although the reduced images size causes some of the details to be lost. We strongly recommend trying this demo yourself to help you get a better feel for its capabilities. The command to start this demo is:

Incidentally, the perl script to generate the data needed for this example runs fairly quickly, generally under five minutes depending on your network connection, and outputs its information in a format that is ready to be included into the schedule_ychart.yx script. Consequently, it would be easy to update this example for the Spring 2008 semester and other semesters, when needed. Moreover, it should not be hard for an experience perl programmer to modify this script or construct an equivalent one for other college course guide sites.

Regarding the figures below, figure 3 shows the course guide example at start-up. For this YChart example, the cell grid is set visible as the default. The cell coloring is based on day of the week, Monday through Friday. For some odd reason it appears that no instructors have scheduled classes for Friday evening!

[Image: College Schedule - Start-Up]

Figure 3. YChart Tri-College Course Schedule at start-up; the chart grid is visible by default

Figure 4 shows the details of the upper-left corner the chart in figure 3. When zoomed in enough, the row, column and cell labels are made visible. The Elementary Spanish class is selected in the figure and the course detail panel is open to show the details about that class. Because it is selected, the location, day and starting time information for the class is shown in the selectors at the bottom of the window. In addition, the course name is displayed to the lower left and color-scheme information is to the lower right. Incidentally, note the Booked x 2 suffix attached to the BYC106 location in row three. It is there because if one follows the chart horizontally along the two BYC106 rows, you will find that Pediatric Psychology, which runs Monday from 7pm to 10pm, conflicts with the Intermediate Spanish class that runs on Monday from 7pm to 8:30pm. There are other such double-booking examples in the data.
[Image: College Schedule - Detail]

Figure 4. YChart Tri-College Course Schedule showing label detail and the course information panel

Figure 5 shows the chart with the grid turn off to make the cells a bit more apparent in the figure at this level of zoom. Coloring is by college. In addition, filter options in the menubar have been used to make only the Computer Science, Engineering and Mathematics department courses visible. The (hard-to-see) white cell among the reddish cells at the upper-center of the chart is selected. The find panel, which is visible toward the bottom of the window, was used to find the selected class. The cursor is currently on the Find Next button in the find panel, as the visible tool-tip indicates.
[Image: College Schedule - Selected Departments]

Figure 5. YChart Tri-College Course Schedule showing only selected departments and with the find panel visible and the chart grid turned off

In figure 6, the cells are colored by department. The selected cell is in the Mathematics department while the cursor is hovering over a cell in the Computer Science department. Labeling to the lower left and right is tied to the hovering cursor, not the selected cell, incidentally. The labels of cells extended beyond the left edge of the chart track the left edge of the chart to keep the labels as completely visible as possible for as long as possible. Activation of this feature in the chart script is optional.
[Image: College Schedule - Tracked Labels]

Figure 6. YChart Tri-College Course Schedule colored by department. Note the cell labels of the left-most cells have slid over to make themselves as completely visible as possible.

Some Broadly Useful YChart Programs

To show YChart applied to some broadly useful situations, we constructed two substantive YChart programs: a YChart periodic table of the elements and a YChart unicode chart. Visit the pages for those examples to find out how to access them and run them. The source files are heavily commented and provide case studies, albeit rather complex ones, for building your own YChart applications.


Yoix is a registered trademark of AT&T Inc.