Google API 막대 그래프

Open API/Google|2016. 11. 18. 11:59
반응형




Google API를 이용한 막대 그리기 샘플 코드입니다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>     
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>     
<title>월별 예약 통계 현황</title>    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>     
<script type="text/javascript">       
google.load('visualization', '1', {packages: ['corechart']});     
</script>     
<script type="text/javascript">       
function drawVisualization() {         
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', '2011년 ', '2012년 '],
['1월',  20,      30],
['2월',  25,      30],
['3월',  45,      40],
['4월',  42,      60],
['5월',  45,      70],
['6월',  67,      70],
['7월',  55,      60],
['8월',  44,      50],
['9월',  22,      50],
['10월',  34,      40],
['11월',  56,      20],
['12월',  123,      10]         
]);
var options = {
title : '월별 예약 통계 현황',
vAxis: {title: "명"},
hAxis: {title: "월"},
seriesType: "bars",
series: {5: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>  
</head>  
<body>     
<div id="chart_div" style="width: 900px; height: 500px;"></div>   
</body> 
</html>


저작자표시

댓글()

Google API 선 + 막대 그래프

Open API/Google|2016. 11. 18. 11:58
반응형



Google API 를 이용한 선 + 막대 그래프 그리기 샘플 코드입니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>2011년 예약일</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">    
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['날짜', '2011년', '2010년', '2009년'],
['1월 1주',  30,      40,         20],
['1월 2주',  40,      20,        30],
['1월 3주',  25,      30,        50],
['1월 4주',  50,      70,        80],
['2월 1주',  70,      70,         60],
['2월 2주',  200,      200,         150],
['2월 3주',  100,      120,         10],
['2월 4주',  25,      30,         50],
['3월 1주',  28,      50,         80],
['3월 2주',  83,      90,         80],
['3월 3주',  78,      80,         30],
['3월 4주',  120,      50,         80],
['4월 1주',  405,      350,         280],
['4월 2주',  203,      100,         120],
['4월 3주',  10,      50,         30],
['4월 4주',  11,      30,         50]
]);
 
