Data Formats, (rMateChart, Adobe flex based charting component)

3. Data Formats


 You can use XML or Array as the data format in rMateChart. To use these formats as the rMateChart data formats, you have to follow several rules. These rules indicate how to convert a single dataset (single-series of a chart) or multiple datasets (multi-series of a chart) to an XML (or Array) format.


3.1. Using XML Data Format
When you write data in the XML format, the one thing you must follow is to start with <item> tag and to end with </item> tag. rMateChart draws by using the data in <item> tag. If there is no data in <item> tag   rMateChart draws nothing.


If you want to darw a single numerical data, the single dataset (single-series of a chart) is useful. You can refer to the previous chapter, “2.3. Creating Charts with User-Defined Data”.


The multiple datasets (multi-series of a chart) are useful if you want to draw multiple numerical data. We will create a monthly reporting chart with the data based on Revenues, Costs and Profits (= 3 datasets).

Month	Revenues	Costs	Profits
Jan.	10,000	5,000	5,000
Feb.	15,000	7,000	8,000
Mar.	12,000	6,000	6,000
Apr.	30,200	4,000	26,200
May.	28,000	10,000	18,000
Jun.	12,000	5,000	7,000
Jul.	22,000	10000	12,000
Aug.	13,000	6,000	7,000
Sep	22,000	10,000	12,000
Oct.	29,000	8,000	11,000
Nov.	18,000	7,500	10,500
Dec.	30,000	12,000	28,000

<XML Data Format>

<items>
<item>
<Month>Jan</Month>
<Revenue>10000</ Revenue >
<Cost>5000</Cost>
<Profit>5000</Profit>
</item>
<item>
<Month>Feb</Month>
<Revenue>15000</Revenue>
<Cost>7000</Cost>
<Profit>8000</Profit>
</item>
.
.
.
<item>
<Month>Dec</Month>
<Revenue>30000</Revenue>
<Cost>12000</Cost>
<Profit>18000</Profit>
</item>
</items>

※ Important: In the XML formatted data, a single row of the table data must be between <item> and </item>

<Example 9: Converting Multiple Datasets to an XML Format>

3.2. Using Array Data Format


 rMateChart supports the array format for developer’s convenience. In this chapter, we will explain how to use the array formatted data for rMateChart. As shown below, the array formatted data can be created within Javascript code. You can convert a single dataset to an array formatted data.

Month	Profit
Jan.	10,000
Feb.	15,000
Mar.	12,000
Apr.	30,200
May.	28,000
Jun.	12,000
Jul.	22,000
Aug.	13,000
Sep	22,000
Oct.	29,000
Nov.	18,000
Dec.	30,000

 var chartData = [{"Month":"Jan", "Profit":10000},

           {"Month":"Feb", "Profit":15000},

           {"Month":"Mar", "Profit":12000},

           {"Month":"Apr", "Profit":30200},

           {"Month":"May", "Profit":28000},

           {"Month":"Jun", "Profit":12000},

           {"Month":"Jul", "Profit":22000},

           {"Month":"Aug", "Profit":13000},

           {"Month":"Sep", "Profit":22000},

           {"Month":"Oct", "Profit":29000},

           {"Month":"Nov", "Profit":18000},

           {"Month":"Dec", "Profit":30000} ];

<Example 10: Converting a Table Data to an Array Formatted Data>

You can also convert multiple datasets to an Array formatted data. We will use the multiple datasets used in “3.1.Using XML Data Format”.

var chartData = [{"Month":"Jan", "Revenue":10000, “Cost”:5000, “Profit”:5000},             {"Month":"Feb", "Revenue":15000, “Cost”:7000, “Profit”:8000},             {"Month":"Mar", "Revenue":12000 , “Cost”:6000, “Profit”:6000},             {"Month":"Apr", "Revenue":30200, “Cost”:4000, “Profit”:26200},             {"Month":"May", "Revenue":28000, “Cost”:10000, “Profit”:18000},             {"Month":"Jun", "Revenue":12000, “Cost”:5000, “Profit”:7000},             {"Month":"Jul", "Revenue":22000, “Cost”:10000, “Profit”:12000},             {"Month":"Aug", "Revenue":13000, “Cost”:6000, “Profit”:7000},             {"Month":"Sep", "Revenue":22000, “Cost”:10000, “Profit”:12000},             {"Month":"Oct", "Revenue":29000, “Cost”:8000, “Profit”:21000},             {"Month":"Nov", "Revenue":18000, “Cost”:7500, “Profit”:10500},             {"Month":"Dec", "Revenue":30000, “Cost”:12000, “Profit”:18000} ];

