<![CDATA[Curl Global Community - Try 4: Displaying Data as a Graph]]> https://communities.curl.com/ Fri, 24 Apr 2026 17:24:12 +0000 MyBB <![CDATA[Page 8: Extra Practice]]> https://communities.curl.com/showthread.php?tid=70 Mon, 20 Jun 2011 04:10:44 +0000 https://communities.curl.com/showthread.php?tid=70 Extra Practice

Let’s use options to change the format and colors of a graph.

Practice Problem 1: Basics

Define data like that shown below, and then display a cumulative bar graph for the score1 and score2 data fields. For the x-axis label, use the name field.

Code:
let data:RecordSet = {RecordSet
                         {RecordFields
                             {RecordField name, domain = String},
                             {RecordField score1, domain = int},
                             {RecordField score2, domain = int}
                         },
                         {RecordData name = Matt, score1 = 30, score2 = 45},
                         {RecordData name = Sarah, score1 = 55, score2 = 40},
                         {RecordData name = Jacob, score1 = 20, score2 = 65}
                     }



Hint: To display the cumulative graph, use stacking-mode = ChartStackingMode.stacked with BarLayer.

Solution

Solution Program: c:\Curl\Try4\04_exercise1\start.curl

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField score1, domain = int},
                {RecordField score2, domain = int}
            },
            {RecordData name = Matt, score1 = 30, score2 = 45},
            {RecordData name = Sarah, score1 = 55, score2 = 40},
            {RecordData name = Jacob, score1 = 20, score2 = 65}
        }
    
    let chart:LayeredChart = {LayeredChart
                                 height = 5cm,
                                 width = 10cm,
                                 {BarLayer
                                     stacking-mode = ChartStackingMode.stacked,
                                     x-axis-data = {ChartDataSeries data, name},
                                     {ChartDataSeries data, score1},
                                     {ChartDataSeries data, score2}
                                 }
                             }
    chart
}

Practice Problem 2: Basics

Display the data used with Practice Problem 1 as a bar graph. In this problem, reverse the directions of the x- and y-axes and then display the graph.


Hint: To change the orientation of the graph, use flipped? = true with LayeredChart.

Solution

