2. Creating a Chart
2.1. License Registration
You have to register a license to create charts. The license file is located in the following folder under which the rMateChart package is installed.
● LicenseKey/rMateChartLicense.js
Registering the license is simple. You don’t have to do anything but add the license file name into the head section of your HTML file.
<html><Example 2: Registering the rMateChart License >
<head>
<script src="AC_OETags.js" language="javascript"></script>
<script src="rMateChart.js" language="javascript"></script>
<!— Register the license of rMate Chart -->
<script src="rMateChartLicense.js" language="javascript"></script>
<!-- Starting of User-defined settings -->
<script language="JavaScript" type="text/javascript">
2.2. Quick Learning from Ready-Made Samples
In this chapter, you can learn how to create Column 3D charts from the samples of rMateChart.
① Create a working folder in your PC or Server.
② Copy the following files to the working folder.
- Data File : Samples/dataXml/singleData.xml
- Layout File : Samples/LayoutXml/Column_3D_Layout.xml
- SWF File : Component/rMateChart.swf
- Javascript file : Samples/JS/AC_OETags.js, Samples/JS/rMateChart.js
- License file : Samples/ rMateChartLicense.js
※ You must include Javascript file and you don’t have to modify the script file.
※ In order to create charts, you must include the license file.
③ Edit the HTML file as shown below
<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;
// Set the name and path of a data filevar dataURL =encodeURIComponent("singleData.xml"); flashVars += "&dataURL="+dataURL;
</script><!— End of User-defined settings --></head>
<body onload="rMateChartInit()"> // Defines rMateChartInit() to synchronize<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 3: An HTML Document to Create a Simple Chart>
Now, when you open the HTML file with your web browser, you can see a Column 3D chart. The detailed description of making charts with rMateChart will be continued in Chapter 2.3. Creating Charts with User-Defined Data.
※ Note : To synchronize charts with scripts, rMateChartInit() function must be called first when the scripts are loaded.
All Samples in the rMateChart package use the onload function in body tag (ex, <body onload=”rMateChartInit()”>)
You may want to call your own javascript function when the onload event is fired. To call more than two javascript functions when the onload event is fired please refer to the following example.
<html> <head> // Adds the window.onload function into the head section... // Adds the functions to be called...<script type="text/javascript"> window.onload = function () { rMateChartInit(); ………………….}</script></head>...<html>
<Example 4: The rMateChartInit() Function for Synchronization>
2.3. Creating Charts with User-Defined Data
In this chapter, you can learn how to create Column 3D charts. The following steps show how to create a Column 3D chart with monthly profit data
1.Select a proper SWF file. You can refer to <Figure 2: The List of Chart Types> to select a proper component. In this example, rMateChart.swf is chosen.
2.Edit a data file. As shown below, you have to convert a normal table data to an XML formatted data.
※ Important: In the XML formatted data, a single row of the table data must be between <item> and </item>
<Example 5: Converting a Table Data to an XML Formatted Data>
rMateChart provides many sample files as XML formatted data. You can see those files in the folder, Samples/DataXml/singleData.xml.
3.Edit a layout file :
The layout file must be written as the XML format. As this example is to create a Column 3D chart, you can use Column_3D_layout.xml. Please refer to <Figure 2: The List of Chart Types>
<rMateChart borderStyle="solid" borderThickness="2" paddingLeft="5" paddingRight="5" cornerRadius="15">
<Options>
<Caption text="Annual Report"/>
<SubCaption text="2008"/>
</Options>
<Column3DChart showDataTips="true" width="100%" height="100%" >
<horizontalAxis>
<CategoryAxis categoryField="Month"/>
</horizontalAxis>
<series>
<Column3DSeries yField="Profit" displayName="Profit">
<showDataEffect>
<SeriesInterpolate/>
</showDataEffect>
</Column3DSeries>
</series>
</Column3DChart>
</rMateChart>
<?xml version="1.0" encoding="utf-8"?><Example 6: The Content of Column_3D_Layout.xml>
※ Note : Be sure to match the field name in the data file with the field in the layout file :
In the data file, you have already written <Month> and <Profit> as the field names in upper case. If you write <month> and <profit> in lower case in the layout file, the chart cannot be drawn correctly. Please refer to “5.The Layout” for further information about layouts.
4.Create an HTML file
Now, you need to create your web page to draw a coloum-3D chart. In this example, the basic HTML text is used. As shown below, add the SWF filename, data filename and layout filename to the HTML file.
<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 file
var layoutURL = encodeURIComponent("Column_3D_Layout.xml"); var flashVars = "layoutURL="+layoutURL;
// Set the name and path of a data file
var dataURL =encodeURIComponent("singleData.xml"); flashVars += "&dataURL="+dataURL;
<!— 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 7: An HTML File to Create a Column 3D Chart>
Now, if you open the HTML file with your web browser then you can see the Column 3D chart as below.
<Figure 3: A Column 3D Chart>
2.4. Converting to a Different Chart Type
In the previous example, you have created a Column 3D chart with the data based on monthly profits. In this chapter, you will learn how to convert a Column 3D chart to a Pie 2D chart.
Select a SWF file and a layout file corresponding to Pie 2D charts from <Figure 2: The List of Chart Types>. As the selected files are “rMateChart.swf” and “Pie_2D_Layout.xml”, copy these files to your working directory that you have created for the previous example. And open the HTML file you have created for the previous example and edit the path of the layout file.
Column_3D_Layout.xml ----à Pie_2D_Layout.xml
The following is the modified HTML document.
<html>
<head>
<script src="AC_OETags.js" language="javascript"></script>
<script src="rMateChart.js" language="javascript"></script>
<script src="rMateChartLicense.js" language="javascript"></script>
<!-- Start of User-defined settings -->
<script language="JavaScript" type="text/javascript">
// -------------------- Setting of flashVars ----------------------
// Set the name and path of a layout file
var layoutURL = encodeURIComponent("Pie_2D_Layout.xml"); var flashVars = "layoutURL="+layoutURL;
// Set the name and path of a data file
var dataURL =encodeURIComponent("singleData.xml"); flashVars += "&dataURL="+dataURL;
<!— 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 8: An HTML File to Create a Pie 2D Chart>
Now, if you open the HTML file with your web browser then you can see the Pie 2D chart as below.
<Figure 4: A Pie 2D Chart>
Click here for detail information & Demos
Click here for detail information & Demos
댓글 없음:
댓글 쓰기