zhxd2
/
tripal


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004
							<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>jQuery Google Charts 1.0 - Demo Site</title>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="author" content="Massimiliano Balestrieri" />
    <link rel="stylesheet" type="text/css" href="../../include/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../include/css/demo.css" />
    <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <!--script src="../../include/js/lib/ycodaslider-2.0.rc2/lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
    <script src="../../include/js/lib/ycodaslider-2.0.rc2/lib/jquery.history_remote.fixed.pack.js" type="text/javascript"></script>
    <script src="../../include/js/lib/ycodaslider-2.0.rc2/lib/chili/jquery.chili-2.2.js" type="text/javascript"></script>
    <script src="../../include/js/lib/ycodaslider-2.0.rc2/ycodaslider-2.0.pack.js" type="text/javascript"></script>
    <script src="../../include/js/lib/ycodaslider-2.0.rc2/plugins/code-ycodaslider-2.0.pack.js" type="text/javascript"></script-->
    <script src="../../include/js/lib/ycodaslider-3.0/ycodaslider-3.0.min.js" type="text/javascript"></script>
    
    
    <script src="../../lib/chili/jquery.chili-2.2.js" type="text/javascript"></script>
    
    <script src="../../lib/metadata/jquery.metadata.min.js" type="text/javascript"></script>
    <script src="../../lib/janalytics/janalytics.js" type="text/javascript"></script>
    <!--todo pack -->
    <script src="../../jgcharts.pack.js" type="text/javascript"></script>
    <script src="../../plugins/jgtable/jgtable.pack.js" type="text/javascript"></script>
    <script src="../../include/js/start-1.0.js" type="text/javascript"></script>
</head>    
<body>
<div id="icone_sinistra">
    <!-- home -->
    <a href="#" class="handle h-docs tracking {label : '/jgcharts/home'}"><img class="icone_sx" alt="docs" src="../../include/icons/home.png" /></a>
    <a href="#" class="handle h-docs text_icone_sx tracking {label : '/jgcharts/home'}">Home</a>
    <!-- table -->
    <a href="#" class="handle h-table tracking {label : '/jgcharts/table'}"><img class="icone_sx" alt="table" src="../../include/icons/frame.png" /></a>
    <a href="#" class="handle h-table text_icone_sx tracking {label : '/jgcharts/table'}">Table</a>
    <!-- gui -->
    <a href="../gui/" class="blank tracking {label : '/jgcharts/jggui'}"><img class="icone_sx" alt="gui" src="../../include/icons/important.png" /></a>
    <a href="../gui/" class="blank text_icone_sx tracking {label : '/jgcharts/jggui'}">Gui *ALPHA</a>
</div>
<div id="icone_destra">
    <!-- docs -->
    <a href="#" class="handle h-docs tracking {label : '/jgcharts/docs'}"><img class="icone_sx" alt="docs" src="../../include/icons/abc.png" /></a>
    <a href="#" class="handle h-docs text_icone_sx tracking {label : '/jgcharts/docs'}">Docs</a>
    <!-- code -->
    <a href="#" class="handle h-code tracking {label : '/jgcharts/code'}"><img class="icone_sx" alt="docs" src="../../include/icons/code.png" /></a>
    <a href="#" class="handle h-code text_icone_sx tracking {label : '/jgcharts/code'}">Code</a>
    <!-- download -->
    <a href="../../jgcharts-0.96.zip" class="tracking {label : '/jgcharts/download'}"><img class="icone_sx" alt="Download" src="../../include/icons/download.png" /></a>
    <a href="../../jgcharts-0.96.zip" class="text_icone_sx tracking {label : '/jgcharts/download'}">Download</a>
</div>

<div id="yslider-docs" class="ycodaslider">
    <div class="yslider-panelwrapper" title="jGCharts 1.0">
        <h3>jQuery Google Charts 1.0</h3>
        <p>
        Copyright (c) 2008 Massimiliano Balestrieri<br />
        Examples and docs at: http://maxb.net/blog/<br />
        Licensed GPL licenses:<br />
        http://www.gnu.org/licenses/gpl.html<br />
        </p>
        <blockquote>
        <p>
        
        </p>
        </blockquote>
        <p>
        </p>
        <h4>Basic usage:</h4>
        <div class="code javascript"><!--var api = new jGCharts.Api();
jQuery('<img>')
.attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}))
.appendTo("#bar1");--></div>
        <h4>Html:</h4>
        <div class="code html"><!--<div id="bar1"></div>--></div>
        <h4>Basic scripts (use packed version in production):</h4>
        <div class="code html"><!--<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="jgcharts.js" type="text/javascript"></script>--></div>
    </div>

    <!-- panel -->
    <div class="yslider-panelwrapper" title="Bar">
        
        <h4>Basic Bar</h4>
        <div class="code javascript"><!--//1 ) api
var api = new jGCharts.Api();        

//2) options
var opt = {
    data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]//mandatory 
};//set options 

//3) append Img (with jQuery)
jQuery('<img>')
.attr('src', api.make(opt))//options 
.appendTo("#bar1");--></div>
        
        <div id="bar1"></div>
        
    </div>

    
    <!-- bar options -->


    <div class="yslider-panelwrapper" title="Bar Options">
        
        <h4>Schema</h4>
        <div class="code javascript"><!--//1 ) api
var api = new jGCharts.Api();        
//2) options
var opt = {};//set options 
//3) append img
jQuery('<img>')
.attr('src', api.make(opt))//options 
.appendTo("#chart_container");
--></div>
        <h3>Options</h3>
        <h4>Chart Dimension</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
size : '400x400'//default 300x200 (width x height) - maximum size 300,000 pixels
}--></div>
        <div id="bar2"></div>
                
        <h4>Direction</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
type : 'bhg'//default bvg
}--></div>
        <div id="bar3"></div>
        
        <h4>Legend and axis labels</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
axis_labels : ['2008','2007','2006'], //default 0,1,2 etc...
legend : ['serie1', 'serie2', 'serie3'] //default none
}--></div>
        <div id="bar4"></div>
        
        <h4>Dimensions and spacing</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
bar_width : 10, //default 20
bar_spacing : 10 //default 1
}--></div>
        <div id="bar5"></div>
        
        <h4>Colors</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
colors : ['4b9b41','81419b','41599b']
}--></div>
        <div id="bar6"></div>
        
        <h4>Background - solid</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
