jQuery jgCharts 차트 플러그인

jgCharts는 독립된 플러그인이 아닙니다
실제로 그가 포장한 것은 Google Charts입니다. Google Charts의 호출을 더욱 간편하고 'jquery' 하게 합니다.

<script type="text/javascript">
$(function(){
    var api = new jGCharts.Api(); 
    jQuery('<img>').attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");
    });
</script>
<div id="bar1"></div> 

결과 표시
api.make 옵션
 
데이터: [153, 60, 52], [113, 70, 60], [120, 80, 40]- 2차원 그룹
size : '400x400'//default 300x200 (width x height) - maximum size 300,000 pixels
type:'bhg'//default bvg-절선도lc-점선도lxy-Sparkline 그림ls-중첩형 수평 스트라이프 그림bhs-중첩형 수직 스트라이프 그림bvs-수평 스트라이프 그림bhg-수직 스트라이프 그림bvg-떡그림p-3차원 떡그림p3-비엔도 v-산점도s-레이더 그림r-지도t-계기gom
xis_labels : ['2008','2007','2006'],//default 0,1,2 etc...- 가로축 문자
legend: ['serie1','serie2','serie3']//default none - 그림
bar_width:10,//default 20줄 너비
bar_spacing: 10//default 1 스트라이프 간격
colors : ['4b9b41','81419b','41599b']
bg   : 'e0e0e0'//default false  - bg_trasparency : 50 - default false - also chbg_trasparency 배경 투명도 - bgoffset:'000000', 그래디언트 끝 - bgangle:'45',//default 90 그라데이션 각도 - bgtype:'gradient'//default solid 그라데이션 방식 - bgwidth:'10'//default 10 -min 10 그라데이션 스텝
chbg:'FFFFF',//default false 차트 영역 색상 - chbgoffset:'4b9b41', 그래프 영역 점차적 끝색 - chbgangle:'45',//default 90 그라데이션 각도 - chbgtype:'gradient'//default solid 그라데이션 방식
title:'Bar Chart',//default false 차트 제목 - titlecolor : 'a98147',  - title_size  : 20//default 10
grid:true,//default false 격자-gridx:5,//default 10 X축 메쉬 너비 - gridy:5,//default 10 Y 축 메쉬 너비 - gridline: 5,//default 10 메쉬 선 너비 - gridblank: 0//default 0 네트워크 흰색 블록 너비
fillarea:true//default false 차트 영역 채우기
fillbottom:true//default false 하단 채우기
filltop:true//default false 상단 채우기
lines: [[[4,2,2], [6,3]점선도, [선폭, 점폭, 공백폭]
예제

<script type="text/javascript"> 
$(function(){ 
    var api = new jGCharts.Api();  
    jQuery('<img>').attr('src', api.make({
       data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
       axis_labels : ['2008','2007','2006'], //X     
       legend : ['serie1', 'serie2', 'serie3'] //        
    })).appendTo("#bar1"); 
}); 
</script> 
<div id="bar1"></div> 

 
 
 

<script type="text/javascript"> 
$(function(){ 
    var api = new jGCharts.Api();  
    jQuery('<img>').attr('src', api.make({
      data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],  
      type : 'p3',
      size : '400x200' 
})).appendTo("#bar1"); 
    }); 
</script> 
<div id="bar1"></div> 

 
 
 
jgCharts 링크http://www.maxb.net/scripts/jgcharts/include/demo