Generating the XML data

Defining the visual attributes is straightforward. Simply use the attribute='value' format for each attribute; for example, color='8BBA00'. Defining the data, however, requires programming to iterate through a data set and retrieve values from each row of data.

The following examples include code snippets, which show how to accomplish this task using JavaScript. For complete programming examples using JavaScript and Java, review the tutorials later in this chapter.

Doughnut chart example

In the doughnut chart example shown in Figure 18-8, data is defined using the <set> tag and the following format:

<set label='Services' value='2500000'/>

The code you write must get values from two columns, one that stores business division values, and another that stores revenue values. Assume that the data set providing the data values returns rows as shown in Figure 18-10.

Figure 18-10

Data rows returned by data set in doughnut chart example

The JavaScript code for getting the division and revenue values from a data set row and creating a single <set> line would look like the following:

var setData = "<set ";

setData = setData + "label='" + this.getRowData().getColumnValue("Division") + "'";

setData = setData + "value='" + this.getRowData().getColumnValue("Revenue") + "'/>";

To generate all the <set> lines, add code, such as the following:

xmlData = xmlData + setData;

Multi-series chart example

In the multi-series chart example shown in Figure 18-9, category data is defined within the <categories> tag using the <category> tag in the following format:

<category label='2005' />

Value series data is defined within the <dataset> tag using the <set> tag in the following format:

<set value='38000' />

The code you write gets values from three columns in each data set row. Assume that the data set providing the data values returns rows as shown in Figure 18-11.

Figure 18-11

Data rows returned by data set in multi-series chart example

The JavaScript code for getting the column values from each data set row would look like the following:

var YearData = "<category label='" + this.getRowData().getColumnValue("Year")+ "'/>";

var ExpenseData = "<set value='" + this.getRowData().getColumnValue("Expenses") + "'/>";

var RevenueData = "<set value='" + this.getRowData().getColumnValue("Revenue") + "'/>";

To generate all the <category> and <set> lines, add code, such as the following:

dataPart1 = dataPart1 + YearData;

dataPart2 = dataPart2 + ExpenseData;

dataPart3 = dataPart3 + RevenueData;

Copyright Actuate Corporation 2012