Page 4: Structure of a Program that Specifies the Graph Axes

[ashimo]

Structure of program that specifies the graph axes

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


1. Specifying the positions of the axes

Code:

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

The LayeredChart 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 ChartAxis.

2. Specifying the range of axis gradations

Code:

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

Using right-axis we specify the right axis. In (1), we used ChartAxis, but in this example we’ll use NumericDataSeriesAxis-of. NumericDataSeriesAxis-of 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

Code:

{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 LineLayer. Because the axes are specified with the LayeredChart, there is no need for the x-axis-data specification.

4. Displaying the layout

Code:

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

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