bg   : 'e0e0e0'//default false
//bg_trasparency : 50 - default false - also chbg_trasparency
}--></div>
        <div id="bar7"></div>

        <h4>Background - gradient</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
bg        : 'FFFFFF',//default false
bg_offset : '000000',
bg_angle  : '45',//default 90   
bg_type   : 'gradient' //default solid
}--></div>
        <div id="bar8"></div>
        
        <h4>Background - stripes</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
bg        : 'FFFFFF',//default false
bg_offset : 'e0e0e0',
bg_angle  : '0',//default 90   
bg_type   : 'stripes', //default solid
bg_width  : '10'//default 10 - min 10
}--></div>
        <div id="bar9"></div>
        
        <h4>Chart Area Background (like bg)</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
chbg        : 'FFFFFF',//default false
chbg_offset : '4b9b41',
chbg_angle  : '45',//default 90   
chbg_type   : 'gradient' //default solid
}--></div>
        <div id="bar10"></div>
        
        
        <h4>Title</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
title       : 'Bar Chart', //default false
title_color : 'a98147',
title_size  : 20 //default 10
}--></div>
        <div id="bar11"></div>
        
        <h4>Grid</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
grid        : true, //default false
grid_x      : 5,    //default 10
grid_y      : 5,    //default 10
grid_line   : 5,   //default 10
grid_blank  : 0    //default 0
}--></div>
        <div id="bar12"></div>
        
    </div>
    
    <!-- stacked -->
    

    <div class="yslider-panelwrapper" title="Stacked Bar">
                    
        <h4>Horizontal Dataset Stacked</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
type : 'bhs'//default bvg
}--></div>
        <div id="stacked1"></div>
        
        <h4>Vertical Dataset Stacked</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
type : 'bvs'//default bvg
}--></div>
        <div id="stacked2"></div>

    </div>    


    <!-- line -->


    <div class="yslider-panelwrapper" title="Line">
        <div id="line1"></div>
        <h4>Js</h4>
        <div class="code javascript"><!--var api = new jGCharts.Api();
jQuery('<img>')
.attr('src', api.make({
data : [[105.7,97.9],[108.1,101.6],[110.7,102.9],[111.0,93.7],[110.0,89.8],[109.0,90.7],
[107.5,93.0],[106.1,94.5],[104.3,91.9],[102.0,93.9],[102.8,93.6],[103.8,92.6],
[102.9,94.0],[102.1,92.7],[100.6,96.0],[101.7,97.9],[101.8,105.0],
[103.3,104.1],[104.0,105.1],[103.7,108.1],[108.4,108.4],[109.4,113.8],
[112.0,109.1],[112.6,106.3],[115.5,106.7],[115.7,108.8],[114.7,118.8],
[115.9,120.4],[116.2,115.9],[118.0,124.7],[123.3,126.5],[127.6,131.6],
[130.3,134.0],[135.5,135.7],[138.2,126.4],[139.6,127.4],[145.1,131.0],
[146.4,129.9],[147.1,133.7],[149.0,138.4],[150.3,141.0],[151.3,139.3],
[153.4,145.3],[152.7,142.9],[152.9,129.2],[152.2,126.0],[151.9,124.8],
[150.1,125.9],[148.2,118.9],[145.3,122.9],[142.9,127.7],[142.6,134.4],
[144.0,138.5],[145.5,138.7],[147.2,141.8],[150.0,139.2],[153.8,145.6],
[155.4,147.6],[157.0,157.9],[158.4,156.2],[162.8,153.9],[162.8,158.6],
[164.7,166.3],[168.5,165.8]] //MANDATORY
type : lc 
}))
.appendTo("#line1");--></div>
    </div>
    
    <!-- line options -->
    <div class="yslider-panelwrapper" title="Line Options">

        <h4>Other options</h4>
        <p>See bar options for legend, axis, grid, background, colors etc....</p>
                
        <h4>Schema</h4>
        <div class="code javascript"><!--//1 ) api
