<!-- rMateChartH5 에서 사용하는 스타일 -->
<link rel="stylesheet" type="text/css" href="../rMateChartH5/Assets/Css/rMateChartH5.css"/>

<!-- IE7, 8 에서 차트 생성하고자 하는 경우 -->
<!--[if IE]><script language="javascript" type="text/javascript" src="../rMateChartH5/JS/excanvas.js"></script><![endif]-->

<!-- rMateChartH5 라이센스 -->
<script language="javascript" type="text/javascript" src="../LicenseKey/rMateChartH5License.js"></script>

<!-- 실제적인 rMateChartH5 라이브러리 -->
<script language="javascript" type="text/javascript" src="../rMateChartH5/JS/rMateChartH5.js"></script>

해당 div의 display값이 none일 경우는 크기를 제대로 가져오지 못하여 올바르게 출력이 되지 않을 수 있습니다.

<div id="chartHolder" style="width:800px;height:450px;"><div>

// rMate 차트 생성 준비가 완료된 상태 시 호출할 함수를 지정합니다.
var chartVars = "rMateOnLoadCallFunction=chartReadyHandler";

// rMateChart 를 생성합니다.
// 파라메터 (순서대로)
// 1. 차트의 id ( 임의로 지정하십시오. )
// 2. 차트가 위치할 div 의 id (즉, 차트의 부모 div 의 id 입니다.)
// 3. 차트 생성 시 필요한 환경 변수들의 묶음인 chartVars
// 4. 차트의 가로 사이즈 (생략 가능, 생략 시 100%)
// 5. 차트의 세로 사이즈 (생략 가능, 생략 시 100%)
rMateChartH5.create("chart1", "chartHolder", chartVars, "100%", "100%");

// 차트의 속성인 rMateOnLoadCallFunction 으로 설정된 함수.
// rMate 차트 준비가 완료된 경우 이 함수가 호출됩니다.
// 이 함수를 통해 차트에 레이아웃과 데이터를 삽입합니다.
// 파라메터 : id - rMateChartH5.create() 사용 시 사용자가 지정한 id 입니다.
function chartReadyHandler(id){
    document.getElementById(id).setLayout(layoutStr);
    document.getElementById(id).setData(chartData);
}

// 스트링 형식으로 레이아웃 정의

var layoutStr = '<rMateChart  backgroundColor="#ffffff" borderStyle="none">'
	+'<Options>'
		+'<Caption text="Price Indices of Meats ($ Per Kilogram)"/>'
		+'<SubCaption text="World Bank Commodity Price Data in 2013" textAlign="center" />'
		+'<Legend useVisibleCheck="true"/>'
	+'</Options>'
	+'<NumberFormatter id="numFmt" precision="0"/>'
	+'<Line2DChart showDataTips="true" dataTipDisplayMode="axis" paddingTop="0">'
		+'<horizontalAxis>'
			+'<CategoryAxis categoryField="Month" padding="0.2"/>'
		+'</horizontalAxis>'
		+'<verticalAxis>'
			+'<LinearAxis maximum="100"/>'
		+'</verticalAxis>'
		+'<series>'
			+'<Line2DSeries yField="Sheep" radius="5" displayName="Sheep" itemRenderer="RectangleItemRenderer">'
				+'<showDataEffect>'
					+'<SeriesInterpolate/>'
				+'</showDataEffect>'
			+'</Line2DSeries>'
			+'<Line2DSeries yField="Beef" radius="5" displayName="Beef" itemRenderer="CircleItemRenderer">'
				+'<showDataEffect>'
					+'<SeriesInterpolate/>'
				+'</showDataEffect>'
			+'</Line2DSeries>'
			+'<Line2DSeries yField="Chicken" radius="6" displayName="Chicken" itemRenderer="TriangleItemRenderer">'
				+'<showDataEffect>'
					+'<SeriesInterpolate/>'
				+'</showDataEffect>'
			+'</Line2DSeries>'
		+'</series>'
	+'</Line2DChart>'
+'</rMateChart>';

// 차트 데이터

var chartData = [{"Month":"Jan", "Beef":38.5, "Chicken":20, "Sheep":50},
	{"Month":"Feb", "Beef":56.57, "Chicken":27.52, "Sheep":42},
	{"Month":"Mar", "Beef":58.57, "Chicken":23.65, "Sheep":40},
	{"Month":"Apr", "Beef":41.13, "Chicken":29.54, "Sheep":60},
	{"Month":"May", "Beef":40.58, "Chicken":24.21, "Sheep":50},
	{"Month":"Jun", "Beef":60.79, "Chicken":39.12, "Sheep":52.5},
	{"Month":"Jul", "Beef":49.14, "Chicken":32.56, "Sheep":70.64},
	{"Month":"Aug", "Beef":89.35, "Chicken":39.24, "Sheep":68.57},
	{"Month":"Sep", "Beef":65.21, "Chicken":32.12, "Sheep":54.14},
	{"Month":"Oct", "Beef":75.15, "Chicken":42.12, "Sheep":57.58},
	{"Month":"Nov", "Beef":69.12, "Chicken":35.54, "Sheep":54.47},
	{"Month":"Dec", "Beef":73.24, "Chicken":40.45, "Sheep":62.47}];

이후 HTML 실행 시 DOM이 완료되고 차트의 준비가 완료된 경우 chartReadyHandler함수가 실행이 되며
설정해두었던 layoutStr, chartData가 차트 객체에 삽입되며 아래와 같은 차트를 생성하게 됩니다.