728x90
반응형
jQuery에 그래프 플러그인이 여러가지가 있는데 작년에 이거한번 써 보고 괜찮았던 기억에 올해도 사용 해 봤습니다.
참 간단하게 그래프 작업이 되는데요 한 5년전인가 관공서 프로젝트 하면서 HTML로 그래프 흉내냈던 기억이 있습니다.
그 때 다른 업체에서 작업한 다른 시스템에서 플래시 그래프 패키지로 작업한 그래프보고 기죽었던 기억이 있는데 그거 부럽지 않습니다.
(몇억짜리 프로젝트인데 그런 패키지 하나 안사주더군요. ㅎㅎㅎ)
이녀석은 .net 에서도 사용할 수 있는걸로 알고 있습니다.
다만 다른 jQuery 그래프 플러그인 중 모양이 더 깔끔하고 기능적으로도 풍부한게 있더군요.
시간 있을 때 찬찬히 찾아봐야겠습니다.
홈페이지는 아래와 같습니다.
샘플로 만든페이지 소스입니다.
정리안하고 테스트하면서 만든거라 허접하지만 참고정도는 될겁니다.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Flot Examples: AJAX</title> <style type="text/css"> .width1 {width: 130px; height: 40px; line-height: 40px; float: left; text-align: center; border: 0px red solid; font-family: 맑은 고딕; font-size: 12px; margin-left: 10px;} .width2 {width: 100px; height: 40px; line-height: 40px; float: left; text-align: right; border: 0px red solid; font-family: 맑은 고딕; font-size: 12px; font-weight: bold; letter-spacing: -1px;} .width2_price {height: 40px; line-height: 40px; text-align: right; font-family: 맑은 고딕; font-size: 18px; font-weight: bold; color: #2E64FE; letter-spacing: -1px;} .width2_2 {width: 30px; height: 40px; line-height: 20px; float: left; text-align: center; border: 0px red solid; font-family: 맑은 고딕; font-size: 12px; margin-left: 10px;} .tbl_row {clear: both; border-bottom: 1px #AFAFAF dotted;} .upa{color: orange} .downa{color: blue} .samea{color: silver} .grid1 {width: 88px; height: 30px; line-height: 30px; font-family: 맑은 고딕; font-size: 12px; text-align: center; float: left;} </style> <!--[if lte IE 8]><script type="text/javascript" src="flot/excanvas.min.js"> </script><![endif]--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"> </script> <!--script type="text/javascript" src="flot/jquery.js"> </script//--> <script type="text/javascript" src="flot/jquery.flot.js"> </script> <script type="text/javascript"> var data = []; var buy_pure = { label : '순금 살 때', data : [[1, 205000], [2, 206000], [3, 204000], [4, 204000], [5, 207000], [6, 207000], [7, 207000], [8, 208000]] }; var sale_pure = { label : '순금 팔 때', data : [[1, 185000], [2, 186500], [3, 184000], [4, 184000], [5, 187000], [6, 187000], [7, 187000], [8, 188000]] }; var buy_18k = { label : '18K 살 때', data : [[1, 169125], [2, 169950], [3, 168300], [4, 168300], [5, 170775], [6, 170775], [7, 170775], [8, 171600]] }; var sale_18k = { label : '18K 팔 때', data : [[1, 133200], [2, 134300], [3, 132500], [4, 132500], [5, 134700], [6, 134700], [7, 134700], [8, 135400]] }; var buy_14k = { label : '14K 살 때', data : [[1, 132266], [2, 132911], [3, 131620], [4, 131620], [5, 133556], [6, 133556], [7, 133556], [8, 134201]] }; var sale_14k = { label : '14K 팔 때', data : [[1, 102700], [2, 103600], [3, 102200], [4, 102200], [5, 103800], [6, 103800], [7, 103800], [8, 104400]] }; var buy_white = { label : '백금 살 때', data : [[1, 230000], [2, 234500], [3, 229500], [4, 227000], [5, 230000], [6, 230000], [7, 230000], [8, 230000]] }; var sale_white = { label : '백금 팔 때', data : [[1, 176000], [2, 176000], [3, 176000], [4, 173000], [5, 176000], [6, 176000], [7, 176000], [8, 176000]] }; var buy_silver = { label : '은 살 때', data : [[1, 3300], [2, 3340], [3, 3280], [4, 3300], [5, 3380], [6, 3380], [7, 3380], [8, 3430]] }; var sale_silver = { label : '은 팔 때', data : [[1, 2830], [2, 2850], [3, 2810], [4, 2820], [5, 2900], [6, 2900], [7, 2900], [8, 2930]] }; var options1 = { lines: {show: true}, points: {show: true}, bars: {show: true}, legend: {show: true}, xaxis: {ticks: [[1, '2013-06-12'], [2, '2013-06-11'], [3, '2013-06-10'], [4, '2013-06-08'], [5, '2013-06-07'], [6, '2013-06-06'], [7, '2013-06-05'], [8, '2013-06-04']]} }; var options = { legend: {show: true}, xaxis: {ticks: [[1, '2013-06-12'], [2, '2013-06-11'], [3, '2013-06-10'], [4, '2013-06-08'], [5, '2013-06-07'], [6, '2013-06-06'], [7, '2013-06-05'], [8, '2013-06-04']]} }; $("document").ready(function() { setOnOff(); }); function setOnOff() { data = []; if ($("#onoff_buy_gold").is(":checked")) data.push(buy_pure); if ($("#onoff_buy_18k").is(":checked")) data.push(buy_18k); if ($("#onoff_buy_14k").is(":checked")) data.push(buy_14k); if ($("#onoff_buy_white").is(":checked")) data.push(buy_white); if ($("#onoff_buy_silver").is(":checked")) data.push(buy_silver); if ($("#onoff_sale_gold").is(":checked")) data.push(sale_pure); if ($("#onoff_sale_18k").is(":checked")) data.push(sale_18k); if ($("#onoff_sale_14k").is(":checked")) data.push(sale_14k); if ($("#onoff_sale_white").is(":checked")) data.push(sale_white); if ($("#onoff_sale_silver").is(":checked")) data.push(sale_silver); if (data.length == 0) { $("#onoff_buy_gold").attr("checked", true); data.push(buy_pure); } setGraphType(); $.plot("#goldpricetotal", data, options); } function setGraphType() { var temp = {xaxis: {ticks: [[1, '2013-06-12'], [2, '2013-06-11'], [3, '2013-06-10'], [4, '2013-06-08'], [5, '2013-06-07'], [6, '2013-06-06'], [7, '2013-06-05'], [8, '2013-06-04']]}} var optiontrue = {}; var optionfalse = {}; optiontrue["show"] = true; optionfalse["show"] = false; options = temp; $("#onoff_point").is(":checked") ? options["points"] = optiontrue : options["points"] = optionfalse; $("#onoff_line").is(":checked") ? options["lines"] = optiontrue : options["lines"] = optionfalse; $("#onoff_bar").is(":checked") ? options["bars"] = optiontrue : options["bars"] = optionfalse; $("#onoff_index").is(":checked") ? options["legend"] = optiontrue : options["legend"] = optionfalse; } </script> </head> <body> <div style="clear: both;"> <div id="goldpricetotal" style="width: 600px; height: 400px; margin: 10px; font-family: 맑은 고딕; font-size: 12px; border: 1px #AFAFAF solid; float: left;"> </div> <div id="goldpricetotal_index" style="width: 140px; height: 400px; margin: 10px; font-family: 맑은 고딕; font-size: 12px; border: 1px #AFAFAF solid; float: left;"> <input type="checkbox" id="onoff_buy_gold" onClick="setOnOff()" checked="chcked" /> 순금 살 때<br /> <input type="checkbox" id="onoff_buy_18k" onClick="setOnOff()" /> 18K 살 때<br /> <input type="checkbox" id="onoff_buy_14k" onClick="setOnOff()" /> 14K 살 때<br /> <input type="checkbox" id="onoff_buy_white" onClick="setOnOff()" /> 백금 살 때<br /> <input type="checkbox" id="onoff_buy_silver" onClick="setOnOff()" /> 은 살 때<br /> <input type="checkbox" id="onoff_sale_gold" onClick="setOnOff()" checked="checked" /> 순금 팔 때<br /> <input type="checkbox" id="onoff_sale_18k" onClick="setOnOff()" /> 18K 팔 때<br /> <input type="checkbox" id="onoff_sale_14k" onClick="setOnOff()" /> 14K 팔 때<br /> <input type="checkbox" id="onoff_sale_white" onClick="setOnOff()" /> 백금 팔 때<br /> <input type="checkbox" id="onoff_sale_silver" onClick="setOnOff()" /> 은 팔 때<br /> <hr /> <input type="checkbox" id="onoff_point" onClick="setOnOff()" checked="checked" /> 포인트<br /> <input type="checkbox" id="onoff_line" onClick="setOnOff()" checked="checked" /> 라인<br /> <input type="checkbox" id="onoff_bar" onClick="setOnOff()" /> 바<br /> <input type="checkbox" id="onoff_index" onClick="setOnOff()" checked="checked" /> 인덱스<br /> </div> </div> </body> </html> |
728x90
반응형
'JQUERY > 플러그인' 카테고리의 다른 글
| bpopup 팝업 플러그인 예제 (0) | 2015.08.06 |
|---|---|
| Layer Popup 레이어팝업 bPopup (0) | 2015.08.06 |
| jQuery: 참 편리한 날짜선택 위젯- datepicker (0) | 2015.07.28 |
| datepicker 특정요일 색 및 선택금지 시키기 (0) | 2015.07.28 |
| [Jquery]datepicker UI를 통한 달력생성 (0) | 2015.07.28 |
| jQuery plug-in 개발 참고 (0) | 2015.05.29 |
| input 창 클릭시 클씨사라짐 (0) | 2014.09.03 |
| FLOTCHART (0) | 2014.08.13 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!