var api = new jGCharts.Api();    
//2) options
var opt = {};//set options 
//3) append img
jQuery('<img>')
.attr('src', api.make(opt))//options 
.appendTo("#chart_container");--></div>

        <h4>Fillarea</h4>
        <div class="code javascript"><!--{
data : [[105.7,97.9] //...[etc] 
type : 'lc',
fillarea : true //default false
}--></div>
        <div id="line2"></div>

        <h4>FillBottom</h4>
        <div class="code javascript"><!--{
data : [[105.7,97.9] //...[etc] 
type : 'lc',
fillarea : true, //default false
fillbottom : true //default false
}--></div>
        <div id="line3"></div>

        <h4>FillTop</h4>
        <div class="code javascript"><!--{
data : [[105.7,97.9] //...[etc] 
type : 'lc',
fillarea : true, //default false
fillbottom : true, //default false
filltop : true //default false
}--></div>
        <div id="line4"></div>

        <h4>Line options</h4>
        <div class="code javascript"><!--{
data : [[105.7,97.9] //...[etc] 
type : 'lc',
lines: [[4,2,2],[6,3,3]] 
//[line width, solid width, blank width], [serie2N,serie2N,serie2N] - default false 
}--></div>
        <div id="line5"></div>

        <h4>Axis step</h4>
        <div class="code javascript"><!--{
data : [[105.7,97.9] //...[etc] 
axis_labels : ['01-03','02-03','03-03'// ... [etc]
axis_step : 10, 
type : 'lc'
}--></div>
        <div id="line6"></div>    
        
        <h4>Sparklines</h4>
        <p>A sparkline chart has exactly the same parameters as a line chart. The only difference is that the axes lines are not drawn for sparklines by default. You can add axes labels if you wish. (Google Api)</p>
        <div class="code javascript"><!--{data : [[105.7,97.9] //...[etc] 
type : 'ls'
}--></div>
        <div id="line7"></div>        
    </div>
    
    
    <!-- pie -->
    
    <div class="yslider-panelwrapper" title="Pie">
        
        <h4>Pie</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
type : 'p'//default bvg
}--></div>
        <div id="pie1"></div>
        
    </div>
    
    <div class="yslider-panelwrapper" title="Pie 3d">
        
        <h4>Pie</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory 
type : 'p3',//default bvg
size : '400x200'
}--></div>
        <div id="p3d1"></div>
        
    </div>
    
    <!--gallery -->
    
    <div class="yslider-panelwrapper" title="Charts gallery">
        <h4>Horizontal Stacked Bar</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 
//source
legend      : ['Data 1','Data 2','Data 3'],
axis_labels : ['2001','2002','2003'],
                        
//options 
size        : '400x250',
type        : 'bhs',
colors      : ['2c50f2','FFCC00','99CC00'],

//bar
bar_width   : 50,
bar_spacing : 5,

//bg
bg          : 'FFFFFF',
bg_type     : 'gradient',
bg_angle    : 90,
bg_offset   : '8c8c8c',

//grid
grid        : true,
grid_x      : 5,
grid_y      : 5,
grid_line   : 5,
grid_blank  : 5
}--></div>
        <div id="gallery1"></div>
        <h4>Vertical Stacked Bar</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 

//source
legend      : ['Data 1','Data 2','Data 3'],
axis_labels : ['2001','2002','2003'],
                        
//options 
size        : '250x400',
type        : 'bvs',

//bar
bar_width   : 50,
bar_spacing : 5,

//bg
chbg          : 'FFFFFF',
chbg_type     : 'gradient',
chbg_angle    : 90,
chbg_offset   : '8c8c8c',

//grid
grid        : true,
grid_x      : 5,
grid_y      : 5,
grid_line   : 5,
grid_blank  : 0

}--></div>
        <div id="gallery2"></div>
        <h4>Horizontal Bar</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 

//source
legend      : ['Data 1','Data 2','Data 3'],
axis_labels : ['2001','2002','2003'],
                        
//options 
size        : '250x400',
type        : 'bhg',

//bar
bar_width   : 50,
bar_spacing : 5,

//bg
chbg          : '000000',
chbg_trasparency: 20

}--></div>
        <div id="gallery3"></div>
        <h4>Vertical Bar</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 

//source
legend      : ['Data 1','Data 2','Data 3'],
axis_labels : ['2001','2002','2003'],
                        
//options 
size        : '400x250',
type        : 'bvg',
colors      : ['4b9b41','81419b','41599b'],
//bar
bar_width   : 20,
bar_spacing : 5,

//style
bg          : 'ffffff',
bg_type     : 'stripes',
bg_angle    : 90,
bg_offset   : '999999',
bg_width    : 20,
}--></div>
        <div id="gallery4"></div>
        <h4>Vertical Bar</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 

//source
legend      : ['Data 1','Data 2','Data 3'],
axis_labels : ['2001','2002','2003'],
                        
//options 
size        : '400x250',
type        : 'bvg',

//bar
bar_width   : 10,
bar_spacing : 10,

//style
chbg          : 'ffffff',
chbg_type     : 'stripes',
chbg_angle    : 90,
chbg_offset   : '999999',
chbg_width    : 20,
}--></div>
        <div id="gallery5"></div>
        <h4>Line chart</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 

//source
legend      : ['Data 1','Data 2','Data 3'],
axis_labels : ['2001','2002','2003'],
                        
//options 
size        : '400x250',
type        : 'lc',

//style
chbg          : 'ffffff',
chbg_type     : 'stripes',
chbg_angle    : 90,
chbg_offset   : '999999',
chbg_width    : 20,

bg            : 'ffffff',
bg_type       : 'gradient',
bg_angle      : 45,
bg_offset     : '4b9b41',
bg_width      : 20

}--></div>
        <div id="gallery6"></div>
        <h4>Line chart</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 
          
//source
//legend      : ['Data 1','Data 2','Data 3'],
axis_labels : ['2001','2002','2003'],
                        
//options 
size        : '400x250',
type        : 'lc',

//style
fillarea    : true,
fillbottom  : true,
filltop     : true,
 
//series line 
lines       : [[3,3,3],[4,4,4],[5,5,5]],

bg            : 'ffffff',
bg_type       : 'gradient',
bg_angle      : 45,
bg_offset     : '81419b',
bg_width      : 20

}--></div>
        <div id="gallery7"></div>
        <h4>Pie</h4>
        <div class="code javascript"><!--{
data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 
//source
legend      : ['Data 1','Data 2','Data 3'],
axis_labels : ['2001','2002','2003'],
                        
//options 
size        : '400x250',
type        : 'p',

bg            : '999999',
bg_type       : 'gradient',
bg_angle      : 45,
bg_offset     : 'ffffff',
bg_width      : 20
}--></div>
        <div id="gallery8"></div>
        <h4>Pie 3d</h4>
        <div class="code javascript"><!--{
   data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]], 
   //source
   legend      : ['Data 1','Data 2','Data 3'],
   axis_labels : ['2001','2002','2003'],

   //options 
   size        : '400x200',
   type        : 'p3',
   
   bg            : 'ffffff',
   bg_type       : 'gradient',
   bg_angle      : 45,
   bg_offset     : '999999',
   bg_width      : 20
}--></div>
        <div id="gallery9"></div>
        
    </div>
    <!--credits -->
    
    <div class="yslider-panelwrapper" title="Credits">
        <h4>Credits</h4>
        <p>
        Google Chart Api - <a href="http://code.google.com/apis/chart/" class="blank">http://code.google.com/apis/chart/</a>
        </p>     
        <h4>Libraries</h4>
        <p>
        jquery v1.3.1 of John Resig <a href="http://jquery.com" class="blank">jquery.com</a><br />
        </p>
        <h4>Demo Libraries (YCodaSlider 2.0)</h4>
        <p>
        jquery history_remote v1.0.3 of Klaus Hartl <a href="http://stilbuero.de" class="blank">stilbuero.de</a><br />
        jquery easing v1.3 of George McGinley Smith<br />
        jquery.chili-1.9.js of <a href="http://noteslog.com/chili/" class="blank">Andrea Ercolino</a><br />
        Icons <a class="blank tracking" href="http://www.icon-king.com/?p=15">Nuvola</a><br />
        Yahoo Css Reset version: 2.5.1
        GreyBox <a href="http://jquery.com/demo/grey/" class="blank tracking">Css</a>
        </p>
    </div>
</div>    

