<!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>