This diagram illustrates a SVG-generated graph, which tracks expenses by time. Using the XForms data model described in this report, it is possible to bind the expense report directly to data in the underlying expense tracker's data model, enabling entries to be computed dynamically across the sections dynamically found in the document. This information is then re-purposed, in this case, as an SVG-generated line-chart, which visually reflects the values of the data input by the user and/or calculated by the underlying script. The SVG graphic occupies the bottom half of a split-screen, the top of which contains the User Interface for this RIA.
The User Interface portion of Figure 4, "Expenses over time in SVG", is divided into two parts:
The second portion of the user interface is composed of four columns of edit boxes which are populated with expense information. The first column contains classification information -- the most abstract grouping of expense items -- which fall into such categories as "Food", "Travel", "Housing", etc. The second column of edit boxes contains clarifying information about the expense classified by the first column of edit boxes; e.g., "lunch at airport", "airfare" and "hotel". The third column contains the amount of the expense detailed in the previous two edit boxes in currency amounts. The fourth and final column of edit boxes contains the date upon which the expense was transacted. The last item in each row of columns is a labeled graphic indicating "Delete Entry".
Return to the text immediately following Figure 4.