<Example 11: An Array Formatted Data for a Multi-Series Data>

In the following example, you can see HTML document that contains a single Array data.

<html><head><script src="AC_OETags.js" language="javascript"></script><script src="rMateChart.js" language="javascript"></script><script src="rMateChartLicense.js" language="javascript"></script>  <!-- Starting of User-defined settings --><script language="JavaScript" type="text/javascript"> // -------------------- Setting of flashVars  ---------------------- // Set the name and path of a layout filevar layoutURL = encodeURIComponent("Column_3D_Layout.xml");       
var flashVars = "layoutURL="+layoutURL;  

1

// When use array formatted data, comment out the following 3 lines.
// Set the name and path of Data file
// var dataURL =encodeURIComponent("singleData.xml");          
// flashVars += "&dataURL="+dataURL;


//This function is called by rMateChart when the synchronization is completed between rMateChart and scripts

2

//To use array formatted data you must declare this function. rMateChart communicates with scripts through this function
var rMateOnLoadCallFunction = "rMateChartOnLoad";
flashVars += "&rMateOnLoadCallFunction="+rMateOnLoadCallFunction;

3

// This function is a predefined function to receive the array formatted data.
// Parameter : 1. The variable name of an array formatted data.

5

function rMateChartOnLoad()
{
             chart1.setData(chartData);
}

4

 
var chartData = [{"Month":"Jan", "Profit":10000},
                           {"Month":"Feb", "Profit":15000},
                          {"Month":"Mar", "Profit":12000},
                           {"Month":"Apr", "Profit":30200},
                           {"Month":"May", "Profit":28000},
                           {"Month":"Jun", "Profit":12000},
                           {"Month":"Jul", "Profit":22000},
                           {"Month":"Aug", "Profit":13000},
                           {"Month":"Sep", "Profit":22000},
                           {"Month":"Oct", "Profit":29000},
                           {"Month":"Nov", "Profit":18000},
                           {"Month":"Dec", "Profit":30000} ];

<!— End of User-defined settings -->
</script>
</head>

<body onload="rMateChartInit()">
<table>
             <tr>
             <td>
                           <script>
                           <!—
                   // Calls rMateChartCreate() to create charts.
                   // Parameter Description
                   // 1. ID (Defines a unique identifier)
                   // 2. URL of SWF file(Omits the extension name)
                   // 3. The variable name contains URL
                   // 4. The horizontal size of charts
                   // 5. The vertical size of charts
                   // 6. The background color of charts

                                        rMateChartCreate("chart1","rMateChart",flashVars, 500, 500, "#FFFFFF");
                           // -->
                           </script>
             </td>
</tr>
</table>

</body>
</html>

<Example 12: An HTML File for Using Array Formatted Data>

- The Descriptions of the above example -

No 1. Comments out or deletes 3 lines of codes. Those 3 lines of codes are to get the data from XML files.

No 2. In the flashVars variable, sets the function which is called after the synchronization between rMateChart and scripts is completed. 

flashVars += "&rMateOnLoadCallFunction="+rMateOnLoadCallFunction;

                                 unchangeable name         user-defined name

rMateChart calls the user-defined function after the synchronization is completed.

No 3. Implement the user-defined function.

In the above example, the user-defined function name is rMateChartOnLoad. rMateChartOnLoad() must be implemented as a Javascript function.

No 4. Creates an array formatted data. You can refer to “3.2.Using Array Data Format” for further information.

No 5. Transmits the array formatted data to a chart through the setData function that is predefined function to receive the array formatted data. This function accepts an array formatted data as a parameter. In the next chapter, we will look over the predefined functions which communicate with rMateChart.

Click here for detail information & Demos