index.html 54 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  5. <title>jQuery Google Charts 1.0 - Demo Site</title>
  6. <meta http-equiv="Content-Language" content="en-us" />
  7. <meta name="author" content="Massimiliano Balestrieri" />
  8. <link rel="stylesheet" type="text/css" href="../../include/css/reset.css" />
  9. <link rel="stylesheet" type="text/css" href="../../include/css/demo.css" />
  10. <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  11. <!--script src="../../include/js/lib/ycodaslider-2.0.rc2/lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
  12. <script src="../../include/js/lib/ycodaslider-2.0.rc2/lib/jquery.history_remote.fixed.pack.js" type="text/javascript"></script>
  13. <script src="../../include/js/lib/ycodaslider-2.0.rc2/lib/chili/jquery.chili-2.2.js" type="text/javascript"></script>
  14. <script src="../../include/js/lib/ycodaslider-2.0.rc2/ycodaslider-2.0.pack.js" type="text/javascript"></script>
  15. <script src="../../include/js/lib/ycodaslider-2.0.rc2/plugins/code-ycodaslider-2.0.pack.js" type="text/javascript"></script-->
  16. <script src="../../include/js/lib/ycodaslider-3.0/ycodaslider-3.0.min.js" type="text/javascript"></script>
  17. <script src="../../lib/chili/jquery.chili-2.2.js" type="text/javascript"></script>
  18. <script src="../../lib/metadata/jquery.metadata.min.js" type="text/javascript"></script>
  19. <script src="../../lib/janalytics/janalytics.js" type="text/javascript"></script>
  20. <!--todo pack -->
  21. <script src="../../jgcharts.pack.js" type="text/javascript"></script>
  22. <script src="../../plugins/jgtable/jgtable.pack.js" type="text/javascript"></script>
  23. <script src="../../include/js/start-1.0.js" type="text/javascript"></script>
  24. </head>
  25. <body>
  26. <div id="icone_sinistra">
  27. <!-- home -->
  28. <a href="#" class="handle h-docs tracking {label : '/jgcharts/home'}"><img class="icone_sx" alt="docs" src="../../include/icons/home.png" /></a>
  29. <a href="#" class="handle h-docs text_icone_sx tracking {label : '/jgcharts/home'}">Home</a>
  30. <!-- table -->
  31. <a href="#" class="handle h-table tracking {label : '/jgcharts/table'}"><img class="icone_sx" alt="table" src="../../include/icons/frame.png" /></a>
  32. <a href="#" class="handle h-table text_icone_sx tracking {label : '/jgcharts/table'}">Table</a>
  33. <!-- gui -->
  34. <a href="../gui/" class="blank tracking {label : '/jgcharts/jggui'}"><img class="icone_sx" alt="gui" src="../../include/icons/important.png" /></a>
  35. <a href="../gui/" class="blank text_icone_sx tracking {label : '/jgcharts/jggui'}">Gui *ALPHA</a>
  36. </div>
  37. <div id="icone_destra">
  38. <!-- docs -->
  39. <a href="#" class="handle h-docs tracking {label : '/jgcharts/docs'}"><img class="icone_sx" alt="docs" src="../../include/icons/abc.png" /></a>
  40. <a href="#" class="handle h-docs text_icone_sx tracking {label : '/jgcharts/docs'}">Docs</a>
  41. <!-- code -->
  42. <a href="#" class="handle h-code tracking {label : '/jgcharts/code'}"><img class="icone_sx" alt="docs" src="../../include/icons/code.png" /></a>
  43. <a href="#" class="handle h-code text_icone_sx tracking {label : '/jgcharts/code'}">Code</a>
  44. <!-- download -->
  45. <a href="../../jgcharts-0.96.zip" class="tracking {label : '/jgcharts/download'}"><img class="icone_sx" alt="Download" src="../../include/icons/download.png" /></a>
  46. <a href="../../jgcharts-0.96.zip" class="text_icone_sx tracking {label : '/jgcharts/download'}">Download</a>
  47. </div>
  48. <div id="yslider-docs" class="ycodaslider">
  49. <div class="yslider-panelwrapper" title="jGCharts 1.0">
  50. <h3>jQuery Google Charts 1.0</h3>
  51. <p>
  52. Copyright (c) 2008 Massimiliano Balestrieri<br />
  53. Examples and docs at: http://maxb.net/blog/<br />
  54. Licensed GPL licenses:<br />
  55. http://www.gnu.org/licenses/gpl.html<br />
  56. </p>
  57. <blockquote>
  58. <p>
  59. </p>
  60. </blockquote>
  61. <p>
  62. </p>
  63. <h4>Basic usage:</h4>
  64. <div class="code javascript"><!--var api = new jGCharts.Api();
  65. jQuery('<img>')
  66. .attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}))
  67. .appendTo("#bar1");--></div>
  68. <h4>Html:</h4>
  69. <div class="code html"><!--<div id="bar1"></div>--></div>
  70. <h4>Basic scripts (use packed version in production):</h4>
  71. <div class="code html"><!--<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
  72. <script src="jgcharts.js" type="text/javascript"></script>--></div>
  73. </div>
  74. <!-- panel -->
  75. <div class="yslider-panelwrapper" title="Bar">
  76. <h4>Basic Bar</h4>
  77. <div class="code javascript"><!--//1 ) api
  78. var api = new jGCharts.Api();
  79. //2) options
  80. var opt = {
  81. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]//mandatory
  82. };//set options
  83. //3) append Img (with jQuery)
  84. jQuery('<img>')
  85. .attr('src', api.make(opt))//options
  86. .appendTo("#bar1");--></div>
  87. <div id="bar1"></div>
  88. </div>
  89. <!-- bar options -->
  90. <div class="yslider-panelwrapper" title="Bar Options">
  91. <h4>Schema</h4>
  92. <div class="code javascript"><!--//1 ) api
  93. var api = new jGCharts.Api();
  94. //2) options
  95. var opt = {};//set options
  96. //3) append img
  97. jQuery('<img>')
  98. .attr('src', api.make(opt))//options
  99. .appendTo("#chart_container");
  100. --></div>
  101. <h3>Options</h3>
  102. <h4>Chart Dimension</h4>
  103. <div class="code javascript"><!--{
  104. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  105. size : '400x400'//default 300x200 (width x height) - maximum size 300,000 pixels
  106. }--></div>
  107. <div id="bar2"></div>
  108. <h4>Direction</h4>
  109. <div class="code javascript"><!--{
  110. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  111. type : 'bhg'//default bvg
  112. }--></div>
  113. <div id="bar3"></div>
  114. <h4>Legend and axis labels</h4>
  115. <div class="code javascript"><!--{
  116. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  117. axis_labels : ['2008','2007','2006'], //default 0,1,2 etc...
  118. legend : ['serie1', 'serie2', 'serie3'] //default none
  119. }--></div>
  120. <div id="bar4"></div>
  121. <h4>Dimensions and spacing</h4>
  122. <div class="code javascript"><!--{
  123. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  124. bar_width : 10, //default 20
  125. bar_spacing : 10 //default 1
  126. }--></div>
  127. <div id="bar5"></div>
  128. <h4>Colors</h4>
  129. <div class="code javascript"><!--{
  130. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  131. colors : ['4b9b41','81419b','41599b']
  132. }--></div>
  133. <div id="bar6"></div>
  134. <h4>Background - solid</h4>
  135. <div class="code javascript"><!--{
  136. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  137. bg : 'e0e0e0'//default false
  138. //bg_trasparency : 50 - default false - also chbg_trasparency
  139. }--></div>
  140. <div id="bar7"></div>
  141. <h4>Background - gradient</h4>
  142. <div class="code javascript"><!--{
  143. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  144. bg : 'FFFFFF',//default false
  145. bg_offset : '000000',
  146. bg_angle : '45',//default 90
  147. bg_type : 'gradient' //default solid
  148. }--></div>
  149. <div id="bar8"></div>
  150. <h4>Background - stripes</h4>
  151. <div class="code javascript"><!--{
  152. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  153. bg : 'FFFFFF',//default false
  154. bg_offset : 'e0e0e0',
  155. bg_angle : '0',//default 90
  156. bg_type : 'stripes', //default solid
  157. bg_width : '10'//default 10 - min 10
  158. }--></div>
  159. <div id="bar9"></div>
  160. <h4>Chart Area Background (like bg)</h4>
  161. <div class="code javascript"><!--{
  162. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  163. chbg : 'FFFFFF',//default false
  164. chbg_offset : '4b9b41',
  165. chbg_angle : '45',//default 90
  166. chbg_type : 'gradient' //default solid
  167. }--></div>
  168. <div id="bar10"></div>
  169. <h4>Title</h4>
  170. <div class="code javascript"><!--{
  171. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  172. title : 'Bar Chart', //default false
  173. title_color : 'a98147',
  174. title_size : 20 //default 10
  175. }--></div>
  176. <div id="bar11"></div>
  177. <h4>Grid</h4>
  178. <div class="code javascript"><!--{
  179. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  180. grid : true, //default false
  181. grid_x : 5, //default 10
  182. grid_y : 5, //default 10
  183. grid_line : 5, //default 10
  184. grid_blank : 0 //default 0
  185. }--></div>
  186. <div id="bar12"></div>
  187. </div>
  188. <!-- stacked -->
  189. <div class="yslider-panelwrapper" title="Stacked Bar">
  190. <h4>Horizontal Dataset Stacked</h4>
  191. <div class="code javascript"><!--{
  192. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  193. type : 'bhs'//default bvg
  194. }--></div>
  195. <div id="stacked1"></div>
  196. <h4>Vertical Dataset Stacked</h4>
  197. <div class="code javascript"><!--{
  198. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  199. type : 'bvs'//default bvg
  200. }--></div>
  201. <div id="stacked2"></div>
  202. </div>
  203. <!-- line -->
  204. <div class="yslider-panelwrapper" title="Line">
  205. <div id="line1"></div>
  206. <h4>Js</h4>
  207. <div class="code javascript"><!--var api = new jGCharts.Api();
  208. jQuery('<img>')
  209. .attr('src', api.make({
  210. 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],
  211. [107.5,93.0],[106.1,94.5],[104.3,91.9],[102.0,93.9],[102.8,93.6],[103.8,92.6],
  212. [102.9,94.0],[102.1,92.7],[100.6,96.0],[101.7,97.9],[101.8,105.0],
  213. [103.3,104.1],[104.0,105.1],[103.7,108.1],[108.4,108.4],[109.4,113.8],
  214. [112.0,109.1],[112.6,106.3],[115.5,106.7],[115.7,108.8],[114.7,118.8],
  215. [115.9,120.4],[116.2,115.9],[118.0,124.7],[123.3,126.5],[127.6,131.6],
  216. [130.3,134.0],[135.5,135.7],[138.2,126.4],[139.6,127.4],[145.1,131.0],
  217. [146.4,129.9],[147.1,133.7],[149.0,138.4],[150.3,141.0],[151.3,139.3],
  218. [153.4,145.3],[152.7,142.9],[152.9,129.2],[152.2,126.0],[151.9,124.8],
  219. [150.1,125.9],[148.2,118.9],[145.3,122.9],[142.9,127.7],[142.6,134.4],
  220. [144.0,138.5],[145.5,138.7],[147.2,141.8],[150.0,139.2],[153.8,145.6],
  221. [155.4,147.6],[157.0,157.9],[158.4,156.2],[162.8,153.9],[162.8,158.6],
  222. [164.7,166.3],[168.5,165.8]] //MANDATORY
  223. type : lc
  224. }))
  225. .appendTo("#line1");--></div>
  226. </div>
  227. <!-- line options -->
  228. <div class="yslider-panelwrapper" title="Line Options">
  229. <h4>Other options</h4>
  230. <p>See bar options for legend, axis, grid, background, colors etc....</p>
  231. <h4>Schema</h4>
  232. <div class="code javascript"><!--//1 ) api
  233. var api = new jGCharts.Api();
  234. //2) options
  235. var opt = {};//set options
  236. //3) append img
  237. jQuery('<img>')
  238. .attr('src', api.make(opt))//options
  239. .appendTo("#chart_container");--></div>
  240. <h4>Fillarea</h4>
  241. <div class="code javascript"><!--{
  242. data : [[105.7,97.9] //...[etc]
  243. type : 'lc',
  244. fillarea : true //default false
  245. }--></div>
  246. <div id="line2"></div>
  247. <h4>FillBottom</h4>
  248. <div class="code javascript"><!--{
  249. data : [[105.7,97.9] //...[etc]
  250. type : 'lc',
  251. fillarea : true, //default false
  252. fillbottom : true //default false
  253. }--></div>
  254. <div id="line3"></div>
  255. <h4>FillTop</h4>
  256. <div class="code javascript"><!--{
  257. data : [[105.7,97.9] //...[etc]
  258. type : 'lc',
  259. fillarea : true, //default false
  260. fillbottom : true, //default false
  261. filltop : true //default false
  262. }--></div>
  263. <div id="line4"></div>
  264. <h4>Line options</h4>
  265. <div class="code javascript"><!--{
  266. data : [[105.7,97.9] //...[etc]
  267. type : 'lc',
  268. lines: [[4,2,2],[6,3,3]]
  269. //[line width, solid width, blank width], [serie2N,serie2N,serie2N] - default false
  270. }--></div>
  271. <div id="line5"></div>
  272. <h4>Axis step</h4>
  273. <div class="code javascript"><!--{
  274. data : [[105.7,97.9] //...[etc]
  275. axis_labels : ['01-03','02-03','03-03'// ... [etc]
  276. axis_step : 10,
  277. type : 'lc'
  278. }--></div>
  279. <div id="line6"></div>
  280. <h4>Sparklines</h4>
  281. <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>
  282. <div class="code javascript"><!--{data : [[105.7,97.9] //...[etc]
  283. type : 'ls'
  284. }--></div>
  285. <div id="line7"></div>
  286. </div>
  287. <!-- pie -->
  288. <div class="yslider-panelwrapper" title="Pie">
  289. <h4>Pie</h4>
  290. <div class="code javascript"><!--{
  291. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  292. type : 'p'//default bvg
  293. }--></div>
  294. <div id="pie1"></div>
  295. </div>
  296. <div class="yslider-panelwrapper" title="Pie 3d">
  297. <h4>Pie</h4>
  298. <div class="code javascript"><!--{
  299. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],//mandatory
  300. type : 'p3',//default bvg
  301. size : '400x200'
  302. }--></div>
  303. <div id="p3d1"></div>
  304. </div>
  305. <!--gallery -->
  306. <div class="yslider-panelwrapper" title="Charts gallery">
  307. <h4>Horizontal Stacked Bar</h4>
  308. <div class="code javascript"><!--{
  309. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  310. //source
  311. legend : ['Data 1','Data 2','Data 3'],
  312. axis_labels : ['2001','2002','2003'],
  313. //options
  314. size : '400x250',
  315. type : 'bhs',
  316. colors : ['2c50f2','FFCC00','99CC00'],
  317. //bar
  318. bar_width : 50,
  319. bar_spacing : 5,
  320. //bg
  321. bg : 'FFFFFF',
  322. bg_type : 'gradient',
  323. bg_angle : 90,
  324. bg_offset : '8c8c8c',
  325. //grid
  326. grid : true,
  327. grid_x : 5,
  328. grid_y : 5,
  329. grid_line : 5,
  330. grid_blank : 5
  331. }--></div>
  332. <div id="gallery1"></div>
  333. <h4>Vertical Stacked Bar</h4>
  334. <div class="code javascript"><!--{
  335. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  336. //source
  337. legend : ['Data 1','Data 2','Data 3'],
  338. axis_labels : ['2001','2002','2003'],
  339. //options
  340. size : '250x400',
  341. type : 'bvs',
  342. //bar
  343. bar_width : 50,
  344. bar_spacing : 5,
  345. //bg
  346. chbg : 'FFFFFF',
  347. chbg_type : 'gradient',
  348. chbg_angle : 90,
  349. chbg_offset : '8c8c8c',
  350. //grid
  351. grid : true,
  352. grid_x : 5,
  353. grid_y : 5,
  354. grid_line : 5,
  355. grid_blank : 0
  356. }--></div>
  357. <div id="gallery2"></div>
  358. <h4>Horizontal Bar</h4>
  359. <div class="code javascript"><!--{
  360. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  361. //source
  362. legend : ['Data 1','Data 2','Data 3'],
  363. axis_labels : ['2001','2002','2003'],
  364. //options
  365. size : '250x400',
  366. type : 'bhg',
  367. //bar
  368. bar_width : 50,
  369. bar_spacing : 5,
  370. //bg
  371. chbg : '000000',
  372. chbg_trasparency: 20
  373. }--></div>
  374. <div id="gallery3"></div>
  375. <h4>Vertical Bar</h4>
  376. <div class="code javascript"><!--{
  377. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  378. //source
  379. legend : ['Data 1','Data 2','Data 3'],
  380. axis_labels : ['2001','2002','2003'],
  381. //options
  382. size : '400x250',
  383. type : 'bvg',
  384. colors : ['4b9b41','81419b','41599b'],
  385. //bar
  386. bar_width : 20,
  387. bar_spacing : 5,
  388. //style
  389. bg : 'ffffff',
  390. bg_type : 'stripes',
  391. bg_angle : 90,
  392. bg_offset : '999999',
  393. bg_width : 20,
  394. }--></div>
  395. <div id="gallery4"></div>
  396. <h4>Vertical Bar</h4>
  397. <div class="code javascript"><!--{
  398. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  399. //source
  400. legend : ['Data 1','Data 2','Data 3'],
  401. axis_labels : ['2001','2002','2003'],
  402. //options
  403. size : '400x250',
  404. type : 'bvg',
  405. //bar
  406. bar_width : 10,
  407. bar_spacing : 10,
  408. //style
  409. chbg : 'ffffff',
  410. chbg_type : 'stripes',
  411. chbg_angle : 90,
  412. chbg_offset : '999999',
  413. chbg_width : 20,
  414. }--></div>
  415. <div id="gallery5"></div>
  416. <h4>Line chart</h4>
  417. <div class="code javascript"><!--{
  418. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  419. //source
  420. legend : ['Data 1','Data 2','Data 3'],
  421. axis_labels : ['2001','2002','2003'],
  422. //options
  423. size : '400x250',
  424. type : 'lc',
  425. //style
  426. chbg : 'ffffff',
  427. chbg_type : 'stripes',
  428. chbg_angle : 90,
  429. chbg_offset : '999999',
  430. chbg_width : 20,
  431. bg : 'ffffff',
  432. bg_type : 'gradient',
  433. bg_angle : 45,
  434. bg_offset : '4b9b41',
  435. bg_width : 20
  436. }--></div>
  437. <div id="gallery6"></div>
  438. <h4>Line chart</h4>
  439. <div class="code javascript"><!--{
  440. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  441. //source
  442. //legend : ['Data 1','Data 2','Data 3'],
  443. axis_labels : ['2001','2002','2003'],
  444. //options
  445. size : '400x250',
  446. type : 'lc',
  447. //style
  448. fillarea : true,
  449. fillbottom : true,
  450. filltop : true,
  451. //series line
  452. lines : [[3,3,3],[4,4,4],[5,5,5]],
  453. bg : 'ffffff',
  454. bg_type : 'gradient',
  455. bg_angle : 45,
  456. bg_offset : '81419b',
  457. bg_width : 20
  458. }--></div>
  459. <div id="gallery7"></div>
  460. <h4>Pie</h4>
  461. <div class="code javascript"><!--{
  462. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  463. //source
  464. legend : ['Data 1','Data 2','Data 3'],
  465. axis_labels : ['2001','2002','2003'],
  466. //options
  467. size : '400x250',
  468. type : 'p',
  469. bg : '999999',
  470. bg_type : 'gradient',
  471. bg_angle : 45,
  472. bg_offset : 'ffffff',
  473. bg_width : 20
  474. }--></div>
  475. <div id="gallery8"></div>
  476. <h4>Pie 3d</h4>
  477. <div class="code javascript"><!--{
  478. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  479. //source
  480. legend : ['Data 1','Data 2','Data 3'],
  481. axis_labels : ['2001','2002','2003'],
  482. //options
  483. size : '400x200',
  484. type : 'p3',
  485. bg : 'ffffff',
  486. bg_type : 'gradient',
  487. bg_angle : 45,
  488. bg_offset : '999999',
  489. bg_width : 20
  490. }--></div>
  491. <div id="gallery9"></div>
  492. </div>
  493. <!--credits -->
  494. <div class="yslider-panelwrapper" title="Credits">
  495. <h4>Credits</h4>
  496. <p>
  497. Google Chart Api - <a href="http://code.google.com/apis/chart/" class="blank">http://code.google.com/apis/chart/</a>
  498. </p>
  499. <h4>Libraries</h4>
  500. <p>
  501. jquery v1.3.1 of John Resig <a href="http://jquery.com" class="blank">jquery.com</a><br />
  502. </p>
  503. <h4>Demo Libraries (YCodaSlider 2.0)</h4>
  504. <p>
  505. jquery history_remote v1.0.3 of Klaus Hartl <a href="http://stilbuero.de" class="blank">stilbuero.de</a><br />
  506. jquery easing v1.3 of George McGinley Smith<br />
  507. jquery.chili-1.9.js of <a href="http://noteslog.com/chili/" class="blank">Andrea Ercolino</a><br />
  508. Icons <a class="blank tracking" href="http://www.icon-king.com/?p=15">Nuvola</a><br />
  509. Yahoo Css Reset version: 2.5.1
  510. GreyBox <a href="http://jquery.com/demo/grey/" class="blank tracking">Css</a>
  511. </p>
  512. </div>
  513. </div>
  514. <div id="yslider-table" class="ycodaslider">
  515. <div class="yslider-panelwrapper" title="jGTable 1.0">
  516. <h3>jQuery Google Charts Table 1.0</h3>
  517. <p>
  518. Copyright (c) 2008 Massimiliano Balestrieri<br />
  519. Examples and docs at: http://maxb.net/blog/<br />
  520. Licensed GPL licenses:<br />
  521. http://www.gnu.org/licenses/gpl.html<br />
  522. </p>
  523. <blockquote>
  524. <p>
  525. </p>
  526. </blockquote>
  527. <p>
  528. </p>
  529. <h4>Basic usage:</h4>
  530. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  531. <h4>Html (see class="serie"):</h4>
  532. <div class="code html"><!--<div class="jgtable">
  533. <table>
  534. <thead>
  535. <tr>
  536. <th>Anno</th>
  537. <th class="serie">Data 1</th>
  538. <th class="serie">Data 2</th>
  539. <th class="serie">Data 3</th>
  540. </tr>
  541. </thead>
  542. <tbody>
  543. <tr>
  544. <th class="serie">2001</th>
  545. <td>153</td>
  546. <td>60</td>
  547. <td>52</td>
  548. </tr>
  549. <tr>
  550. <th class="serie">2002</th>
  551. <td>113</td>
  552. <td>70</td>
  553. <td>60</td>
  554. </tr>
  555. <tr>
  556. <th class="serie">2003</th>
  557. <td>120</td>
  558. <td>80</td>
  559. <td>40</td>
  560. </tr>
  561. </tbody>
  562. </table>
  563. </div>--></div>
  564. <h4>Basic scripts (use packed version in production):</h4>
  565. <div class="code html"><!--<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
  566. <script src="jquery.metadata.min.js" type="text/javascript"></script>
  567. <script src="jgcharts.js" type="text/javascript"></script>
  568. <script src="plugins/jgtable/jgtable.js" type="text/javascript"></script>--></div>
  569. </div>
  570. <div class="yslider-panelwrapper" title="Basic">
  571. <div class="jgtable">
  572. <table>
  573. <thead>
  574. <tr>
  575. <th>Anno</th>
  576. <th class="serie">Data 1</th>
  577. <th class="serie">Data 2</th>
  578. <th class="serie">Data 3</th>
  579. </tr>
  580. </thead>
  581. <tbody>
  582. <tr>
  583. <th class="serie">2001</th>
  584. <td>153</td>
  585. <td>60</td>
  586. <td>52</td>
  587. </tr>
  588. <tr>
  589. <th class="serie">2002</th>
  590. <td>113</td>
  591. <td>70</td>
  592. <td>60</td>
  593. </tr>
  594. <tr>
  595. <th class="serie">2003</th>
  596. <td>120</td>
  597. <td>80</td>
  598. <td>40</td>
  599. </tr>
  600. </tbody>
  601. </table>
  602. </div>
  603. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  604. <div class="code html"><!-- <div class="jgtable">
  605. <table>
  606. <thead>
  607. <tr>
  608. <th>Anno</th>
  609. <th class="serie">Data 1</th>
  610. <th class="serie">Data 2</th>
  611. <th class="serie">Data 3</th>
  612. </tr>
  613. </thead>
  614. <tbody>
  615. <tr>
  616. <th class="serie">2001</th>
  617. <td>153</td>
  618. <td>60</td>
  619. <td>52</td>
  620. </tr>
  621. <tr>
  622. <th class="serie">2002</th>
  623. <td>113</td>
  624. <td>70</td>
  625. <td>60</td>
  626. </tr>
  627. <tr>
  628. <th class="serie">2003</th>
  629. <td>120</td>
  630. <td>80</td>
  631. <td>40</td>
  632. </tr>
  633. </tbody>
  634. </table>
  635. </div>--></div>
  636. </div>
  637. <div class="yslider-panelwrapper" title="Metadata">
  638. <div class="example">
  639. <h3>Example 1</h3>
  640. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  641. <div class="code html"><!--<div class="jgtable {size:'550x400',
  642. type:'bhg',
  643. title:'Example 1',
  644. title_color:'000000',
  645. title_size:16,
  646. bar_width:30,
  647. bar_spacing:2,
  648. colors:['5131c9','FFCC00','da1b1b'],
  649. bg:'FFFFFF',
  650. bg_type:'gradient',
  651. bg_angle:90,
  652. bg_offset:'6d6969',
  653. grid:true,
  654. grid_x:7,
  655. grid_y:10,
  656. grid_line:0,
  657. grid_blank:0}">
  658. <table>
  659. [etc...]
  660. </table>
  661. </div>--></div>
  662. <div class="jgtable {size:'550x400',
  663. type:'bhg',
  664. title:'Example 1',
  665. title_color:'000000',
  666. title_size:16,
  667. bar_width:30,
  668. bar_spacing:2,
  669. colors:['5131c9','FFCC00','da1b1b'],
  670. bg:'FFFFFF',
  671. bg_type:'gradient',
  672. bg_angle:90,
  673. bg_offset:'6d6969',
  674. grid:true,
  675. grid_x:7,
  676. grid_y:10,
  677. grid_line:0,
  678. grid_blank:0}">
  679. <table>
  680. <thead>
  681. <tr>
  682. <th>Anno</th>
  683. <th class="serie">Data 1</th>
  684. <th class="serie">Data 2</th>
  685. <th class="serie">Data 3</th>
  686. </tr>
  687. </thead>
  688. <tbody>
  689. <tr>
  690. <th class="serie">2001</th>
  691. <td>153</td>
  692. <td>60</td>
  693. <td>52</td>
  694. </tr>
  695. <tr>
  696. <th class="serie">2002</th>
  697. <td>113</td>
  698. <td>70</td>
  699. <td>60</td>
  700. </tr>
  701. <tr>
  702. <th class="serie">2003</th>
  703. <td>120</td>
  704. <td>80</td>
  705. <td>40</td>
  706. </tr>
  707. </tbody>
  708. </table>
  709. </div>
  710. </div>
  711. <div class="example">
  712. <h3>Example 2</h3>
  713. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  714. <div class="code html"><!--<div class="jgtable {size:'400x500',
  715. type:'bvg',
  716. title:'Example 2',
  717. title_color:'c81e3d',
  718. title_size:16,
  719. bar_width:30,
  720. bar_spacing:2,
  721. colors:['1aa22f','FFCC00','da1b1b'],
  722. bg:'FFFFFF',
  723. bg_type:'stripes',
  724. bg_angle:90,
  725. bg_offset:'b7b4b4',
  726. bg_width:10,
  727. chbg:'000000',
  728. chbg_type:'solid'}">
  729. <table>
  730. [etc...]
  731. </table>
  732. </div>--></div>
  733. <div class="jgtable {size:'400x500',
  734. type:'bvg',
  735. title:'Example 2',
  736. title_color:'c81e3d',
  737. title_size:16,
  738. bar_width:30,
  739. bar_spacing:2,
  740. colors:['1aa22f','FFCC00','da1b1b'],
  741. bg:'FFFFFF',
  742. bg_type:'stripes',
  743. bg_angle:90,
  744. bg_offset:'b7b4b4',
  745. bg_width:10,
  746. chbg:'000000',
  747. chbg_type:'solid'}">
  748. <table>
  749. <thead>
  750. <tr>
  751. <th>Anno</th>
  752. <th class="serie">Data 1</th>
  753. <th class="serie">Data 2</th>
  754. <th class="serie">Data 3</th>
  755. </tr>
  756. </thead>
  757. <tbody>
  758. <tr>
  759. <th class="serie">2001</th>
  760. <td>153</td>
  761. <td>60</td>
  762. <td>52</td>
  763. </tr>
  764. <tr>
  765. <th class="serie">2002</th>
  766. <td>113</td>
  767. <td>70</td>
  768. <td>60</td>
  769. </tr>
  770. <tr>
  771. <th class="serie">2003</th>
  772. <td>120</td>
  773. <td>80</td>
  774. <td>40</td>
  775. </tr>
  776. </tbody>
  777. </table>
  778. </div>
  779. </div>
  780. <div class="example">
  781. <h3>Example 3</h3>
  782. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  783. <div class="code html"><!--<div class="jgtable {size:'500x250',
  784. type:'p3',
  785. title:'Example 4',
  786. title_color:'28179b',
  787. title_size:16,
  788. colors:['a21a9c','FFCC00'],
  789. bg:'FFFFFF',
  790. bg_type:'gradient',
  791. bg_angle:90,
  792. bg_offset:'b7b4b4'}">
  793. <table>
  794. [etc...]
  795. </table>
  796. </div>--></div>
  797. <div class="jgtable {size:'500x250',
  798. type:'p3',
  799. title:'Example 4',
  800. title_color:'28179b',
  801. title_size:16,
  802. colors:['a21a9c','FFCC00'],
  803. bg:'FFFFFF',
  804. bg_type:'gradient',
  805. bg_angle:90,
  806. bg_offset:'b7b4b4'}">
  807. <table>
  808. <thead>
  809. <tr>
  810. <th>Anno</th>
  811. <th class="serie">Data 4</th>
  812. <th class="serie">Data 5</th>
  813. </tr>
  814. </thead>
  815. <tbody>
  816. <tr>
  817. <th class="serie">2001</th>
  818. <td>40</td>
  819. <td>30</td>
  820. </tr>
  821. <tr>
  822. <th class="serie">2000</th>
  823. <td>30</td>
  824. <td>40</td>
  825. </tr>
  826. </tbody>
  827. </table>
  828. </div>
  829. </div>
  830. <div class="example">
  831. <h3>Example 4</h3>
  832. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  833. <div class="code html"><!--<div class="jgtable {size:'450x350',
  834. type:'p',
  835. title:'Example 5',
  836. title_color:'28179b',
  837. title_size:16,
  838. colors:['a21a9c','FFCC00'],
  839. bg:'FFFFFF',
  840. bg_type:'gradient',
  841. bg_angle:90,
  842. bg_offset:'b7b4b4'}">
  843. <table>
  844. [etc...]
  845. </table>
  846. </div>--></div>
  847. <div class="jgtable {size:'450x350',
  848. type:'p',
  849. title:'Example 5',
  850. title_color:'28179b',
  851. title_size:16,
  852. colors:['a21a9c','FFCC00'],
  853. bg:'FFFFFF',
  854. bg_type:'gradient',
  855. bg_angle:90,
  856. bg_offset:'b7b4b4'}">
  857. <table>
  858. <thead>
  859. <tr>
  860. <th>Anno</th>
  861. <th class="serie">Data 4</th>
  862. <th class="serie">Data 5</th>
  863. </tr>
  864. </thead>
  865. <tbody>
  866. <tr>
  867. <th class="serie">2001</th>
  868. <td>40</td>
  869. <td>30</td>
  870. </tr>
  871. <tr>
  872. <th class="serie">2000</th>
  873. <td>30</td>
  874. <td>40</td>
  875. </tr>
  876. </tbody>
  877. </table>
  878. </div>
  879. </div>
  880. <div class="example">
  881. <h3>Example 5</h3>
  882. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  883. <div class="code html"><!--<div class="jgtable {size:'550x450',
  884. type:'lc',
  885. colors:['f04242','FFCC00','99CC00'],
  886. lines:[[12,9,7],[14,9,7],[13,9,7]],
  887. bg:'dca0ee',
  888. bg_type:'solid',
  889. grid:true,
  890. grid_x:3,
  891. grid_y:3,
  892. grid_line:0,
  893. grid_blank:0}">
  894. <table>
  895. [etc...]
  896. </table>
  897. </div>--></div>
  898. <div class="jgtable {size:'550x450',
  899. type:'lc',
  900. colors:['f04242','FFCC00','99CC00'],
  901. lines:[[12,9,7],[14,9,7],[13,9,7]],
  902. bg:'dca0ee',
  903. bg_type:'solid',
  904. grid:true,
  905. grid_x:3,
  906. grid_y:3,
  907. grid_line:0,
  908. grid_blank:0}">
  909. <table>
  910. <thead>
  911. <tr>
  912. <th>Anno</th>
  913. <th class="serie">Data 1</th>
  914. <th class="serie">Data 2</th>
  915. <th class="serie">Data 3</th>
  916. </tr>
  917. </thead>
  918. <tbody>
  919. <tr>
  920. <th class="serie">2001</th>
  921. <td>153</td>
  922. <td>60</td>
  923. <td>52</td>
  924. </tr>
  925. <tr>
  926. <th class="serie">2002</th>
  927. <td>113</td>
  928. <td>70</td>
  929. <td>60</td>
  930. </tr>
  931. <tr>
  932. <th class="serie">2003</th>
  933. <td>120</td>
  934. <td>80</td>
  935. <td>40</td>
  936. </tr>
  937. </tbody>
  938. </table>
  939. </div>
  940. </div>
  941. <div class="example">
  942. <h3>Example 7</h3>
  943. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  944. <div class="code html"><!--<div class="jgtable {size:'550x450',
  945. type:'bhs',
  946. bar_width:90,
  947. bar_spacing:11,
  948. colors:['f04242','FFCC00','99CC00'],
  949. bg:'dca0ee',
  950. bg_type:'gradient',
  951. bg_angle:40,
  952. bg_offset:'FFFFFF',
  953. chbg:'bfbfbf',
  954. chbg_type:'stripes',
  955. chbg_angle:0,
  956. chbg_offset:'f5f5f5',
  957. chbg_width:10}">
  958. <table>
  959. [etc...]
  960. </table>
  961. </div>--></div>
  962. <div class="jgtable {size:'550x450',
  963. type:'bhs',
  964. bar_width:90,
  965. bar_spacing:11,
  966. colors:['f04242','FFCC00','99CC00'],
  967. bg:'dca0ee',
  968. bg_type:'gradient',
  969. bg_angle:40,
  970. bg_offset:'FFFFFF',
  971. chbg:'bfbfbf',
  972. chbg_type:'stripes',
  973. chbg_angle:0,
  974. chbg_offset:'f5f5f5',
  975. chbg_width:10}">
  976. <table>
  977. <thead>
  978. <tr>
  979. <th>Anno</th>
  980. <th class="serie">Data 1</th>
  981. <th class="serie">Data 2</th>
  982. <th class="serie">Data 3</th>
  983. </tr>
  984. </thead>
  985. <tbody>
  986. <tr>
  987. <th class="serie">2001</th>
  988. <td>153</td>
  989. <td>60</td>
  990. <td>52</td>
  991. </tr>
  992. <tr>
  993. <th class="serie">2002</th>
  994. <td>113</td>
  995. <td>70</td>
  996. <td>60</td>
  997. </tr>
  998. <tr>
  999. <th class="serie">2003</th>
  1000. <td>120</td>
  1001. <td>80</td>
  1002. <td>40</td>
  1003. </tr>
  1004. </tbody>
  1005. </table>
  1006. </div>
  1007. </div>
  1008. <div class="example">
  1009. <h3>Example 8</h3>
  1010. <div class="code javascript"><!--jQuery(".jgtable").jgtable();--></div>
  1011. <div class="code html"><!--<div class="jgtable {size:'450x450',
  1012. type:'bvs',
  1013. bar_width:90,
  1014. bar_spacing:11,
  1015. colors:['f04242','FFCC00','99CC00'],
  1016. bg:'dca0ee',
  1017. bg_type:'gradient',
  1018. bg_angle:40,
  1019. bg_offset:'FFFFFF',
  1020. chbg:'bfbfbf',
  1021. chbg_type:'stripes',
  1022. chbg_angle:0,
  1023. chbg_offset:'f5f5f5',
  1024. chbg_width:10}">
  1025. <table>
  1026. [etc...]
  1027. </table>
  1028. </div>--></div>
  1029. <div class="jgtable {size:'450x450',
  1030. type:'bvs',
  1031. bar_width:90,
  1032. bar_spacing:11,
  1033. colors:['f04242','FFCC00','99CC00'],
  1034. bg:'dca0ee',
  1035. bg_type:'gradient',
  1036. bg_angle:40,
  1037. bg_offset:'FFFFFF',
  1038. chbg:'bfbfbf',
  1039. chbg_type:'stripes',
  1040. chbg_angle:0,
  1041. chbg_offset:'f5f5f5',
  1042. chbg_width:10}">
  1043. <table>
  1044. <thead>
  1045. <tr>
  1046. <th>Anno</th>
  1047. <th class="serie">Data 1</th>
  1048. <th class="serie">Data 2</th>
  1049. <th class="serie">Data 3</th>
  1050. </tr>
  1051. </thead>
  1052. <tbody>
  1053. <tr>
  1054. <th class="serie">2001</th>
  1055. <td>153</td>
  1056. <td>60</td>
  1057. <td>52</td>
  1058. </tr>
  1059. <tr>
  1060. <th class="serie">2002</th>
  1061. <td>113</td>
  1062. <td>70</td>
  1063. <td>60</td>
  1064. </tr>
  1065. <tr>
  1066. <th class="serie">2003</th>
  1067. <td>120</td>
  1068. <td>80</td>
  1069. <td>40</td>
  1070. </tr>
  1071. </tbody>
  1072. </table>
  1073. </div>
  1074. </div>
  1075. </div>
  1076. <div class="yslider-panelwrapper" title="Json">
  1077. <h3>JS</h3>
  1078. <div class="code javascript"><!--jQuery.getJSON(
  1079. "../json/example.json",
  1080. //wait json data
  1081. function(json){
  1082. jQuery("#jgjson").jgtable(json);
  1083. }
  1084. );--></div>
  1085. <h3>Options in external json file (../json/example.json)</h3>
  1086. <div class="code javascript"><!--{
  1087. size:'550x400',
  1088. type:'bhg',
  1089. title:'Example 1',
  1090. title_color:'000000',
  1091. title_size:16,
  1092. bar_width:30,
  1093. bar_spacing:2,
  1094. colors:['5131c9','FFCC00','da1b1b'],
  1095. bg:'FFFFFF',
  1096. bg_type:'gradient',
  1097. bg_angle:90,
  1098. bg_offset:'6d6969',
  1099. grid:true,
  1100. grid_x:7,
  1101. grid_y:10,
  1102. grid_line:0,
  1103. grid_blank:0
  1104. }--></div>
  1105. <h3>Html Table</h3>
  1106. <div class="code html"><!--<div id="jgjson">
  1107. <table>
  1108. <thead>
  1109. <tr>
  1110. <th>Anno</th>
  1111. <th class="serie">Data 1</th>
  1112. <th class="serie">Data 2</th>
  1113. <th class="serie">Data 3</th>
  1114. </tr>
  1115. </thead>
  1116. <tbody>
  1117. <tr>
  1118. <th class="serie">2001</th>
  1119. <td>153</td>
  1120. <td>60</td>
  1121. <td>52</td>
  1122. </tr>
  1123. <tr>
  1124. <th class="serie">2002</th>
  1125. <td>113</td>
  1126. <td>70</td>
  1127. <td>60</td>
  1128. </tr>
  1129. <tr>
  1130. <th class="serie">2003</th>
  1131. <td>120</td>
  1132. <td>80</td>
  1133. <td>40</td>
  1134. </tr>
  1135. </tbody>
  1136. </table>
  1137. </div>--></div>
  1138. <div id="jgjson">
  1139. <table>
  1140. <thead>
  1141. <tr>
  1142. <th>Anno</th>
  1143. <th class="serie">Data 1</th>
  1144. <th class="serie">Data 2</th>
  1145. <th class="serie">Data 3</th>
  1146. </tr>
  1147. </thead>
  1148. <tbody>
  1149. <tr>
  1150. <th class="serie">2001</th>
  1151. <td>153</td>
  1152. <td>60</td>
  1153. <td>52</td>
  1154. </tr>
  1155. <tr>
  1156. <th class="serie">2002</th>
  1157. <td>113</td>
  1158. <td>70</td>
  1159. <td>60</td>
  1160. </tr>
  1161. <tr>
  1162. <th class="serie">2003</th>
  1163. <td>120</td>
  1164. <td>80</td>
  1165. <td>40</td>
  1166. </tr>
  1167. </tbody>
  1168. </table>
  1169. </div>
  1170. </div>
  1171. <div class="yslider-panelwrapper" title="Custom data">
  1172. <h3>Alessandro Del Piero</h3>
  1173. <div id="jgcustomdata">
  1174. <table>
  1175. <thead>
  1176. <tr>
  1177. <th colspan="2">Cronologia</th>
  1178. <th colspan="2">Campionato</th>
  1179. <th colspan="2">Coppe di Lega<small><sup>*</sup></small></th>
  1180. <th colspan="2">Coppe Europee<small><sup>**</sup></small></th>
  1181. <th colspan="2">Coppe Internazionali<small><sup>***</sup></small></th>
  1182. <th colspan="2">Totale</th>
  1183. </tr>
  1184. <tr>
  1185. <th>Stagione - Squadra</th>
  1186. <th>Serie</th>
  1187. <th>Presenze</th>
  1188. <th>Gol</th>
  1189. <th>Presenze</th>
  1190. <th>Gol</th>
  1191. <th>Presenze</th>
  1192. <th>Gol</th>
  1193. <th>Presenze</th>
  1194. <th>Gol</th>
  1195. <th>Presenze</th>
  1196. <th>Gol</th>
  1197. </tr>
  1198. </thead>
  1199. <tfoot>
  1200. <tr>
  1201. <th colspan="2">Totale</th>
  1202. <th>417</th>
  1203. <th>176</th>
  1204. <th>51</th>
  1205. <th>22</th>
  1206. <th>105</th>
  1207. <th>43</th>
  1208. <th>1</th>
  1209. <th>1</th>
  1210. <th>574</th>
  1211. <th>242</th>
  1212. </tr>
  1213. </tfoot>
  1214. <tbody>
  1215. <tr>
  1216. <th class="custom">1991-92 - Padova</th>
  1217. <td>B</td>
  1218. <td>4</td>
  1219. <td>-</td>
  1220. <td>-</td>
  1221. <td>-</td>
  1222. <td>-</td>
  1223. <td>-</td>
  1224. <td>-</td>
  1225. <td>-</td>
  1226. <td>4</td>
  1227. <td>-</td>
  1228. </tr>
  1229. <tr>
  1230. <th class="custom">1992-93 - Juventus</th>
  1231. <td>B</td>
  1232. <td>10</td>
  1233. <td>1</td>
  1234. <td>-</td>
  1235. <td>-</td>
  1236. <td>-</td>
  1237. <td>-</td>
  1238. <td>-</td>
  1239. <td>-</td>
  1240. <td>10</td>
  1241. <td>1</td>
  1242. </tr>
  1243. <tr>
  1244. <th class="custom">1993-94 - Juventus</th>
  1245. <td>A</td>
  1246. <td>11</td>
  1247. <td>5</td>
  1248. <td>1</td>
  1249. <td>-</td>
  1250. <td>2</td>
  1251. <td>-</td>
  1252. <td>-</td>
  1253. <td>-</td>
  1254. <td>14</td>
  1255. <td>5</td>
  1256. </tr>
  1257. <tr>
  1258. <th class="custom">1994-95 - Juventus</th>
  1259. <td>A</td>
  1260. <td>29</td>
  1261. <td>8</td>
  1262. <td>10</td>
  1263. <td>1</td>
  1264. <td>11</td>
  1265. <td>1</td>
  1266. <td>-</td>
  1267. <td>-</td>
  1268. <td>50</td>
  1269. <td>10</td>
  1270. </tr>
  1271. <tr>
  1272. <th class="custom">1995-96 - Juventus</th>
  1273. <td>A</td>
  1274. <td>29</td>
  1275. <td>6</td>
  1276. <td>3</td>
  1277. <td>1</td>
  1278. <td>11</td>
  1279. <td>6</td>
  1280. <td>-</td>
  1281. <td>-</td>
  1282. <td>43</td>
  1283. <td>13</td>
  1284. </tr>
  1285. <tr>
  1286. <th class="custom">1996-97 - Juventus</th>
  1287. <td>A</td>
  1288. <td>22</td>
  1289. <td>8</td>
  1290. <td>4</td>
  1291. <td>-</td>
  1292. <td>8</td>
  1293. <td>6</td>
  1294. <td>1</td>
  1295. <td>1</td>
  1296. <td>35</td>
  1297. <td>15</td>
  1298. </tr>
  1299. <tr>
  1300. <th class="custom">1997-98 - Juventus</th>
  1301. <td>A</td>
  1302. <td>32</td>
  1303. <td>21</td>
  1304. <td>5</td>
  1305. <td>1</td>
  1306. <td>10</td>
  1307. <td>10</td>
  1308. <td>-</td>
  1309. <td>-</td>
  1310. <td>47</td>
  1311. <td>32</td>
  1312. </tr>
  1313. <tr>
  1314. <th class="custom">1998-99 - Juventus</th>
  1315. <td>A</td>
  1316. <td>8</td>
  1317. <td>2</td>
  1318. <td>2</td>
  1319. <td>1</td>
  1320. <td>4</td>
  1321. <td>-</td>
  1322. <td>-</td>
  1323. <td>-</td>
  1324. <td>14</td>
  1325. <td>3</td>
  1326. </tr>
  1327. <tr>
  1328. <th class="custom">1999-00 - Juventus</th>
  1329. <td>A</td>
  1330. <td>34</td>
  1331. <td>9</td>
  1332. <td>2</td>
  1333. <td>1</td>
  1334. <td>9</td>
  1335. <td>2</td>
  1336. <td>-</td>
  1337. <td>-</td>
  1338. <td>45</td>
  1339. <td>12</td>
  1340. </tr>
  1341. <tr>
  1342. <th class="custom">2000-01 - Juventus</th>
  1343. <td>A</td>
  1344. <td>25</td>
  1345. <td>9</td>
  1346. <td>2</td>
  1347. <td>-</td>
  1348. <td>6</td>
  1349. <td>-</td>
  1350. <td>-</td>
  1351. <td>-</td>
  1352. <td>33</td>
  1353. <td>9</td>
  1354. </tr>
  1355. <tr>
  1356. <th class="custom">2001-02 - Juventus</th>
  1357. <td>A</td>
  1358. <td>32</td>
  1359. <td>16</td>
  1360. <td>4</td>
  1361. <td>1</td>
  1362. <td>10</td>
  1363. <td>4</td>
  1364. <td>-</td>
  1365. <td>-</td>
  1366. <td>46</td>
  1367. <td>21</td>
  1368. </tr>
  1369. <tr>
  1370. <th class="custom">2002-03 - Juventus</th>
  1371. <td>A</td>
  1372. <td>24</td>
  1373. <td>16</td>
  1374. <td>1</td>
  1375. <td>2</td>
  1376. <td>13</td>
  1377. <td>5</td>
  1378. <td>-</td>
  1379. <td>-</td>
  1380. <td>38</td>
  1381. <td>23</td>
  1382. </tr>
  1383. <tr>
  1384. <th class="custom">2003-04 - Juventus</th>
  1385. <td>A</td>
  1386. <td>22</td>
  1387. <td>8</td>
  1388. <td>5</td>
  1389. <td>3</td>
  1390. <td>4</td>
  1391. <td>3</td>
  1392. <td>-</td>
  1393. <td>-</td>
  1394. <td>31</td>
  1395. <td>14</td>
  1396. </tr>
  1397. <tr>
  1398. <th class="custom">2004-05 - Juventus</th>
  1399. <td>A</td>
  1400. <td>30</td>
  1401. <td>14</td>
  1402. <td>1</td>
  1403. <td>-</td>
  1404. <td>10</td>
  1405. <td>3</td>
  1406. <td>-</td>
  1407. <td>-</td>
  1408. <td>41</td>
  1409. <td>17</td>
  1410. </tr>
  1411. <tr>
  1412. <th class="custom">2005-06 - Juventus</th>
  1413. <td>A</td>
  1414. <td>33</td>
  1415. <td>12</td>
  1416. <td>5</td>
  1417. <td>5</td>
  1418. <td>7</td>
  1419. <td>3</td>
  1420. <td>-</td>
  1421. <td>-</td>
  1422. <td>45</td>
  1423. <td>20</td>
  1424. </tr>
  1425. <tr>
  1426. <th class="custom">2006-07 - Juventus</th>
  1427. <td>B</td>
  1428. <td>35</td>
  1429. <td>20</td>
  1430. <td>2</td>
  1431. <td>3</td>
  1432. <td>-</td>
  1433. <td>-</td>
  1434. <td>-</td>
  1435. <td>-</td>
  1436. <td>37</td>
  1437. <td>23</td>
  1438. </tr>
  1439. <tr>
  1440. <th class="custom">2007-08 - Juventus</th>
  1441. <td>A</td>
  1442. <td>37</td>
  1443. <td>21</td>
  1444. <td>4</td>
  1445. <td>3</td>
  1446. <td>-</td>
  1447. <td>-</td>
  1448. <td>-</td>
  1449. <td>-</td>
  1450. <td>41</td>
  1451. <td>24</td>
  1452. </tr>
  1453. </tbody>
  1454. </table>
  1455. </div>
  1456. <h3>JS</h3>
  1457. <div class="code javascript"><!--jQuery.getJSON(
  1458. "../json/delpiero.json",
  1459. //wait json data
  1460. function(json){
  1461. var data_custom = [];
  1462. for(var x= 0;x< jQuery("#jgcustomdata").find("tbody > tr").size();x++){
  1463. data_custom.push(jQuery.map( jQuery("#jgcustomdata").find("tbody > tr:eq(" + x + ") > td"),
  1464. function(td,index){
  1465. if(index % 11 == 1 || index % 11 == 2){
  1466. if(parseInt(jQuery(td).text()))
  1467. return parseInt(jQuery(td).text());
  1468. else
  1469. return 0;
  1470. }
  1471. }
  1472. ));
  1473. }
  1474. var axis_custom = jQuery.map( jQuery("#jgcustomdata").find("tbody > tr > th.custom"),
  1475. function(th) { return jQuery(th).text(); }
  1476. );
  1477. var legend_custom = ["presenze", "gol"];
  1478. json.axis_labels = axis_custom;
  1479. json.data = data_custom;
  1480. json.legend = legend_custom;
  1481. jQuery("#jgcustomdata").jgtable(json);
  1482. var data_custom = [];
  1483. for(var x= 0;x< jQuery("#jgcustomdata").find("tbody > tr").size();x++){
  1484. data_custom.push(jQuery.map( jQuery("#jgcustomdata").find("tbody > tr:eq(" + x + ") > td"),
  1485. function(td,index){
  1486. if(index % 11 == 9 || index % 11 == 10){
  1487. if(parseInt(jQuery(td).text()))
  1488. return parseInt(jQuery(td).text());
  1489. else
  1490. return 0;
  1491. }
  1492. }
  1493. ));
  1494. }
  1495. json.data = data_custom;
  1496. json.title = 'Gol e presenze totali';
  1497. jQuery("#jgcustomdata").jgtable(json);
  1498. });--></div>
  1499. <h3>Options in json file</h3>
  1500. <div class="code javascript"><!--{
  1501. size:'450x600',
  1502. type:'bhg',
  1503. axis_step:1,
  1504. title:'Gol e presenze in campionato',
  1505. title_color:'000000',
  1506. title_size:16,
  1507. bar_width:10,
  1508. bar_spacing:0,
  1509. colors:['5131c9','da1b1b'],
  1510. grid:true,
  1511. grid_x:5,
  1512. grid_y:5,
  1513. grid_line:5,
  1514. grid_blank:5
  1515. }--></div>
  1516. <h3>Html Table</h3>
  1517. <div class="code html"><!--<div id="jgcustomdata">
  1518. <table>
  1519. <thead>
  1520. <tr>
  1521. <th colspan="2">Cronologia</th>
  1522. <th colspan="2">Campionato</th>
  1523. <th colspan="2">Coppe di Lega<small><sup>*</sup></small></th>
  1524. <th colspan="2">Coppe Europee<small><sup>**</sup></small></th>
  1525. <th colspan="2">Coppe Internazionali<small><sup>***</sup></small></th>
  1526. <th colspan="2">Totale</th>
  1527. </tr>
  1528. <tr>
  1529. <th>Stagione - Squadra</th>
  1530. <th>Serie</th>
  1531. <th>Presenze</th>
  1532. <th>Gol</th>
  1533. <th>Presenze</th>
  1534. <th>Gol</th>
  1535. <th>Presenze</th>
  1536. <th>Gol</th>
  1537. <th>Presenze</th>
  1538. <th>Gol</th>
  1539. <th>Presenze</th>
  1540. <th>Gol</th>
  1541. </tr>
  1542. </thead>
  1543. <tfoot>
  1544. <tr>
  1545. <th colspan="2">Totale</th>
  1546. <th>417</th>
  1547. <th>176</th>
  1548. <th>51</th>
  1549. <th>22</th>
  1550. <th>105</th>
  1551. <th>43</th>
  1552. <th>1</th>
  1553. <th>1</th>
  1554. <th>574</th>
  1555. <th>242</th>
  1556. </tr>
  1557. </tfoot>
  1558. <tbody>
  1559. <tr>
  1560. <th class="custom">1991-92 - Padova</th>
  1561. <td>B</td>
  1562. <td>4</td>
  1563. <td>-</td>
  1564. <td>-</td>
  1565. <td>-</td>
  1566. <td>-</td>
  1567. <td>-</td>
  1568. <td>-</td>
  1569. <td>-</td>
  1570. <td>4</td>
  1571. <td>-</td>
  1572. </tr>
  1573. <tr>
  1574. <th class="custom">1992-93 - Juventus</th>
  1575. <td>B</td>
  1576. <td>10</td>
  1577. <td>1</td>
  1578. <td>-</td>
  1579. <td>-</td>
  1580. <td>-</td>
  1581. <td>-</td>
  1582. <td>-</td>
  1583. <td>-</td>
  1584. <td>10</td>
  1585. <td>1</td>
  1586. </tr>
  1587. <tr>
  1588. <th class="custom">1993-94 - Juventus</th>
  1589. <td>A</td>
  1590. <td>11</td>
  1591. <td>5</td>
  1592. <td>1</td>
  1593. <td>-</td>
  1594. <td>2</td>
  1595. <td>-</td>
  1596. <td>-</td>
  1597. <td>-</td>
  1598. <td>14</td>
  1599. <td>5</td>
  1600. </tr>
  1601. <tr>
  1602. <th class="custom">1994-95 - Juventus</th>
  1603. <td>A</td>
  1604. <td>29</td>
  1605. <td>8</td>
  1606. <td>10</td>
  1607. <td>1</td>
  1608. <td>11</td>
  1609. <td>1</td>
  1610. <td>-</td>
  1611. <td>-</td>
  1612. <td>50</td>
  1613. <td>10</td>
  1614. </tr>
  1615. <tr>
  1616. <th class="custom">1995-96 - Juventus</th>
  1617. <td>A</td>
  1618. <td>29</td>
  1619. <td>6</td>
  1620. <td>3</td>
  1621. <td>1</td>
  1622. <td>11</td>
  1623. <td>6</td>
  1624. <td>-</td>
  1625. <td>-</td>
  1626. <td>43</td>
  1627. <td>13</td>
  1628. </tr>
  1629. <tr>
  1630. <th class="custom">1996-97 - Juventus</th>
  1631. <td>A</td>
  1632. <td>22</td>
  1633. <td>8</td>
  1634. <td>4</td>
  1635. <td>-</td>
  1636. <td>8</td>
  1637. <td>6</td>
  1638. <td>1</td>
  1639. <td>1</td>
  1640. <td>35</td>
  1641. <td>15</td>
  1642. </tr>
  1643. <tr>
  1644. <th class="custom">1997-98 - Juventus</th>
  1645. <td>A</td>
  1646. <td>32</td>
  1647. <td>21</td>
  1648. <td>5</td>
  1649. <td>1</td>
  1650. <td>10</td>
  1651. <td>10</td>
  1652. <td>-</td>
  1653. <td>-</td>
  1654. <td>47</td>
  1655. <td>32</td>
  1656. </tr>
  1657. <tr>
  1658. <th class="custom">1998-99 - Juventus</th>
  1659. <td>A</td>
  1660. <td>8</td>
  1661. <td>2</td>
  1662. <td>2</td>
  1663. <td>1</td>
  1664. <td>4</td>
  1665. <td>-</td>
  1666. <td>-</td>
  1667. <td>-</td>
  1668. <td>14</td>
  1669. <td>3</td>
  1670. </tr>
  1671. <tr>
  1672. <th class="custom">1999-00 - Juventus</th>
  1673. <td>A</td>
  1674. <td>34</td>
  1675. <td>9</td>
  1676. <td>2</td>
  1677. <td>1</td>
  1678. <td>9</td>
  1679. <td>2</td>
  1680. <td>-</td>
  1681. <td>-</td>
  1682. <td>45</td>
  1683. <td>12</td>
  1684. </tr>
  1685. <tr>
  1686. <th class="custom">2000-01 - Juventus</th>
  1687. <td>A</td>
  1688. <td>25</td>
  1689. <td>9</td>
  1690. <td>2</td>
  1691. <td>-</td>
  1692. <td>6</td>
  1693. <td>-</td>
  1694. <td>-</td>
  1695. <td>-</td>
  1696. <td>33</td>
  1697. <td>9</td>
  1698. </tr>
  1699. <tr>
  1700. <th class="custom">2001-02 - Juventus</th>
  1701. <td>A</td>
  1702. <td>32</td>
  1703. <td>16</td>
  1704. <td>4</td>
  1705. <td>1</td>
  1706. <td>10</td>
  1707. <td>4</td>
  1708. <td>-</td>
  1709. <td>-</td>
  1710. <td>46</td>
  1711. <td>21</td>
  1712. </tr>
  1713. <tr>
  1714. <th class="custom">2002-03 - Juventus</th>
  1715. <td>A</td>
  1716. <td>24</td>
  1717. <td>16</td>
  1718. <td>1</td>
  1719. <td>2</td>
  1720. <td>13</td>
  1721. <td>5</td>
  1722. <td>-</td>
  1723. <td>-</td>
  1724. <td>38</td>
  1725. <td>23</td>
  1726. </tr>
  1727. <tr>
  1728. <th class="custom">2003-04 - Juventus</th>
  1729. <td>A</td>
  1730. <td>22</td>
  1731. <td>8</td>
  1732. <td>5</td>
  1733. <td>3</td>
  1734. <td>4</td>
  1735. <td>3</td>
  1736. <td>-</td>
  1737. <td>-</td>
  1738. <td>31</td>
  1739. <td>14</td>
  1740. </tr>
  1741. <tr>
  1742. <th class="custom">2004-05 - Juventus</th>
  1743. <td>A</td>
  1744. <td>30</td>
  1745. <td>14</td>
  1746. <td>1</td>
  1747. <td>-</td>
  1748. <td>10</td>
  1749. <td>3</td>
  1750. <td>-</td>
  1751. <td>-</td>
  1752. <td>41</td>
  1753. <td>17</td>
  1754. </tr>
  1755. <tr>
  1756. <th class="custom">2005-06 - Juventus</th>
  1757. <td>A</td>
  1758. <td>33</td>
  1759. <td>12</td>
  1760. <td>5</td>
  1761. <td>5</td>
  1762. <td>7</td>
  1763. <td>3</td>
  1764. <td>-</td>
  1765. <td>-</td>
  1766. <td>45</td>
  1767. <td>20</td>
  1768. </tr>
  1769. <tr>
  1770. <th class="custom">2006-07 - Juventus</th>
  1771. <td>B</td>
  1772. <td>35</td>
  1773. <td>20</td>
  1774. <td>2</td>
  1775. <td>3</td>
  1776. <td>-</td>
  1777. <td>-</td>
  1778. <td>-</td>
  1779. <td>-</td>
  1780. <td>37</td>
  1781. <td>23</td>
  1782. </tr>
  1783. <tr>
  1784. <th class="custom">2007-08 - Juventus</th>
  1785. <td>A</td>
  1786. <td>37</td>
  1787. <td>21</td>
  1788. <td>4</td>
  1789. <td>3</td>
  1790. <td>-</td>
  1791. <td>-</td>
  1792. <td>-</td>
  1793. <td>-</td>
  1794. <td>41</td>
  1795. <td>24</td>
  1796. </tr>
  1797. </tbody>
  1798. </table>
  1799. </div>--></div>
  1800. </div>
  1801. </div>
  1802. <!--todo: copy events -->
  1803. <div id="yslider-code" class="ycodaslider">
  1804. <a class="javascript" href="../../jgcharts.js" class="tracking {label : '/jgcharts/code/jgcharts'}">jGCharts 1.0</a>
  1805. <a class="javascript" href="../../plugins/jgtable/jgtable.js" class="tracking {label : '/jgcharts/code/jgtable'}">jGTable 1.0</a>
  1806. </div>
  1807. <div id="analytics" class="UA-258871-1 {host: 'maxb.net'}"></div><!--debug:true-->
  1808. </body>
  1809. </html>