Solution Program: c:\Curl\Try4\05_exercise2\start.curl

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField score1, domain = int},
                {RecordField score2, domain = int}
            },
            {RecordData name = Matt, score1 = 30, score2 = 45},
            {RecordData name = Sarah, score1 = 55, score2 = 40},
            {RecordData name = Jacob, score1 = 20, score2 = 65}`
        }
    
    let chart:LayeredChart = {LayeredChart
                                 height = 5cm,
                                 width = 10cm,
                                 flipped? = true,
                                 {BarLayer
                                     x-axis-data = {ChartDataSeries data, name},
                                     {ChartDataSeries data, score1},
                                     {ChartDataSeries data, score2}
                                 }
                             }
    chart
}

Practice Problem 3: Basics

Using the same data as that used in Practice Problem 1, display the score1 data as a bar graph, and the score2 data as a line graph, as shown in the figure below:


Hint: LayeredChart can have multiple ChartLayers.

Solution

Solution Program: c:\Curl\Try4\06_exercise3\start.curl

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField score1, domain = int},
                {RecordField score2, domain = int}
            },
            {RecordData name = Matt, score1 = 30, score2 = 45},
            {RecordData name = Sarah, score1 = 55, score2 = 40},
            {RecordData name = Jacob, score1 = 20, score2 = 65}
        }
    
    let chart:LayeredChart = {LayeredChart
                                 height = 5cm,
                                 width = 10cm,
                                 {BarLayer
                                     x-axis-data = {ChartDataSeries data, name},
                                     {ChartDataSeries data, score2}
                                 },
                                 {LineLayer
                                     {ChartDataSeries data, score1}
                                 }
                             }
    
    chart
}
]]> Extra Practice

Let’s use options to change the format and colors of a graph.

Practice Problem 1: Basics

Define data like that shown below, and then display a cumulative bar graph for the score1 and score2 data fields. For the x-axis label, use the name field.

Code:
let data:RecordSet = {RecordSet
                         {RecordFields
                             {RecordField name, domain = String},
                             {RecordField score1, domain = int},
                             {RecordField score2, domain = int}
                         },
                         {RecordData name = Matt, score1 = 30, score2 = 45},
                         {RecordData name = Sarah, score1 = 55, score2 = 40},
                         {RecordData name = Jacob, score1 = 20, score2 = 65}
                     }



Hint: To display the cumulative graph, use stacking-mode = ChartStackingMode.stacked with BarLayer.

Solution

Solution Program: c:\Curl\Try4\04_exercise1\start.curl

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField score1, domain = int},
                {RecordField score2, domain = int}
            },
            {RecordData name = Matt, score1 = 30, score2 = 45},
            {RecordData name = Sarah, score1 = 55, score2 = 40},
            {RecordData name = Jacob, score1 = 20, score2 = 65}
        }
    
    let chart:LayeredChart = {LayeredChart
                                 height = 5cm,
                                 width = 10cm,
                                 {BarLayer
                                     stacking-mode = ChartStackingMode.stacked,
                                     x-axis-data = {ChartDataSeries data, name},
                                     {ChartDataSeries data, score1},
                                     {ChartDataSeries data, score2}
                                 }
                             }
    chart
}

Practice Problem 2: Basics

Display the data used with Practice Problem 1 as a bar graph. In this problem, reverse the directions of the x- and y-axes and then display the graph.


Hint: To change the orientation of the graph, use flipped? = true with LayeredChart.

Solution

Solution Program: c:\Curl\Try4\05_exercise2\start.curl

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField score1, domain = int},
                {RecordField score2, domain = int}
            },
            {RecordData name = Matt, score1 = 30, score2 = 45},
            {RecordData name = Sarah, score1 = 55, score2 = 40},
            {RecordData name = Jacob, score1 = 20, score2 = 65}`
        }
    
    let chart:LayeredChart = {LayeredChart
                                 height = 5cm,
                                 width = 10cm,
                                 flipped? = true,
                                 {BarLayer
                                     x-axis-data = {ChartDataSeries data, name},
                                     {ChartDataSeries data, score1},
                                     {ChartDataSeries data, score2}
                                 }
                             }
    chart
}

Practice Problem 3: Basics

Using the same data as that used in Practice Problem 1, display the score1 data as a bar graph, and the score2 data as a line graph, as shown in the figure below:


Hint: LayeredChart can have multiple ChartLayers.

Solution

Solution Program: c:\Curl\Try4\06_exercise3\start.curl

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField score1, domain = int},
                {RecordField score2, domain = int}
            },
            {RecordData name = Matt, score1 = 30, score2 = 45},
            {RecordData name = Sarah, score1 = 55, score2 = 40},
            {RecordData name = Jacob, score1 = 20, score2 = 65}
        }
    
    let chart:LayeredChart = {LayeredChart
                                 height = 5cm,
                                 width = 10cm,
                                 {BarLayer
                                     x-axis-data = {ChartDataSeries data, name},
                                     {ChartDataSeries data, score2}
                                 },
                                 {LineLayer
                                     {ChartDataSeries data, score1}
                                 }
                             }
    
    chart
}
]]> <![CDATA[Page 7: Summary]]> https://communities.curl.com/showthread.php?tid=69 Mon, 20 Jun 2011 04:09:40 +0000 https://communities.curl.com/showthread.php?tid=69 TRY 4 Summary

Two types of graphs: LayeredChart & PieChart


LayeredChart

Used to create a graph on which data is plotted in two dimensions, with an x- and y-axis


Code:
{LayeredChart
    { Specification of each layer
        x-axis-data =
            {ChartDataSeries data RecordSet, RecordField used for X-axis label}
        {ChartDataSeries data RecordSet, RecordField that is plotted}
        ||  Specify ChartDataSeries only for the RecordField value to be graphed
    }
}