var options = {
title : '2011년 ',
vAxis: {title: "인원"},
hAxis: {title: "날짜"},
seriesType: "bars",
series: {1: {type: "line"},2: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body> 
</html>


저작자표시

댓글()

Google API 선 그래프

Open API/Google|2016. 11. 18. 11:56
반응형



구글 API를 이용한 선 그래프 그리기 샘플 코드입니다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>      
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>      
<title>누적 예약 현황</title>     
<script type="text/javascript" src="https://www.google.com/jsapi"></script>    
<script type="text/javascript"> 
google.load("visualization", "1" 
, {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
['month', '2011', '2012'], 
['1월 1주',  10,      0], 
['1월 2주',  30,      0], 
['1월 3주',  50,      0], 
['1월 4주',  70,      50], 
['2월 1주',  90,      100], 
['2월 2주',  110,     150], 
['2월 3주',  130,     250], 
['2월 4주',  150,     500], 
['3월 1주',  170,     600], 
['3월 2주',  190,     680], 
['3월 3주',  210,     750], 
['3월 4주',  230,     900], 
['4월 1주',  250,     900], 
['4월 2주',  270,     900], 
['4월 3주',  290,     920], 
['4월 4주',  310,     920], 
['5월 1주',  330,     930], 
['5월 2주',  350,     950], 
['5월 3주',  370,     950], 
['5월 4주',  390,     970], 
['6월 1주',  410,     970], 
['6월 2주',  500,     990], 
['6월 3주',  530,     1000], 
['6월 4주',  600,     1200], 
['7월 1주',  700,     1250], 
['8월 2주',  750,     1300], 
['9월 3주',  850,     1350], 
['9월 4주',  1000,    1350] 
]); 
var options = { 
title: '2011년 통계' 
}; 
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
chart.draw(data, options); 
} 
</script> 
</head> 
<body> 
<div id="chart_div" style="width: 900px; height: 500px;"></div> 
</body>  
</html>


저작자표시

댓글()

jQuery 특정 객체가 화면에 보이는지 여부 확인

Open API/Jquery|2016. 11. 17. 11:32
반응형



종종 해당 객체가 보여지고있는지 여부에 따라 어떤 액션을 취해야할 경우가 있습니다.


아래와 같이 체크 합니다.


if($(selector).is(":visible"))
{
    alert("노출되고있음.");
}else{
    alert("숨겨져있음.");
}


저작자표시

댓글()

jQuery Formatnumber , 콤마처리

Open API/Jquery|2016. 11. 17. 11:31
반응형



gitgub Url :  https://github.com/customd/jquery-number



숫자형 처리를 위한 플러그인으로 주요 처리 포맷은 아래와 같습니다.


정수 형


$.number( 5020.2364 ); // Outputs 5,020  


소수점 둘째 자리 까지


 $.number( 5020.2364, 2 ); // Outputs: 5,020.24




상세 옵션에 대해서는 


https://github.com/customd/jquery-number


저작자표시

댓글()

jQuery Select Box Option 동적 추가 , 이동, 삭제 , 복사

Open API/Jquery|2016. 11. 17. 11:29
반응형




Select box 간 Option 값 이동, 삭제 , 추가 하는 샘플코드 입니다.


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



<!DOCTYPE html>
<html>
<head>
    <title>append option / remove option</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
    <table>
        <tr>
            <td>
                <select id="sel" name="sel" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                    <option value="5" >5</option>
                    <option value="6" >6</option>
                    <option value="7" >7</option>
                    <option value="8" >8</option>
                    <option value="9" >9</option>
                    <option value="10" >10</option>
                </select>
                 
 
                 
 
                <input type="button" value="Delete" id="btnRemoveLeft"/>
                <input type="button" value="Selected Value " id="getValue"/>
                <input type="button" value="All Value " id="getSelectedValue"/>
                 
 
                 
 
                <input type="text" id="addOption"  style="width:183px;"/>
                <input type="button" value="Add" id="btnAdd"/>
            </td>
            <td>
                <input type="button" value="Move=>" id="btnMoveRight"/>
 
                <input type="button" value="<=Move" id="btnMoveLeft"/>
 
                <input type="button" value="Copy=>" id="btnCopyLeft"/>
 
                <input type="button" value="<=Copy" id="btnCopyLeft2"/>
 
            </td>
            <td>
                <select id="sel2" name="sel2" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
                </select>
                 
 
                 
 
                <input type="button" value="Delete" id="btnRemoveRight"/>
                <input type="button" value="Selected Value " id="getValue2"/>
                <input type="button" value="All Value" id="getSelectedValue2"/>
                 
 
                 
 
                <input type="text" id="addOption2"  style="width:183px;"/>
                <input type="button" value="Add" id="btnAdd2"/>
            </td>
        </tr>
    </table>
</body>
 
    <script type="text/javascript">
    <!--
        $(function(){
            $("#btnRemoveLeft").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).remove();
                });
            });
 
            $("#btnRemoveRight").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).remove();
                });
            });
 
            $("#btnMoveRight").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).remove().appendTo('#sel2');
                });
            });
 
            $("#btnMoveLeft").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).remove().appendTo('#sel');
                });
            });
 
            $("#getValue").on("click",function(){
                var values = "";
                $('#sel option').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getValue2").on("click",function(){
                var values = "";
                $('#sel2 option').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getSelectedValue").on("click",function(){
                var values = "";
                $('#sel option:selected').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#getSelectedValue2").on("click",function(){
                var values = "";
                $('#sel2 option:selected').each( function() {
                    values= values + "/" + $(this).val();
                });
                alert(values);
            });
 
            $("#btnCopyLeft").on("click",function(){
                $('#sel option:selected').each( function() {
                    $(this).clone().appendTo('#sel2');
                });
            });
 
            $("#btnCopyLeft2").on("click",function(){
                $('#sel2 option:selected').each( function() {
                    $(this).clone().appendTo('#sel');
                });
            });
 
            $("#btnAdd").on("click",function(){
                if($('#sel').find("[value='"+$('#addOption').val().replace('"','\'')+"']").length == 0)
                {
                    $('#sel').append('<option value="'+$('#addOption').val().replace('"','\'')+'">'+$('#addOption').val()+"</option>");
                }else{
                    alert("있어요.");
                }
            });
 
            $("#btnAdd2").on("click",function(){
                if($('#sel2').find("[value='"+$('#addOption2').val().replace('"','\'')+"']").length == 0)
                {
                    $('#sel2').append('<option value="'+$('#addOption2').val().replace('"','\'')+'">'+$('#addOption2').val()+"</option>");
                }else{
                    alert("있어요.");
                }
            });
        });
 
        $(window).load(function(e){
 
        });
 
    //-->
    </script>