<div id="yslider-table" class="ycodaslider">

    <div class="yslider-panelwrapper" title="jGTable 1.0">
    
        <h3>jQuery Google Charts Table 1.0</h3>
        <p>
        Copyright (c) 2008 Massimiliano Balestrieri<br />
        Examples and docs at: http://maxb.net/blog/<br />
        Licensed GPL licenses:<br />
        http://www.gnu.org/licenses/gpl.html<br />
        </p>
        <blockquote>
        <p>
        
        </p>
        </blockquote>
        <p>
        </p>
        <h4>Basic usage:</h4>
        <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
        <h4>Html (see class="serie"):</h4>
        <div class="code html"><!--<div class="jgtable">
  <table>
  <thead>
    <tr>
        <th>Anno</th>
        <th class="serie">Data 1</th>
        <th class="serie">Data 2</th>
        <th class="serie">Data 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th class="serie">2001</th>
        <td>153</td>
        <td>60</td>
        <td>52</td>
    </tr>
    <tr>
        <th class="serie">2002</th>
        <td>113</td>
        <td>70</td>
        <td>60</td>
    </tr>
    <tr>
        <th class="serie">2003</th>
        <td>120</td>
        <td>80</td>
        <td>40</td>
    </tr>
  </tbody>
  </table>
</div>--></div>
        <h4>Basic scripts (use packed version in production):</h4>
        <div class="code html"><!--<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="jquery.metadata.min.js" type="text/javascript"></script>
<script src="jgcharts.js" type="text/javascript"></script>
<script src="plugins/jgtable/jgtable.js" type="text/javascript"></script>--></div>

    </div>
    
    <div class="yslider-panelwrapper" title="Basic">
    
    	<div class="jgtable">
        <table>
          <thead>
            <tr>
                <th>Anno</th>
                <th class="serie">Data 1</th>
                <th class="serie">Data 2</th>
                <th class="serie">Data 3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
                <th class="serie">2001</th>
                <td>153</td>
                <td>60</td>
                <td>52</td>
            </tr>
            <tr>
                <th class="serie">2002</th>
                <td>113</td>
                <td>70</td>
                <td>60</td>
            </tr>
            <tr>
                <th class="serie">2003</th>
                <td>120</td>
                <td>80</td>
                <td>40</td>
            </tr>
          </tbody>
        </table>
        </div>
        
        <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
        <div class="code html"><!-- <div class="jgtable">
  <table>
  <thead>
    <tr>
        <th>Anno</th>
        <th class="serie">Data 1</th>
        <th class="serie">Data 2</th>
        <th class="serie">Data 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th class="serie">2001</th>
        <td>153</td>
        <td>60</td>
        <td>52</td>
    </tr>
    <tr>
        <th class="serie">2002</th>
        <td>113</td>
        <td>70</td>
        <td>60</td>
    </tr>
    <tr>
        <th class="serie">2003</th>
        <td>120</td>
        <td>80</td>
        <td>40</td>
    </tr>
  </tbody>
  </table>
</div>--></div>
    </div>
    
    <div class="yslider-panelwrapper" title="Metadata">
    
        
            <div class="example">
            <h3>Example 1</h3>
            <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
            <div class="code html"><!--<div class="jgtable {size:'550x400',
type:'bhg',
title:'Example 1',
title_color:'000000',
title_size:16,
bar_width:30,
bar_spacing:2,
colors:['5131c9','FFCC00','da1b1b'],
bg:'FFFFFF',
bg_type:'gradient',
bg_angle:90,
bg_offset:'6d6969',
grid:true,
grid_x:7,
grid_y:10,
grid_line:0,
grid_blank:0}">
	<table>
	[etc...]
	</table>
</div>--></div>
            <div class="jgtable {size:'550x400',
                                                type:'bhg',
                                                title:'Example 1',
                                                title_color:'000000',
                                                title_size:16,
                                                bar_width:30,
                                                bar_spacing:2,
                                                colors:['5131c9','FFCC00','da1b1b'],
                                                bg:'FFFFFF',
                                                bg_type:'gradient',
                                                bg_angle:90,
                                                bg_offset:'6d6969',
                                                grid:true,
                                                grid_x:7,
                                                grid_y:10,
                                                grid_line:0,
                                                grid_blank:0}">
              <table>
              <thead>
                <tr>
                    <th>Anno</th>
                    <th class="serie">Data 1</th>
                    <th class="serie">Data 2</th>
                    <th class="serie">Data 3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <th class="serie">2001</th>
                    <td>153</td>
                    <td>60</td>
                    <td>52</td>
                </tr>
                <tr>
                    <th class="serie">2002</th>
                    <td>113</td>
                    <td>70</td>
                    <td>60</td>
                </tr>
                <tr>
                    <th class="serie">2003</th>
                    <td>120</td>
                    <td>80</td>
                    <td>40</td>
                </tr>
              </tbody>
            </table>
            </div>
            </div>
            <div class="example">
            <h3>Example 2</h3>
            <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
            <div class="code html"><!--<div class="jgtable {size:'400x500',
type:'bvg',
title:'Example 2',
title_color:'c81e3d',
title_size:16,
bar_width:30,
bar_spacing:2,
colors:['1aa22f','FFCC00','da1b1b'],
bg:'FFFFFF',
bg_type:'stripes',
bg_angle:90,
bg_offset:'b7b4b4',
bg_width:10,
chbg:'000000',
chbg_type:'solid'}">
	<table>
	[etc...]
	</table>
</div>--></div>
            <div class="jgtable {size:'400x500',
                                type:'bvg',
                                title:'Example 2',
                                title_color:'c81e3d',
                                title_size:16,
                                bar_width:30,
                                bar_spacing:2,
                                colors:['1aa22f','FFCC00','da1b1b'],
                                bg:'FFFFFF',
                                bg_type:'stripes',
                                bg_angle:90,
                                bg_offset:'b7b4b4',
                                bg_width:10,
                                chbg:'000000',
                                chbg_type:'solid'}">
              <table>                           
              <thead>
                <tr>
                    <th>Anno</th>
                    <th class="serie">Data 1</th>
                    <th class="serie">Data 2</th>
                    <th class="serie">Data 3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <th class="serie">2001</th>
                    <td>153</td>
                    <td>60</td>
                    <td>52</td>
                </tr>
                <tr>
                    <th class="serie">2002</th>
                    <td>113</td>
                    <td>70</td>
                    <td>60</td>
                </tr>
                <tr>
                    <th class="serie">2003</th>
                    <td>120</td>
                    <td>80</td>
                    <td>40</td>
                </tr>
              </tbody>
            </table>
            </div>
            </div>
            <div class="example">
            <h3>Example 3</h3>
            <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
            <div class="code html"><!--<div class="jgtable {size:'500x250',
