|
@@ -0,0 +1,2004 @@
|
|
|
+<!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>
|