!../../wiki/easy-ide-book/common/images/prev_page.gif! !../../wiki/easy-ide-book/common/images/toc.gif! !../../wiki/easy-ide-book/common/images/next_page.gif!

<font color="navy">Structure of program that specifies the graph axes</font>

Let’s specify the axes for the graph introduced in the “Basics” section.

1. Specifying the positions of the axes

top-axis = {ChartAxis {ChartDataSeries data, name}},
left-axis = {ChartAxis {ChartDataSeries data, age}},

The <font color="purple">LayeredChart</font> class has four options, namely, top-axis, bottom-axis, right-axis, and left-axis. Using these, we can place the four sides of a graph wherever we wish. In our example here, we specify the top and left sides of the graph. The specification is made using <font color="purple">ChartAxis</font>.

2. Specifying the range of axis gradations

right-axis = {{NumericDataSeriesAxis-of float} 
                 force-zero? = false, 
                 {ChartDataSeries data, score}
             },

Using right-axis we specify the right axis. In (1), we used <font color="purple">ChartAxis</font>, but in this example we’ll use <font color="purple">NumericDataSeriesAxis-of</font>. <font color="purple">NumericDataSeriesAxis-of</font> lets us set the range of the axis gradations, by specifying a minimum and maximum value. Here, by setting force-zero? to false, 0 is not displayed and the axis range is automatically set to cover an appropriate range.

3. Creating a line graph

{LineLayer
    {ChartDataSeries data, score},
    {ChartDataSeries data, age}
}

Here, rather than create a bar graph, we will plot a line graph. To do this, we use <font color="purple">LineLayer</font>. Because the axes are specified with the <font color="purple">LayeredChart</font>, there is no need for the x-axis-data specification.

4. Displaying the layout

{VBox
     {RecordGrid
         record-source = data,
         height = 3cm,
         width = 10cm
     },
     chart
 }

The final expression in the value block specifies the layout. Here, we use a <font color="purple">RecordGrid</font> to also display the data in the same <font color="purple">RecordSet</font>. When <font color="purple">RecordGrid</font> is used to modify the data, the graph values will also be modified in real time because any changes to <font color="purple">RecordSet</font> values that are used as data are automatically reflected on the graph.

!../../wiki/easy-ide-book/common/images/next_page.gif!