type:'p3',
title:'Example 4',
title_color:'28179b',
title_size:16,
colors:['a21a9c','FFCC00'],
bg:'FFFFFF',
bg_type:'gradient',
bg_angle:90,
bg_offset:'b7b4b4'}">
	<table>
	[etc...]
	</table>
</div>--></div>
             <div class="jgtable {size:'500x250',
                                                type:'p3',
                                                title:'Example 4',
                                                title_color:'28179b',
                                                title_size:16,
                                                colors:['a21a9c','FFCC00'],
                                                bg:'FFFFFF',
                                                bg_type:'gradient',
                                                bg_angle:90,
                                                bg_offset:'b7b4b4'}">
             <table>
             <thead>
                <tr>
                    <th>Anno</th>
                    <th class="serie">Data 4</th>
                    <th class="serie">Data 5</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <th class="serie">2001</th>
                    <td>40</td>
                    <td>30</td>
                </tr>
                <tr>
                    <th class="serie">2000</th>
                    <td>30</td>
                    <td>40</td>
                </tr>
              </tbody>
            </table>
            </div>
            </div>
            <div class="example">
            <h3>Example 4</h3>
            <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
            <div class="code html"><!--<div class="jgtable {size:'450x350',
type:'p',
title:'Example 5',
title_color:'28179b',
title_size:16,
colors:['a21a9c','FFCC00'],
bg:'FFFFFF',
bg_type:'gradient',
bg_angle:90,
bg_offset:'b7b4b4'}">
	<table>
	[etc...]
	</table>
</div>--></div>
             <div class="jgtable {size:'450x350',
                                                type:'p',
                                                title:'Example 5',
                                                title_color:'28179b',
                                                title_size:16,
                                                colors:['a21a9c','FFCC00'],
                                                bg:'FFFFFF',
                                                bg_type:'gradient',
                                                bg_angle:90,
                                                bg_offset:'b7b4b4'}">
             <table>
             <thead>
                <tr>
                    <th>Anno</th>
                    <th class="serie">Data 4</th>
                    <th class="serie">Data 5</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <th class="serie">2001</th>
                    <td>40</td>
                    <td>30</td>
                </tr>
                <tr>
                    <th class="serie">2000</th>
                    <td>30</td>
                    <td>40</td>
                </tr>
              </tbody>
            </table>
            </div>
            </div>
            <div class="example">
            <h3>Example 5</h3>
            <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
            <div class="code html"><!--<div class="jgtable {size:'550x450',
type:'lc',
colors:['f04242','FFCC00','99CC00'],
lines:[[12,9,7],[14,9,7],[13,9,7]],
bg:'dca0ee',
bg_type:'solid',
grid:true,
grid_x:3,
grid_y:3,
grid_line:0,
grid_blank:0}">
	<table>
	[etc...]
	</table>
</div>--></div>
            <div class="jgtable {size:'550x450',
                                                type:'lc',
                                                colors:['f04242','FFCC00','99CC00'],
                                                lines:[[12,9,7],[14,9,7],[13,9,7]],
                                                bg:'dca0ee',
                                                bg_type:'solid',
                                                grid:true,
                                                grid_x:3,
                                                grid_y:3,
                                                grid_line:0,
                                                grid_blank:0}">
              <table>
              <thead>
                <tr>
                    <th>Anno</th>
                    <th class="serie">Data 1</th>
                    <th class="serie">Data 2</th>
                    <th class="serie">Data 3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <th class="serie">2001</th>
                    <td>153</td>
                    <td>60</td>
                    <td>52</td>
                </tr>
                <tr>
                    <th class="serie">2002</th>
                    <td>113</td>
                    <td>70</td>
                    <td>60</td>
                </tr>
                <tr>
                    <th class="serie">2003</th>
                    <td>120</td>
                    <td>80</td>
                    <td>40</td>
                </tr>
              </tbody>
            </table>
            </div>
            </div>
            <div class="example">
            <h3>Example 7</h3>
            <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
            <div class="code html"><!--<div class="jgtable {size:'550x450',
type:'bhs',
bar_width:90,
bar_spacing:11,
colors:['f04242','FFCC00','99CC00'],
bg:'dca0ee',
bg_type:'gradient',
bg_angle:40,
bg_offset:'FFFFFF',
chbg:'bfbfbf',
chbg_type:'stripes',
chbg_angle:0,
chbg_offset:'f5f5f5',
chbg_width:10}">
	<table>
	[etc...]
	</table>
</div>--></div>
            <div class="jgtable {size:'550x450',
                                                type:'bhs',
                                                bar_width:90,
                                                bar_spacing:11,
                                                colors:['f04242','FFCC00','99CC00'],
                                                bg:'dca0ee',
                                                bg_type:'gradient',
                                                bg_angle:40,
                                                bg_offset:'FFFFFF',
                                                chbg:'bfbfbf',
                                                chbg_type:'stripes',
                                                chbg_angle:0,
                                                chbg_offset:'f5f5f5',
                                                chbg_width:10}">
              <table>
              <thead>
                <tr>
                    <th>Anno</th>
                    <th class="serie">Data 1</th>
                    <th class="serie">Data 2</th>
                    <th class="serie">Data 3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <th class="serie">2001</th>
                    <td>153</td>
                    <td>60</td>
                    <td>52</td>
                </tr>
                <tr>
                    <th class="serie">2002</th>
                    <td>113</td>
                    <td>70</td>
                    <td>60</td>
                </tr>
                <tr>
                    <th class="serie">2003</th>
                    <td>120</td>
                    <td>80</td>
                    <td>40</td>
                </tr>
              </tbody>
            </table>
            </div>
            </div>
            <div class="example">
            <h3>Example 8</h3>
            <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
            <div class="code html"><!--<div class="jgtable {size:'450x450',
type:'bvs',
bar_width:90,
bar_spacing:11,
colors:['f04242','FFCC00','99CC00'],
bg:'dca0ee',
bg_type:'gradient',
bg_angle:40,
bg_offset:'FFFFFF',
chbg:'bfbfbf',
chbg_type:'stripes',
chbg_angle:0,
chbg_offset:'f5f5f5',
chbg_width:10}">
	<table>
	[etc...]
	</table>