PieChart

Code:
{PieChart
    {PieSet
        label-data =
            {ChartDataSeries data RecordSet, RecordField used as label},
        {ChartDataSeries data RecordSet, RecordField that is plotted}
        ||  Specify ChartDataSeries only for the RecordField value to be graphed
    }
}

  • The graph axes can be set flexibly using top-axis, bottom-axis, left-axis, and right-axis.
  • Any changes to the RecordSet data are automatically reflected on the graph.
  • Declaring Curl array variables

Declaring array variables

Code:
let array-variable-name:{Array-of element-type-name} =
          {{Array-of element-type-name} element 1, element 2, …}
]]> TRY 4 Summary

Two types of graphs: LayeredChart & PieChart


LayeredChart

Used to create a graph on which data is plotted in two dimensions, with an x- and y-axis


Code:
{LayeredChart
    { Specification of each layer
        x-axis-data =
            {ChartDataSeries data RecordSet, RecordField used for X-axis label}
        {ChartDataSeries data RecordSet, RecordField that is plotted}
        ||  Specify ChartDataSeries only for the RecordField value to be graphed
    }
}


PieChart

Code:
{PieChart
    {PieSet
        label-data =
            {ChartDataSeries data RecordSet, RecordField used as label},
        {ChartDataSeries data RecordSet, RecordField that is plotted}
        ||  Specify ChartDataSeries only for the RecordField value to be graphed
    }
}

  • The graph axes can be set flexibly using top-axis, bottom-axis, left-axis, and right-axis.
  • Any changes to the RecordSet data are automatically reflected on the graph.
  • Declaring Curl array variables

Declaring array variables

Code:
let array-variable-name:{Array-of element-type-name} =
          {{Array-of element-type-name} element 1, element 2, …}
]]> <![CDATA[Page 6: Structure of a Program that Specifies the Graph Colors]]> https://communities.curl.com/showthread.php?tid=68 Mon, 20 Jun 2011 04:08:16 +0000 https://communities.curl.com/showthread.php?tid=68 Structure of the program that specifies the graph colors



Graph colors are specified with an array. First, therefore, we should explain an array.

An array consists of a group of elements that are arranged into an order. Each element has a corresponding index, beginning from 0. Array-of is one kind of array; the data type of the elements in the array is specified when the array is declared. As the data type, we can specify primitive types such as int and char, as well as class types such as String.


In Curl, we can create an array by coding the following.


Creating an Array

Code:
{{Array-of element_type} element_1, element_2, element_3, …}


For example, we would code a character string array with three elements as follows:

Code:
{{Array-of String} “ character string 1”, “character string 2”, “character string 3”}

To declare array variables, we code the following:

Code:
let array_variable_name:{Array-of element type} =
    {{Array-of data type} element_1, element_2, element_3, …}

For example, the following declaration specifies a variable called “array” which is bound to an array having three character string elements:

Code:
let array:{Array-of String} =
    {{Array-of String} “ character string 1”, “character string 2”, “character string 3”}

When we create an array in Curl, we specify the element type. There is no need to specify the size of the array in advance. The number of elements can change later.

Also, using array_name[index] syntax, we can access elements from the array. For example, to access “character string 2” whose index is 1, we specify array[1].



1. Array variable declaration

Code:
let color-array:{Array-of FillPattern} =
    {{Array-of FillPattern} orange, pink}

Graph colors are specified with a FillPattern array. FillPattern is used to specify how an object is colored. Monochrome shades can also be specified using a string.

2. Specifying the graph color

Code:
color-palette = color-array,

We can use the color-palette option of LayeredChart to specify the color of a graph. Here, we specify the array that we created in (1).]]> Structure of the program that specifies the graph colors



Graph colors are specified with an array. First, therefore, we should explain an array.

An array consists of a group of elements that are arranged into an order. Each element has a corresponding index, beginning from 0. Array-of is one kind of array; the data type of the elements in the array is specified when the array is declared. As the data type, we can specify primitive types such as int and char, as well as class types such as String.


