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 */
샘플 화면입니다.
다중그래프가 필요한 경우 server-load.zip 참고.