</div>--></div>
             <div class="jgtable {size:'450x450',
                                                type:'bvs',
                                                bar_width:90,
                                                bar_spacing:11,
                                                colors:['f04242','FFCC00','99CC00'],
                                                bg:'dca0ee',
                                                bg_type:'gradient',
                                                bg_angle:40,
                                                bg_offset:'FFFFFF',
                                                chbg:'bfbfbf',
                                                chbg_type:'stripes',
                                                chbg_angle:0,
                                                chbg_offset:'f5f5f5',
                                                chbg_width:10}">
             <table>
             <thead>
                <tr>
                    <th>Anno</th>
                    <th class="serie">Data 1</th>
                    <th class="serie">Data 2</th>
                    <th class="serie">Data 3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <th class="serie">2001</th>
                    <td>153</td>
                    <td>60</td>
                    <td>52</td>
                </tr>
                <tr>
                    <th class="serie">2002</th>
                    <td>113</td>
                    <td>70</td>
                    <td>60</td>
                </tr>
                <tr>
                    <th class="serie">2003</th>
                    <td>120</td>
                    <td>80</td>
                    <td>40</td>
                </tr>
              </tbody>
            </table>
            </div>
    		</div>
    </div>
    
    <div class="yslider-panelwrapper" title="Json">
        
        <h3>JS</h3>
        <div class="code javascript"><!--jQuery.getJSON(
    "../json/example.json",
    //wait json data
    function(json){
        jQuery("#jgjson").jgtable(json);
    }
);--></div>
        
        <h3>Options in external json file (../json/example.json)</h3>
        <div class="code javascript"><!--{
size:'550x400',
type:'bhg',
title:'Example 1',
title_color:'000000',
title_size:16,
bar_width:30,
bar_spacing:2,
colors:['5131c9','FFCC00','da1b1b'],
bg:'FFFFFF',
bg_type:'gradient',
bg_angle:90,
bg_offset:'6d6969',
grid:true,
grid_x:7,
grid_y:10,
grid_line:0,
grid_blank:0
}--></div>
        
        <h3>Html Table</h3>
        <div class="code html"><!--<div id="jgjson">
  <table>      
  <thead>
    <tr>
        <th>Anno</th>
        <th class="serie">Data 1</th>
        <th class="serie">Data 2</th>
        <th class="serie">Data 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th class="serie">2001</th>
        <td>153</td>
        <td>60</td>
        <td>52</td>
    </tr>
    <tr>
        <th class="serie">2002</th>
        <td>113</td>
        <td>70</td>
        <td>60</td>
    </tr>
    <tr>
        <th class="serie">2003</th>
        <td>120</td>
        <td>80</td>
        <td>40</td>
    </tr>
  </tbody>
  </table>