In Curl, we can create an array by coding the following.


Creating an Array

Code:
{{Array-of element_type} element_1, element_2, element_3, …}


For example, we would code a character string array with three elements as follows:

Code:
{{Array-of String} “ character string 1”, “character string 2”, “character string 3”}

To declare array variables, we code the following:

Code:
let array_variable_name:{Array-of element type} =
    {{Array-of data type} element_1, element_2, element_3, …}

For example, the following declaration specifies a variable called “array” which is bound to an array having three character string elements:

Code:
let array:{Array-of String} =
    {{Array-of String} “ character string 1”, “character string 2”, “character string 3”}

When we create an array in Curl, we specify the element type. There is no need to specify the size of the array in advance. The number of elements can change later.

Also, using array_name[index] syntax, we can access elements from the array. For example, to access “character string 2” whose index is 1, we specify array[1].



1. Array variable declaration

Code:
let color-array:{Array-of FillPattern} =
    {{Array-of FillPattern} orange, pink}

Graph colors are specified with a FillPattern array. FillPattern is used to specify how an object is colored. Monochrome shades can also be specified using a string.

2. Specifying the graph color

Code:
color-palette = color-array,

We can use the color-palette option of LayeredChart to specify the color of a graph. Here, we specify the array that we created in (1).]]> <![CDATA[Page 5: Application 2: Specifying the Graph Colors]]> https://communities.curl.com/showthread.php?tid=67 Mon, 20 Jun 2011 04:07:08 +0000 https://communities.curl.com/showthread.php?tid=67 Application 2: Specifying the graph colors

The graphs that we have looked at so far have all used preset colors. We can, however, use options to change the graph color.

Create the 'Try 4-3' Project

Close the Try 4-2 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try4-3” (2), specify c:\Curl\lesson\Try4\03_graph_color in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try4\03_graph_color\start.curl and then paste it into the editor in the IDE.

Code:
{curl 6.0 applet}
{curl-file-attributes character-encoding = utf8}
{applet manifest = manifest.mcurl,
    {compiler-directives careful? = true}
}
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField age, domain = int},
                {RecordField score, domain = int}
            },
            {RecordData name = Matt, age = 33, score = 88},
            {RecordData name = Sarah, age = 27, score = 79},
            {RecordData name = Jacob, age = 26, score = 90}
        }
    
    let color-array:{Array-of FillPattern} =
        {{Array-of FillPattern} orange, pink}
    
    let chart:LayeredChart =
        {LayeredChart
            height = 5cm,
            width = 10cm,
            color-palette = color-array,
            {BarLayer
                x-axis-data = {ChartDataSeries data, name},
                {ChartDataSeries data, age},
                {ChartDataSeries data, score}
            }
        }
    chart
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.


The samples that we have looked at so far have all used preset colors for the graphs. Here, we have set whatever color we like for our graph display.]]> Application 2: Specifying the graph colors

The graphs that we have looked at so far have all used preset colors. We can, however, use options to change the graph color.

Create the 'Try 4-3' Project

Close the Try 4-2 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try4-3” (2), specify c:\Curl\lesson\Try4\03_graph_color in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try4\03_graph_color\start.curl and then paste it into the editor in the IDE.

Code:
{curl 6.0 applet}
{curl-file-attributes character-encoding = utf8}
{applet manifest = manifest.mcurl,
    {compiler-directives careful? = true}
}
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField age, domain = int},
                {RecordField score, domain = int}
            },
            {RecordData name = Matt, age = 33, score = 88},
            {RecordData name = Sarah, age = 27, score = 79},
            {RecordData name = Jacob, age = 26, score = 90}
        }
    
    let color-array:{Array-of FillPattern} =
        {{Array-of FillPattern} orange, pink}
    
    let chart:LayeredChart =
        {LayeredChart
            height = 5cm,
            width = 10cm,
            color-palette = color-array,
            {BarLayer
                x-axis-data = {ChartDataSeries data, name},
                {ChartDataSeries data, age},
                {ChartDataSeries data, score}
            }
        }
    chart
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.