</html>
저작자표시

댓글()

jQuery FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출

Open API/Jquery|2016. 11. 17. 11:15
반응형



FadeIn , FadeOut 을 이용한 간단한 이미지 노출.

하나가 사라지며 하나가 보여지는 그런... 

워낙 플러그인들이 잘 나와있지만

간단한걸 굳이 서치해서 적용하기 귀찮아서 가볍게 쓰기위해 만들었습니다.


사용법 

: 이미지에 "main_img" class를 추가.


* html

<div class="main_img"></div>
<div class="main_img" style="display:none;"></div>
<div class="main_img" style="display:none;"></div>
 
<!-- 별도 버튼등이 있는 경우...안써도 됨. -->
<ul id="main_bar">
    <li>
        <a href="Javascript:fnMain_image(0);"><img id="main_bar1" src="/images/main/bar_on.jpg" ></a>
    </li>
    <li>
        <a href="Javascript:fnMain_image(1);"><img id="main_bar2" src="/images/main/bar_off.jpg" ></a>
    </li>
    <li>
        <a href="Javascript:fnMain_image(2);"><img id="main_bar3" src="/images/main/bar_off.jpg" ></a>
    </li>
</ul>


* JS

<script type="text/javascript">
<!--
    // 메인 롤링 s
    var main_img = 0;
 
    function fnMain_image(img_num)
    {
        if (img_num == 0 || img_num)
        {
            main_img = img_num;
        }else{
            main_img = parseInt(main_img) + 1;
 
            if( main_img > $(".main_img").length -1 )
            {
                main_img = 0;
            }
        }
 
        for (i=0;i < $(".main_img").length ; i++)
        {
            $(".main_img").eq(i).fadeOut('slow');
        //  $("#main_bar > li:eq("+i+") > a > img").attr("src","/images/main/bar_off.jpg");
        }
 
        $(".main_img").eq(main_img).fadeIn('slow');
        //$("#main_bar > li:eq("+main_img+")  > a > img").attr("src","/images/main/bar_on.jpg");
    }
 
    setInterval(function(){ fnMain_image(); }, 3000);
    // 메인 롤링 e
//-->
</script>


저작자표시

댓글()

jQuery woothemes FlexSlider - 슬라이더

Open API/Jquery|2016. 11. 17. 11:11
반응형



플러그인 형태로 쉽게 이용할 수 있는 슬라이더 입니다.



Plugin Url : http://source.woothemes.com/flexslider/


download : woothemes-FlexSlider-version-2.2.2-0-gce5441b.zip


License : MIT License




사용 샘플 코드 


Step 1.

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

Step 2.

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>



Step 3.

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>



Step 3.


옵션 : 상세 설명 https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade",              //String: Select your animation type, "fade" or "slide"
easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false,                 //{NEW} Boolean: Reverse the animation direction
animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode  
startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true,                //Boolean: Animate slider automatically
slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false,               //Boolean: Randomize slide order
  
// Usability features
pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
  
// Primary Controls
controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous",           //String: Set the text for the "previous" directionNav item
nextText: "Next",               //String: Set the text for the "next" directionNav item
  
// Secondary Navigation
keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false,               //Boolean: Create pause/play dynamic element
pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
playText: 'Play',               //String: Set the text for the "play" pausePlay item
  
// Special properties
controlsContainer: "",          //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "",             //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
  
// Carousel Options
itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
                                 
// Callback API
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}           //{NEW} Callback: function(slider) - Fires after a slide is removed


저작자표시

댓글()
이전 1 2 3 4 5 6 7 8 ··· 11 다음

티스토리툴바