morris js 사용하기

그래프 챠트 라이브러리 중 괜찮은 라이브러리 발견

한번 써보기로 했다.

1. 다운로드

 1) morris js :  http://morrisjs.github.io/morris.js/

 2) raphael js :  http://raphaeljs.com/

 ※ raphael js 는 다운 받으면 새 페이지로 소스가 쭈욱 나온다.

   당황하지 말고 복사해서 파일을 하나 만들자.

2. CSS  - 스크립트 추가

<!-- Morris CSS -->

<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/morris.js-0.5.1/morris.css'/>" />

<!-- Morris CSS -->

<!-- Morris Library -->

<script type="text/javascript" src="<c:url value='/resources/morris.js-0.5.1/raphael-min.js'/>"></script>

<script type="text/javascript" src="<c:url value='/resources/morris.js-0.5.1/morris.min.js'/>"></script>

<!-- Morris Library -->

3. 예제 function 및 html 추가

<!-- JavaScript -->

<script type="text/javascript">

function drawMorrisChart() {

new Morris.Line({

 // ID of the element in which to draw the chart.

 element: 'morrisChart',

 // Chart data records -- each entry in this array corresponds to a point on

 // the chart.

 data: [

   { year: '2008', value: 20 },

   { year: '2009', value: 10 },

   { year: '2010', value: 5 },

   { year: '2011', value: 5 },

   { year: '2012', value: 20 }

 ],

 // The name of the data record attribute that contains x-values.

 xkey: 'year',

 // A list of names of data record attributes that contain y-values.

 ykeys: ['value'],

 // Labels for the ykeys -- will be displayed when you hover over the

 // chart.

 labels: ['Value']

});

}

</script>

<!-- JavaScript -->

<!-- html -->

<button type="button" class="btn btn-primary" id="btnChartDraw" onclick="drawMorrisChart()">차트그리기</button>

<div id="morrisChart" style="height: 250px; width: 500px;"></div>

<!-- html -->

4. 확인

잘 된다.

999. 예제 만들던 중 이슈해결

 

Graph container element not found

 -> 챠트나 그래프를 그릴 영역의 id와 자바스크립트의 id 가 같은지 확인해야함.