The samples that we have looked at so far have all used preset colors for the graphs. Here, we have set whatever color we like for our graph display.]]> <![CDATA[Page 4: Structure of a Program that Specifies the Graph Axes]]> https://communities.curl.com/showthread.php?tid=66 Mon, 20 Jun 2011 04:06:04 +0000 https://communities.curl.com/showthread.php?tid=66 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.]]> 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.]]> <![CDATA[Page 3: Application 1: Specifying the Graph Axes]]> https://communities.curl.com/showthread.php?tid=65 Mon, 20 Jun 2011 04:05:02 +0000 https://communities.curl.com/showthread.php?tid=65 Application 1: Specifying the graph axes

Next, we’ll specify the gradations and positions of the graph axes.

Create the 'Try 4-2' Project

Close the Try 4 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try4-2” (2), specify c:\Curl\lesson\Try4\02_set_axis in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try4\02_set_axis\start.curl and then paste it into the editor in the IDE.

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet = {RecordSet
                             {RecordFields
                                 {RecordField name, domain = String},
                                 {RecordField age, domain = int},
                                 {RecordField score, domain = int}
                             },
                             {RecordData name = Matt, age = 33, score = 88},
                             {RecordData name = Sarah, age = 27, score = 79},
                             {RecordData name = Jacob, age = 26, score = 90}
                         }
    
    let chart:LayeredChart = {LayeredChart
                                 height = 5cm,
                                 width = 10cm,
                                 top-axis = {ChartAxis {ChartDataSeries data, name}},
                                 left-axis = {ChartAxis {ChartDataSeries data, age}},
                                 right-axis = {{NumericDataSeriesAxis-of float}
                                                  force-zero? = false,
                                                  {ChartDataSeries data, score}
                                              },
                                 {LineLayer
                                     {ChartDataSeries data, score},
                                     {ChartDataSeries data, age}
                                 }
                             }
    {VBox
        {RecordGrid
            record-source = data,
            height = 3cm,
            width = 10cm
        },
        chart
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.
]]> Application 1: Specifying the graph axes

Next, we’ll specify the gradations and positions of the graph axes.

Create the 'Try 4-2' Project

Close the Try 4 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try4-2” (2), specify c:\Curl\lesson\Try4\02_set_axis in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try4\02_set_axis\start.curl and then paste it into the editor in the IDE.

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet = {RecordSet
                             {RecordFields
                                 {RecordField name, domain = String},
                                 {RecordField age, domain = int},
                                 {RecordField score, domain = int}
                             },
                             {RecordData name = Matt, age = 33, score = 88},
                             {RecordData name = Sarah, age = 27, score = 79},
                             {RecordData name = Jacob, age = 26, score = 90}
                         }
    
    let chart:LayeredChart = {LayeredChart
                                 height = 5cm,
                                 width = 10cm,
                                 top-axis = {ChartAxis {ChartDataSeries data, name}},
                                 left-axis = {ChartAxis {ChartDataSeries data, age}},
                                 right-axis = {{NumericDataSeriesAxis-of float}
                                                  force-zero? = false,
                                                  {ChartDataSeries data, score}
                                              },
                                 {LineLayer
                                     {ChartDataSeries data, score},
                                     {ChartDataSeries data, age}
                                 }
                             }
    {VBox
        {RecordGrid
            record-source = data,
            height = 3cm,
            width = 10cm
        },
        chart
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.
]]> <![CDATA[Page 2: Structure of a Program that Displays Data as a Graph]]> https://communities.curl.com/showthread.php?tid=64 Mon, 20 Jun 2011 04:03:47 +0000 https://communities.curl.com/showthread.php?tid=64 Structure of the Program that Displays Data as a Graph

In Try 3, we displayed the RecordSet data as a grid. In this chapter, we will concentrate on displaying RecordSet data using different types of charts.

