My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다. AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.



kay
조회 수 2726 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

Javascript 를 통해 동적 그래프를 생성하는 샘플입니다.


Plugin Url : http://smoothiecharts.org/  ( Download : smoothie.js )

Test Url : http://www.uhoon.co.kr/test/3503.html


적절한 시점에 아래와 같이 실행해주면 됩니다.


random.append(new Date().getTime(), 수치값 );

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Smoothie Charts: A JavaScript Charting Library for Streaming Data</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/test/3503/smoothie.js"></script>
<script>
	var random = new TimeSeries();

	setInterval(function() {
		random.append(new Date().getTime(), Math.random() * 10000);
	}, 500);

	function createTimeline() {
		random.append(new Date().getTime(), 0);
		var chart = new SmoothieChart();
		chart.addTimeSeries(random, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
		chart.streamTo(document.getElementById("chart"), 1000);
	}

	$(document).ready(function(){
		createTimeline();
	});
</script>
</head>
<body>
	<canvas id="chart" width="400" height="100"></canvas>
</body>
</html>



적용 가능한 옵션 입니다.

  /**
   * Initialises a new <code>SmoothieChart</code>.
   *
   * Options are optional, and should be of the form below. Just specify the values you
   * need and the rest will be given sensible defaults as shown:
   *
   * <pre>
   * {
   *   minValue: undefined,                      // specify to clamp the lower y-axis to a given value
   *   maxValue: undefined,                      // specify to clamp the upper y-axis to a given value
   *   maxValueScale: 1,                         // allows proportional padding to be added above the chart. for 10% padding, specify 1.1.
   *   yRangeFunction: undefined,                // function({min: , max: }) { return {min: , max: }; }
   *   scaleSmoothing: 0.125,                    // controls the rate at which y-value zoom animation occurs
   *   millisPerPixel: 20,                       // sets the speed at which the chart pans by
   *   enableDpiScaling: true,                   // support rendering at different DPI depending on the device
   *   yMinFormatter: function(min, precision) { // callback function that formats the min y value label
   *     return parseFloat(min).toFixed(precision);
   *   },
   *   yMaxFormatter: function(max, precision) { // callback function that formats the max y value label
   *     return parseFloat(max).toFixed(precision);
   *   },
   *   maxDataSetLength: 2,
   *   interpolation: 'bezier'                   // one of 'bezier', 'linear', or 'step'
   *   timestampFormatter: null,                 // optional function to format time stamps for bottom of chart
   *                                             // you may use SmoothieChart.timeFormatter, or your own: function(date) { return ''; }
   *   horizontalLines: [],                      // [ { value: 0, color: '#ffffff', lineWidth: 1 } ]
   *   grid:
   *   {
   *     fillStyle: '#000000',                   // the background colour of the chart
   *     lineWidth: 1,                           // the pixel width of grid lines
   *     strokeStyle: '#777777',                 // colour of grid lines
   *     millisPerLine: 1000,                    // distance between vertical grid lines
   *     sharpLines: false,                      // controls whether grid lines are 1px sharp, or softened
   *     verticalSections: 2,                    // number of vertical sections marked out by horizontal grid lines
   *     borderVisible: true                     // whether the grid lines trace the border of the chart or not
   *   },
   *   labels
   *   {
   *     disabled: false,                        // enables/disables labels showing the min/max values
   *     fillStyle: '#ffffff',                   // colour for text of labels,
   *     fontSize: 15,
   *     fontFamily: 'sans-serif',
   *     precision: 2
   *   }
   * }
   * </pre>
   *
   * @constructor
   */



샘플 화면입니다.

이미지 8.png





다중그래프가 필요한 경우 server-load.zip 참고.


이미지 9.png



?

List of Articles
번호 제목 글쓴이 날짜 조회 수
» Javascript 를 이용한 동적 그래프 생성 "Smoothie Charts" file kay 2014.08.20 2726
4 부트스트랩(bootstrap) - 프론트엔드 프레임웍 " 반응형 웹 쉽게 제작하기 " kay 2014.04.29 2387
3 CKEditor - WYSIWYG editor kay 2013.07.04 21000
2 브라우져에서 현재 위치(위경도) 읽어오기 - navigator.geolocation.getCurrentPosition() kay 2013.05.31 4193
1 카카오톡 + 카카오스토리 내보내기 연동 kay 2013.04.25 4228
Board Pagination Prev 1 Next
/ 1