// 막대 그래프 https://bitbucket.org/cleonello/jqplot/downloads/

  



$(document).ready(function () {
        var ChaData = [['첫번째', 0], ['두번째', 2], ['세번째', 8], ['네번째', 0]];
        //var data = [["26.6", "23", "25", "36.7", "30.4", "20.5", "20.2", "24.7", "19.1"]];
        $.jqplot('box_chart', [ChaData], {
            title: { /* 타이틀 관련 */
                show: false
                ,text: ''
            }
            ,legend: {
                show: false
                /*
                ,showLabels: true
                ,location: 'ne'
                ,labels: ChaData
                rendererOptions: {
                }
                */
            }
            ,grid: {
                background: '#ffffff'
                ,drawGridlines: true
                ,drawBorder: false
                ,shadow: false
                ,borderColor: '#999999'
                ,borderWidth: 1
            }
            ,series: [{
                renderer: $.jqplot.BarRenderer
                , pointLabels: { show: true }
                
                ,rendererOptions: {
                    animation: {
                        speed: 2500    //animation 설정 시 속도
                    }
                    
                    /* 그림자 */
                    ,shadow: false
                    //shadowDepth: 10, 그림자
                    /* 막대에 관한 라인 */
                    ,showLine: true
                    
                    /* 각각의 막대그래프 램던 색 여부 */
                    ,varyBarColor: true

                    
                    /* 막대 넓이 */
                    ,barWidth: 20      //bar width 설정
                    ,barPadding: -15  //bar padding
                    ,barMargin: 0      //bar간 간격
                }

            }],
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                    , label: ""       //X 좌표제목
                    , tickOptions: { fontSize: 13}        // X축 잘자 크기
                },
                yaxis: {
                    label: ""       //Y 좌표제목
                    //,pad :5
                    , padMax: 7
                    //,padMin   : 0
                    , max: 35
                    //, min: 0
                    ,tickOptions: { formatString: '%d' }        // 정수형으로 y축 tick 설정
                    
                }
            }
        });
});