So, let’s start by taking a look at the program’s source code.


1. Importing the 'CURL.GUI.CHARTS' package

Code:
{import * from CURL.GUI.CHARTS}

The API needed to create a graph can be found the CURL.GUI.CHARTS package. By using an import statement to import this package, we can then use the necessary functions provided by the package.


Packages

A package contains logically grouped code. We can import packages and use the definitions in those packages.


2. Converting data to a graph

Code:
let data:RecordSet =
    {RecordSet
        {RecordFields
            {RecordField name, domain = String},
            {RecordField age, domain = int},
            {RecordField score, domain = int}
        },
        {RecordData name = Matt, age = 33, score = 88},
        {RecordData name = Sarah, age = 27, score = 79},
        {RecordData name = Jacob, age = 26, score = 90}
    }

To create a graph, we use the RecordSet data. We’ll plot a graph for each RecordField value in the RecordSet.



3. Creating a 'LayeredChart'

Code:
let chart:LayeredChart =
    {LayeredChart
        ...
    }

In the same way as for a bar or line graph, a LayeredChart requires that, prior to plotting any data, we define a 2-dimensional area with an x- and y-axis. We will next add the layer to our LayeredChart and then plot our graph.

4. Specifying a Layer

Code:
{BarLayer
    ...
}

We specify a layer to define the data to be plotted, as well as the plotting method (bar graph, line graph, etc.). In this example, in which we create a bar graph, we specify a BarLayer. Figure 4-5 shows the available layer types.



5. Specifying a label for the X-axis

Code:
x-axis-data = {ChartDataSeries data, name}

The x-axis-data keyword argument controls the labeling of the x-axis. Using this argument, we can specify the field values used as captions on the -x-axis If we omit this argument, then an index starting from 0 is displayed on the x-axis. This x-axis information is specified using ChartDataSeries.


6. Specifying graph data

Code:
{ChartDataSeries data, score}

We also use ChartDataSeries to specify the data to be plotted on a graph. We specify the RecordSet containing the data, as well as the names of the fields we want to display on the graph. Although we can specify multiple ChartDataSeries, in this example, we specify only one.


LayeredChart and PieChart

Curl supports two main types of graphs. The first type plots data in two dimensions, using x- and y-axes, like the bar graph in the example in Try 4-1. This type of graph is created using LayeredChart. The second type is the pie graph. To create a pie graph, we use PieChart. For a pie graph, rather than specify each layer, we use PieSet to specify the data to be plotted. By specifying multiple instances of PieSet, we can create a graph consisting of concentric circles. And, by using label-data, we can also display labels.]]> Structure of the Program that Displays Data as a Graph

In Try 3, we displayed the RecordSet data as a grid. In this chapter, we will concentrate on displaying RecordSet data using different types of charts.

So, let’s start by taking a look at the program’s source code.


1. Importing the 'CURL.GUI.CHARTS' package

Code:
{import * from CURL.GUI.CHARTS}

The API needed to create a graph can be found the CURL.GUI.CHARTS package. By using an import statement to import this package, we can then use the necessary functions provided by the package.


Packages

A package contains logically grouped code. We can import packages and use the definitions in those packages.


2. Converting data to a graph

Code:
let data:RecordSet =
    {RecordSet
        {RecordFields
            {RecordField name, domain = String},
            {RecordField age, domain = int},
            {RecordField score, domain = int}
        },
        {RecordData name = Matt, age = 33, score = 88},
        {RecordData name = Sarah, age = 27, score = 79},
        {RecordData name = Jacob, age = 26, score = 90}
    }

To create a graph, we use the RecordSet data. We’ll plot a graph for each RecordField value in the RecordSet.



3. Creating a 'LayeredChart'

Code:
let chart:LayeredChart =
    {LayeredChart
        ...
    }

In the same way as for a bar or line graph, a LayeredChart requires that, prior to plotting any data, we define a 2-dimensional area with an x- and y-axis. We will next add the layer to our LayeredChart and then plot our graph.