</div>--></div>
              <div id="jgjson">                                  
              <table>
              <thead>
                <tr>
                    <th>Anno</th>
                    <th class="serie">Data 1</th>
                    <th class="serie">Data 2</th>
                    <th class="serie">Data 3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <th class="serie">2001</th>
                    <td>153</td>
                    <td>60</td>
                    <td>52</td>
                </tr>
                <tr>
                    <th class="serie">2002</th>
                    <td>113</td>
                    <td>70</td>
                    <td>60</td>
                </tr>
                <tr>
                    <th class="serie">2003</th>
                    <td>120</td>
                    <td>80</td>
                    <td>40</td>
                </tr>
              </tbody>
            </table>
    		</div>        
    </div>
    
    <div class="yslider-panelwrapper" title="Custom data">
        
        <h3>Alessandro Del Piero</h3>
        <div id="jgcustomdata">
        <table>
          <thead>
            <tr>
            <th colspan="2">Cronologia</th>
            <th colspan="2">Campionato</th>
            <th colspan="2">Coppe di Lega<small><sup>*</sup></small></th>
            <th colspan="2">Coppe Europee<small><sup>**</sup></small></th>
            <th colspan="2">Coppe Internazionali<small><sup>***</sup></small></th>
            <th colspan="2">Totale</th>
          </tr>
          <tr>
            <th>Stagione - Squadra</th>
            <th>Serie</th>
            <th>Presenze</th>
            <th>Gol</th>
            <th>Presenze</th>
            <th>Gol</th>
            <th>Presenze</th>
            
            <th>Gol</th>
            <th>Presenze</th>
            <th>Gol</th>
            <th>Presenze</th>
            <th>Gol</th>
          </tr>
          </thead>
          <tfoot>
            <tr>
                <th colspan="2">Totale</th>
                <th>417</th>
                <th>176</th>
                <th>51</th>
                <th>22</th>
                <th>105</th>
                <th>43</th>
                <th>1</th>
                
                <th>1</th>
                <th>574</th>
                <th>242</th>
            </tr>
            </tfoot>
          <tbody>
          
          <tr>
            <th class="custom">1991-92 - Padova</th>
            
            <td>B</td>
            <td>4</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            
            <td>4</td>
            <td>-</td>
            </tr>
            <tr>
            <th class="custom">1992-93 - Juventus</th>
            <td>B</td>
            <td>10</td>
            <td>1</td>
            
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>10</td>
            <td>1</td>
            </tr>
            
            <tr>
            <th class="custom">1993-94 - Juventus</th>
            <td>A</td>
            <td>11</td>
            <td>5</td>
            <td>1</td>
            <td>-</td>
            <td>2</td>
            
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>14</td>
            <td>5</td>
            </tr>
            <tr>
            <th class="custom">1994-95 - Juventus</th>
            
            <td>A</td>
            <td>29</td>
            <td>8</td>
            <td>10</td>
            <td>1</td>
            <td>11</td>
            <td>1</td>
            <td>-</td>
            <td>-</td>
            
            <td>50</td>
            <td>10</td>
            </tr>
            <tr>
            <th class="custom">1995-96 - Juventus</th>
            <td>A</td>
            <td>29</td>
            <td>6</td>
            
            <td>3</td>
            <td>1</td>
            <td>11</td>
            <td>6</td>
            <td>-</td>
            <td>-</td>
            <td>43</td>
            <td>13</td>
            </tr>
            
            <tr>
            <th class="custom">1996-97 - Juventus</th>
            <td>A</td>
            <td>22</td>
            <td>8</td>
            <td>4</td>
            <td>-</td>
            <td>8</td>
            
            <td>6</td>
            <td>1</td>
            <td>1</td>
            <td>35</td>
            <td>15</td>
            </tr>
            <tr>
            <th class="custom">1997-98 - Juventus</th>
            
            <td>A</td>
            <td>32</td>
            <td>21</td>
            <td>5</td>
            <td>1</td>
            <td>10</td>
            <td>10</td>
            <td>-</td>
            <td>-</td>
            
            <td>47</td>
            <td>32</td>
            </tr>
            <tr>
            <th class="custom">1998-99 - Juventus</th>
            <td>A</td>
            <td>8</td>
            <td>2</td>
            
            <td>2</td>
            <td>1</td>
            <td>4</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>14</td>
            <td>3</td>
            </tr>
            
            <tr>
            <th class="custom">1999-00 - Juventus</th>
            <td>A</td>
            <td>34</td>
            <td>9</td>
            <td>2</td>
            <td>1</td>
            <td>9</td>
            
            <td>2</td>
            <td>-</td>
            <td>-</td>
            <td>45</td>
            <td>12</td>
            </tr>
            <tr>
            <th class="custom">2000-01 - Juventus</th>
            
            <td>A</td>
            <td>25</td>
            <td>9</td>
            <td>2</td>
            <td>-</td>
            <td>6</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            
            <td>33</td>
            <td>9</td>
            </tr>
            <tr>
            <th class="custom">2001-02 - Juventus</th>
            <td>A</td>
            <td>32</td>
            <td>16</td>
            
            <td>4</td>
            <td>1</td>
            <td>10</td>
            <td>4</td>
            <td>-</td>
            <td>-</td>
            <td>46</td>
            <td>21</td>
            </tr>
            
            <tr>
            <th class="custom">2002-03 - Juventus</th>
            <td>A</td>
            <td>24</td>
            <td>16</td>
            <td>1</td>
            <td>2</td>
            <td>13</td>
            
            <td>5</td>
            <td>-</td>
            <td>-</td>
            <td>38</td>
            <td>23</td>
            </tr>
            <tr>
            <th class="custom">2003-04 - Juventus</th>
            
            <td>A</td>
            <td>22</td>
            <td>8</td>
            <td>5</td>
            <td>3</td>
            <td>4</td>
            <td>3</td>
            <td>-</td>
            <td>-</td>
            
            <td>31</td>
            <td>14</td>
            </tr>
            <tr>
            <th class="custom">2004-05 - Juventus</th>
            <td>A</td>
            <td>30</td>
            <td>14</td>
            
            <td>1</td>
            <td>-</td>
            <td>10</td>
            <td>3</td>
            <td>-</td>
            <td>-</td>
            <td>41</td>
            <td>17</td>
            </tr>
            
            <tr>
            <th class="custom">2005-06 - Juventus</th>
            <td>A</td>
            <td>33</td>
            <td>12</td>
            <td>5</td>
            <td>5</td>
            <td>7</td>
            
            <td>3</td>
            <td>-</td>
            <td>-</td>
            <td>45</td>
            <td>20</td>
            </tr>
            <tr>
            <th class="custom">2006-07 - Juventus</th>
            
            <td>B</td>
            <td>35</td>
            <td>20</td>
            <td>2</td>
            <td>3</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            
            <td>37</td>
            <td>23</td>
            </tr>
            
            <tr>
            <th class="custom">2007-08 - Juventus</th>
            <td>A</td>
            <td>37</td>
            <td>21</td>
            
            <td>4</td>
            <td>3</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>41</td>
            <td>24</td>
            </tr>
            
            
            </tbody>
            
        </table>
        </div>
        <h3>JS</h3>
        <div class="code javascript"><!--jQuery.getJSON(
"../json/delpiero.json",
//wait json data
function(json){
    var data_custom = [];
    for(var x= 0;x< jQuery("#jgcustomdata").find("tbody > tr").size();x++){
        data_custom.push(jQuery.map( jQuery("#jgcustomdata").find("tbody > tr:eq(" + x + ") > td"),
           function(td,index){
                if(index % 11 == 1 || index % 11 == 2){
                    if(parseInt(jQuery(td).text()))
                        return parseInt(jQuery(td).text());
                    else
                        return 0;
                } 
           }
        ));
        
    }
    var axis_custom = jQuery.map( jQuery("#jgcustomdata").find("tbody > tr > th.custom"),
               function(th) { return jQuery(th).text(); }
    );
    var legend_custom = ["presenze", "gol"];
    
    json.axis_labels = axis_custom;
    json.data = data_custom;
    json.legend = legend_custom;
    jQuery("#jgcustomdata").jgtable(json);
    
    var data_custom = [];
    for(var x= 0;x< jQuery("#jgcustomdata").find("tbody > tr").size();x++){
        data_custom.push(jQuery.map( jQuery("#jgcustomdata").find("tbody > tr:eq(" + x + ") > td"),
           function(td,index){
                if(index % 11 == 9 || index % 11 == 10){
                    if(parseInt(jQuery(td).text()))
                        return parseInt(jQuery(td).text());
                    else
                        return 0;
                } 
           }
        ));
        
    }
    json.data = data_custom;
    json.title = 'Gol e presenze totali';
    
    jQuery("#jgcustomdata").jgtable(json);
    
});--></div>
        
        <h3>Options in json file</h3>
        <div class="code javascript"><!--{
size:'450x600',
type:'bhg',
axis_step:1,
title:'Gol e presenze in campionato',
title_color:'000000',
title_size:16,
bar_width:10,
bar_spacing:0,
colors:['5131c9','da1b1b'],
grid:true,
grid_x:5,
grid_y:5,
grid_line:5,
grid_blank:5
}--></div>
        
        <h3>Html Table</h3>
        <div class="code html"><!--<div id="jgcustomdata">
  <table>
  <thead>
    <tr>
    <th colspan="2">Cronologia</th>
    <th colspan="2">Campionato</th>
    <th colspan="2">Coppe di Lega<small><sup>*</sup></small></th>
    <th colspan="2">Coppe Europee<small><sup>**</sup></small></th>
    <th colspan="2">Coppe Internazionali<small><sup>***</sup></small></th>
    <th colspan="2">Totale</th>
  </tr>
  <tr>
    <th>Stagione - Squadra</th>
    <th>Serie</th>
    <th>Presenze</th>
    <th>Gol</th>
    <th>Presenze</th>
    <th>Gol</th>
    <th>Presenze</th>
    
    <th>Gol</th>
    <th>Presenze</th>
    <th>Gol</th>
    <th>Presenze</th>
    <th>Gol</th>
  </tr>
  </thead>
  <tfoot>
    <tr>
        <th colspan="2">Totale</th>
        <th>417</th>
        <th>176</th>
        <th>51</th>
        <th>22</th>
        <th>105</th>
        <th>43</th>
        <th>1</th>
        
        <th>1</th>
        <th>574</th>
        <th>242</th>
    </tr>
    </tfoot>
  <tbody>
  
  <tr>
    <th class="custom">1991-92 - Padova</th>
    
    <td>B</td>
    <td>4</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    
    <td>4</td>
    <td>-</td>
    </tr>
    <tr>
    <th class="custom">1992-93 - Juventus</th>
    <td>B</td>
    <td>10</td>
    <td>1</td>
    
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>10</td>
    <td>1</td>
    </tr>
    
    <tr>
    <th class="custom">1993-94 - Juventus</th>
    <td>A</td>
    <td>11</td>
    <td>5</td>
    <td>1</td>
    <td>-</td>
    <td>2</td>
    
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>14</td>
    <td>5</td>
    </tr>
    <tr>
    <th class="custom">1994-95 - Juventus</th>
    
    <td>A</td>
    <td>29</td>
    <td>8</td>
    <td>10</td>
    <td>1</td>
    <td>11</td>
    <td>1</td>
    <td>-</td>
    <td>-</td>
    
    <td>50</td>
    <td>10</td>
    </tr>
    <tr>
    <th class="custom">1995-96 - Juventus</th>
    <td>A</td>
    <td>29</td>
    <td>6</td>
    
    <td>3</td>
    <td>1</td>
    <td>11</td>
    <td>6</td>
    <td>-</td>
    <td>-</td>
    <td>43</td>
    <td>13</td>
    </tr>
    
    <tr>
    <th class="custom">1996-97 - Juventus</th>
    <td>A</td>
    <td>22</td>
    <td>8</td>
    <td>4</td>
    <td>-</td>
    <td>8</td>
    
    <td>6</td>
    <td>1</td>
    <td>1</td>
    <td>35</td>
    <td>15</td>
    </tr>
    <tr>
    <th class="custom">1997-98 - Juventus</th>
    
    <td>A</td>
    <td>32</td>
    <td>21</td>
    <td>5</td>
    <td>1</td>
    <td>10</td>
    <td>10</td>
    <td>-</td>
    <td>-</td>
    
    <td>47</td>
    <td>32</td>
    </tr>
    <tr>
    <th class="custom">1998-99 - Juventus</th>
    <td>A</td>
    <td>8</td>
    <td>2</td>
    
    <td>2</td>
    <td>1</td>
    <td>4</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>14</td>
    <td>3</td>
    </tr>
    
    <tr>
    <th class="custom">1999-00 - Juventus</th>
    <td>A</td>
    <td>34</td>
    <td>9</td>
    <td>2</td>
    <td>1</td>
    <td>9</td>
    
    <td>2</td>
    <td>-</td>
    <td>-</td>
    <td>45</td>
    <td>12</td>
    </tr>
    <tr>
    <th class="custom">2000-01 - Juventus</th>
    
    <td>A</td>
    <td>25</td>
    <td>9</td>
    <td>2</td>
    <td>-</td>
    <td>6</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    
    <td>33</td>
    <td>9</td>
    </tr>
    <tr>
    <th class="custom">2001-02 - Juventus</th>
    <td>A</td>
    <td>32</td>
    <td>16</td>
    
    <td>4</td>
    <td>1</td>
    <td>10</td>
    <td>4</td>
    <td>-</td>
    <td>-</td>
    <td>46</td>
    <td>21</td>
    </tr>
    
    <tr>
    <th class="custom">2002-03 - Juventus</th>
    <td>A</td>
    <td>24</td>
    <td>16</td>
    <td>1</td>
    <td>2</td>
    <td>13</td>
    
    <td>5</td>
    <td>-</td>
    <td>-</td>
    <td>38</td>
    <td>23</td>
    </tr>
    <tr>
    <th class="custom">2003-04 - Juventus</th>
    
    <td>A</td>
    <td>22</td>
    <td>8</td>
    <td>5</td>
    <td>3</td>
    <td>4</td>
    <td>3</td>
    <td>-</td>
    <td>-</td>
    
    <td>31</td>
    <td>14</td>
    </tr>
    <tr>
    <th class="custom">2004-05 - Juventus</th>
    <td>A</td>
    <td>30</td>
    <td>14</td>
    
    <td>1</td>
    <td>-</td>
    <td>10</td>
    <td>3</td>
    <td>-</td>
    <td>-</td>
    <td>41</td>
    <td>17</td>
    </tr>
    
    <tr>
    <th class="custom">2005-06 - Juventus</th>
    <td>A</td>
    <td>33</td>
    <td>12</td>
    <td>5</td>
    <td>5</td>
    <td>7</td>
    
    <td>3</td>
    <td>-</td>
    <td>-</td>
    <td>45</td>
    <td>20</td>
    </tr>
    <tr>
    <th class="custom">2006-07 - Juventus</th>
    
    <td>B</td>
    <td>35</td>
    <td>20</td>
    <td>2</td>
    <td>3</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    
    <td>37</td>
    <td>23</td>
    </tr>
    
    <tr>
    <th class="custom">2007-08 - Juventus</th>
    <td>A</td>
    <td>37</td>
    <td>21</td>
    
    <td>4</td>
    <td>3</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>41</td>
    <td>24</td>
    </tr>
    
    
    </tbody>
    
   </table>
</div>--></div>
                                                
              
    </div>
</div>
<!--todo: copy events -->
<div id="yslider-code" class="ycodaslider">
    <a class="javascript" href="../../jgcharts.js" class="tracking {label : '/jgcharts/code/jgcharts'}">jGCharts 1.0</a>
    <a class="javascript" href="../../plugins/jgtable/jgtable.js" class="tracking {label : '/jgcharts/code/jgtable'}">jGTable 1.0</a>
</div>
<div id="analytics" class="UA-258871-1 {host: 'maxb.net'}"></div><!--debug:true-->
</body>
</html>