4. Specifying a Layer

Code:
{BarLayer
    ...
}

We specify a layer to define the data to be plotted, as well as the plotting method (bar graph, line graph, etc.). In this example, in which we create a bar graph, we specify a BarLayer. Figure 4-5 shows the available layer types.



5. Specifying a label for the X-axis

Code:
x-axis-data = {ChartDataSeries data, name}

The x-axis-data keyword argument controls the labeling of the x-axis. Using this argument, we can specify the field values used as captions on the -x-axis If we omit this argument, then an index starting from 0 is displayed on the x-axis. This x-axis information is specified using ChartDataSeries.


6. Specifying graph data

Code:
{ChartDataSeries data, score}

We also use ChartDataSeries to specify the data to be plotted on a graph. We specify the RecordSet containing the data, as well as the names of the fields we want to display on the graph. Although we can specify multiple ChartDataSeries, in this example, we specify only one.


LayeredChart and PieChart

Curl supports two main types of graphs. The first type plots data in two dimensions, using x- and y-axes, like the bar graph in the example in Try 4-1. This type of graph is created using LayeredChart. The second type is the pie graph. To create a pie graph, we use PieChart. For a pie graph, rather than specify each layer, we use PieSet to specify the data to be plotted. By specifying multiple instances of PieSet, we can create a graph consisting of concentric circles. And, by using label-data, we can also display labels.]]> <![CDATA[Page 1: Displaying Data as a Graph]]> https://communities.curl.com/showthread.php?tid=63 Mon, 20 Jun 2011 02:59:16 +0000 https://communities.curl.com/showthread.php?tid=63 Try 4: Displaying Data as a Graph

In this chapter, we’ll display our game scores as a graph.

Please download the Try4.zip file by selecting the following link: Try4.zip.

Unzip the contents to the C:\Curl directory. This is the working directory for all the examples and exercises contained within this tutorial. Note: If C:\Curl has not already been created, you can create it now.

Basics: Displaying Data as a Graph

Create the 'Try 4-1' Project

Close the Try 3 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try4-1” (2), specify c:\Curl\lesson\Try4\01_bar_graph in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try4\01_bar_graph\start.curl and then paste it into the editor in the IDE.

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField age, domain = int},
                {RecordField score, domain = int}
            },
            {RecordData name = Matt, age = 33, score = 88},
            {RecordData name = Sarah, age = 27, score = 79},
            {RecordData name = Jacob, age = 26, score = 90}
        }
    let chart:LayeredChart =
        {LayeredChart
            height = 5cm,
            width = 10cm,
            {BarLayer
                x-axis-data = {ChartDataSeries data, name},
                {ChartDataSeries data, age}
            }
        }
    chart
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.

]]> Try 4: Displaying Data as a Graph

In this chapter, we’ll display our game scores as a graph.

Please download the Try4.zip file by selecting the following link: Try4.zip.

Unzip the contents to the C:\Curl directory. This is the working directory for all the examples and exercises contained within this tutorial. Note: If C:\Curl has not already been created, you can create it now.

Basics: Displaying Data as a Graph

Create the 'Try 4-1' Project

Close the Try 3 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try4-1” (2), specify c:\Curl\lesson\Try4\01_bar_graph in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try4\01_bar_graph\start.curl and then paste it into the editor in the IDE.

Code:
{import * from CURL.GUI.CHARTS}
{value
    let data:RecordSet =
        {RecordSet
            {RecordFields
                {RecordField name, domain = String},
                {RecordField age, domain = int},
                {RecordField score, domain = int}
            },
            {RecordData name = Matt, age = 33, score = 88},
            {RecordData name = Sarah, age = 27, score = 79},
            {RecordData name = Jacob, age = 26, score = 90}
        }
    let chart:LayeredChart =
        {LayeredChart
            height = 5cm,
            width = 10cm,
            {BarLayer
                x-axis-data = {ChartDataSeries data, name},
                {ChartDataSeries data, age}
            }
        }
    chart
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.

]]>