index.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
  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>jgcharts - jQuery Google Charts</title>
  6. <meta http-equiv="refresh" content="0; url=../include/demo/">
  7. <meta http-equiv="Content-Language" content="en-us" />
  8. <meta name="author" content="Massimiliano Balestrieri" />
  9. <script type="text/javascript" src="../lib/jquery/jquery-1.3.1.min.js"></script>
  10. <script type="text/javascript" src="../lib/farbtastic/farbtastic.js"></script>
  11. <link rel="stylesheet" href="../lib/farbtastic/farbtastic.css" type="text/css" />
  12. <script type="text/javascript" src="../lib/metadata/jquery.metadata.pack.js"></script>
  13. <script type="text/javascript" src="../lib/sugar-arrays.js"></script>
  14. <script type="text/javascript" src="../lib/iterators.js"></script>
  15. <script type="text/javascript" src="../lib/jquery.tablelib.js"></script>
  16. <script type="text/javascript" src="../jgcharts.pack.js"></script>
  17. <script type="text/javascript" src="../plugins/table/jgtable.pack.js"></script>
  18. <script type="text/javascript"><!--
  19. jQuery(document).ready(function(){
  20. jQuery(".jgtable").jgtable();
  21. jQuery(".example h1").click(function(){
  22. jQuery(this).parent().find("div, table").toggle();
  23. })
  24. .trigger("click");
  25. });
  26. --></script>
  27. <style type="text/css">
  28. body{font-family:Trebuchet MS,Arial,FreeSans,sans-serif;}
  29. .example h1{border:1px dashed #000;padding:3px;}
  30. table {width:100%}
  31. table tbody tr td,table tbody tr th,table thead tr th
  32. {text-align:left;font-weight:normal;font-size:80%;border:1px dashed #000; padding:3px; margin:1px}
  33. </style>
  34. </head>
  35. <body>
  36. <h1>JQuery Google Charts 0.91 - Examples (<a href="dashboard.html">try dashboard for write metadata</a>)</h1>
  37. <div class="example">
  38. <h1>Example 1</h1>
  39. <table id="table-0" class="jgtable {size:'650x450',type:'lc',axis_step:10,title:false,title_color:'000000',title_size:10,bar_width:30,bar_spacing:1,fillarea:true,fillbottom:true,filltop:true,colors:['FFFF00','FFCC00','99CC00'],lines:[[1,1,0],[1,1,0],[1,1,0]],bg:false,bg_type:'solid',bg_angle:90,bg_offset:false,bg_width:20,bg_trasparency:false,chbg:false,chbg_type:'solid',chbg_angle:90,chbg_offset:false,chbg_width:20,chbg_trasparency:false,grid:false,grid_x:10,grid_y:10,grid_line:10,grid_blank:10}">
  40. <thead>
  41. <tr>
  42. <th></th>
  43. <th class="serie">CA</th>
  44. <th class="serie">DF</th>
  45. </tr>
  46. </thead>
  47. <tbody>
  48. <tr>
  49. <th class="serie">01-03</th>
  50. <td>105.7</td>
  51. <td>97.9</td>
  52. </tr>
  53. <tr>
  54. <th class="serie">02-03</th>
  55. <td>108.1</td>
  56. <td>101.6</td>
  57. </tr>
  58. <tr>
  59. <th class="serie">03-03</th>
  60. <td>110.7</td>
  61. <td>102.9</td>
  62. </tr>
  63. <tr>
  64. <th class="serie">04-03</th>
  65. <td>111.0</td>
  66. <td>93.7</td>
  67. </tr>
  68. <tr>
  69. <th class="serie">05-03</th>
  70. <td>110.0</td>
  71. <td>89.8</td>
  72. </tr>
  73. <tr>
  74. <th class="serie">06-03</th>
  75. <td>109.0</td>
  76. <td>90.7</td>
  77. </tr>
  78. <tr>
  79. <th class="serie">07-03</th>
  80. <td>107.5</td>
  81. <td>93.0</td>
  82. </tr>
  83. <tr>
  84. <th class="serie">08-03</th>
  85. <td>106.1</td>
  86. <td>94.5</td>
  87. </tr>
  88. <tr>
  89. <th class="serie">09-03</th>
  90. <td>104.3</td>
  91. <td>91.9</td>
  92. </tr>
  93. <tr>
  94. <th class="serie">10-03</th>
  95. <td>102.0</td>
  96. <td>93.9</td>
  97. </tr>
  98. <tr>
  99. <th class="serie">11-03</th>
  100. <td>102.8</td>
  101. <td>93.6</td>
  102. </tr>
  103. <tr>
  104. <th class="serie">12-03</th>
  105. <td>103.8</td>
  106. <td>92.6</td>
  107. </tr>
  108. <tr>
  109. <th class="serie">01-04</th>
  110. <td>102.9</td>
  111. <td>94.0</td>
  112. </tr>
  113. <tr>
  114. <th class="serie">02-04</th>
  115. <td>102.1</td>
  116. <td>92.7</td>
  117. </tr>
  118. <tr>
  119. <th class="serie">03-04</th>
  120. <td>100.6</td>
  121. <td>96.0</td>
  122. </tr>
  123. <tr>
  124. <th class="serie">04-04</th>
  125. <td>101.7</td>
  126. <td>97.9</td>
  127. </tr>
  128. <tr>
  129. <th class="serie">05-04</th>
  130. <td>101.8</td>
  131. <td>105.0</td>
  132. </tr>
  133. <tr>
  134. <th class="serie">06-04</th>
  135. <td>103.3</td>
  136. <td>104.1</td>
  137. </tr>
  138. <tr>
  139. <th class="serie">07-04</th>
  140. <td>104.0</td>
  141. <td>105.1</td>
  142. </tr>
  143. <tr>
  144. <th class="serie">08-04</th>
  145. <td>103.7</td>
  146. <td>108.1</td>
  147. </tr>
  148. <tr>
  149. <th class="serie">09-04</th>
  150. <td>108.4</td>
  151. <td>108.4</td>
  152. </tr>
  153. <tr>
  154. <th class="serie">10-04</th>
  155. <td>109.4</td>
  156. <td>113.8</td>
  157. </tr>
  158. <tr>
  159. <th class="serie">11-04</th>
  160. <td>112.0</td>
  161. <td>109.1</td>
  162. </tr>
  163. <tr>
  164. <th class="serie">12-04</th>
  165. <td>112.6</td>
  166. <td>106.3</td>
  167. </tr>
  168. <tr>
  169. <th class="serie">01-05</th>
  170. <td>115.5</td>
  171. <td>106.7</td>
  172. </tr>
  173. <tr>
  174. <th class="serie">02-05</th>
  175. <td>115.7</td>
  176. <td>108.8</td>
  177. </tr>
  178. <tr>
  179. <th class="serie">03-05</th>
  180. <td>114.7</td>
  181. <td>118.8</td>
  182. </tr>
  183. <tr>
  184. <th class="serie">04-05</th>
  185. <td>115.9</td>
  186. <td>120.4</td>
  187. </tr>
  188. <tr>
  189. <th class="serie">05-05</th>
  190. <td>116.2</td>
  191. <td>115.9</td>
  192. </tr>
  193. <tr>
  194. <th class="serie">06-05</th>
  195. <td>118.0</td>
  196. <td>124.7</td>
  197. </tr>
  198. <tr>
  199. <th class="serie">07-05</th>
  200. <td>123.3</td>
  201. <td>126.5</td>
  202. </tr>
  203. <tr>
  204. <th class="serie">08-05</th>
  205. <td>127.6</td>
  206. <td>131.6</td>
  207. </tr>
  208. <tr>
  209. <th class="serie">09-05</th>
  210. <td>130.3</td>
  211. <td>134.0</td>
  212. </tr>
  213. <tr>
  214. <th class="serie">10-05</th>
  215. <td>135.5</td>
  216. <td>135.7</td>
  217. </tr>
  218. <tr>
  219. <th class="serie">11-05</th>
  220. <td>138.2</td>
  221. <td>126.4</td>
  222. </tr>
  223. <tr>
  224. <th class="serie">12-05</th>
  225. <td>139.6</td>
  226. <td>127.4</td>
  227. </tr>
  228. <tr>
  229. <th class="serie">01-06</th>
  230. <td>145.1</td>
  231. <td>131.0</td>
  232. </tr>
  233. <tr>
  234. <th class="serie">02-06</th>
  235. <td>146.4</td>
  236. <td>129.9</td>
  237. </tr>
  238. <tr>
  239. <th class="serie">03-06</th>
  240. <td>147.1</td>
  241. <td>133.7</td>
  242. </tr>
  243. <tr>
  244. <th class="serie">04-06</th>
  245. <td>149.0</td>
  246. <td>138.4</td>
  247. </tr>
  248. <tr>
  249. <th class="serie">05-06</th>
  250. <td>150.3</td>
  251. <td>141.0</td>
  252. </tr>
  253. <tr>
  254. <th class="serie">06-06</th>
  255. <td>151.3</td>
  256. <td>139.3</td>
  257. </tr>
  258. <tr>
  259. <th class="serie">07-06</th>
  260. <td>153.4</td>
  261. <td>145.3</td>
  262. </tr>
  263. <tr>
  264. <th class="serie">08-06</th>
  265. <td>152.7</td>
  266. <td>142.9</td>
  267. </tr>
  268. <tr>
  269. <th class="serie">09-06</th>
  270. <td>152.9</td>
  271. <td>129.2</td>
  272. </tr>
  273. <tr>
  274. <th class="serie">10-06</th>
  275. <td>152.2</td>
  276. <td>126.0</td>
  277. </tr>
  278. <tr>
  279. <th class="serie">11-06</th>
  280. <td>151.9</td>
  281. <td>124.8</td>
  282. </tr>
  283. <tr>
  284. <th class="serie">12-06</th>
  285. <td>150.1</td>
  286. <td>125.9</td>
  287. </tr>
  288. <tr>
  289. <th class="serie">01-07</th>
  290. <td>148.2</td>
  291. <td>118.9</td>
  292. </tr>
  293. <tr>
  294. <th class="serie">02-07</th>
  295. <td>145.3</td>
  296. <td>122.9</td>
  297. </tr>
  298. <tr>
  299. <th class="serie">03-07</th>
  300. <td>142.9</td>
  301. <td>127.7</td>
  302. </tr>
  303. <tr>
  304. <th class="serie">04-07</th>
  305. <td>142.6</td>
  306. <td>134.4</td>
  307. </tr>
  308. <tr>
  309. <th class="serie">05-07</th>
  310. <td>144.0</td>
  311. <td>138.5</td>
  312. </tr>
  313. <tr>
  314. <th class="serie">06-07</th>
  315. <td>145.5</td>
  316. <td>138.7</td>
  317. </tr>
  318. <tr>
  319. <th class="serie">07-07</th>
  320. <td>147.2</td>
  321. <td>141.8</td>
  322. </tr>
  323. <tr>
  324. <th class="serie">08-07</th>
  325. <td>150.0</td>
  326. <td>139.2</td>
  327. </tr>
  328. <tr>
  329. <th class="serie">09-07</th>
  330. <td>153.8</td>
  331. <td>145.6</td>
  332. </tr>
  333. <tr>
  334. <th class="serie">10-07</th>
  335. <td>155.4</td>
  336. <td>147.6</td>
  337. </tr>
  338. <tr>
  339. <th class="serie">11-07</th>
  340. <td>157.0</td>
  341. <td>157.9</td>
  342. </tr>
  343. <tr>
  344. <th class="serie">12-07</th>
  345. <td>158.4</td>
  346. <td>156.2</td>
  347. </tr>
  348. <tr>
  349. <th class="serie">01-08</th>
  350. <td>162.8</td>
  351. <td>153.9</td>
  352. </tr>
  353. <tr>
  354. <th class="serie">02-08</th>
  355. <td>162.8</td>
  356. <td>158.6</td>
  357. </tr>
  358. <tr>
  359. <th class="serie">03-08</th>
  360. <td>164.7</td>
  361. <td>166.3</td>
  362. </tr>
  363. <tr>
  364. <th class="serie">04-08</th>
  365. <td>168.5</td>
  366. <td>165.8</td>
  367. </tr>
  368. </tbody>
  369. </table>
  370. </div>
  371. <div class="example">
  372. <h1>Example 2</h1>
  373. <table id="table-1" class="jgtable {size:'650x350',type:'bhg',axis_step:1,title:'Example 2',title_color:'000000',title_size:16,bar_width:30,bar_spacing:2,fillarea:true,fillbottom:true,filltop:false,colors:['5131c9','FFCC00','da1b1b'],lines:[[1,1,0],[1,1,0],[1,1,0]],bg:'FFFFFF',bg_type:'gradient',bg_angle:90,bg_offset:'6d6969',bg_width:20,bg_trasparency:false,chbg:'FFFFFF',chbg_type:'solid',chbg_angle:90,chbg_offset:'f8fdbf',chbg_width:10,chbg_trasparency:false,grid:true,grid_x:7,grid_y:10,grid_line:0,grid_blank:0}">
  374. <thead>
  375. <tr>
  376. <th>Anno</th>
  377. <th class="serie">Data 1</th>
  378. <th class="serie">Data 2</th>
  379. <th class="serie">Data 3</th>
  380. </tr>
  381. </thead>
  382. <tbody>
  383. <tr>
  384. <th class="serie">2001</th>
  385. <td>153</td>
  386. <td>60</td>
  387. <td>52</td>
  388. </tr>
  389. <tr>
  390. <th class="serie">2002</th>
  391. <td>113</td>
  392. <td>70</td>
  393. <td>60</td>
  394. </tr>
  395. <tr>
  396. <th class="serie">2003</th>
  397. <td>120</td>
  398. <td>80</td>
  399. <td>40</td>
  400. </tr>
  401. </tbody>
  402. </table>
  403. </div>
  404. <div class="example">
  405. <h1>Example 3</h1>
  406. <table id="table-2" class="jgtable {size:'400x500',type:'bvg',axis_step:1,title:'Example 3',title_color:'c81e3d',title_size:16,bar_width:30,bar_spacing:2,fillarea:true,fillbottom:true,filltop:false,colors:['1aa22f','FFCC00','da1b1b'],lines:[[1,1,0],[1,1,0],[1,1,0]],bg:'FFFFFF',bg_type:'stripes',bg_angle:90,bg_offset:'b7b4b4',bg_width:10,bg_trasparency:false,chbg:'000000',chbg_type:'solid',chbg_angle:90,chbg_offset:'f8fdbf',chbg_width:10,chbg_trasparency:false,grid:false,grid_x:7,grid_y:10,grid_line:0,grid_blank:0}">
  407. <thead>
  408. <tr>
  409. <th>Anno</th>
  410. <th class="serie">Data 1</th>
  411. <th class="serie">Data 2</th>
  412. <th class="serie">Data 3</th>
  413. </tr>
  414. </thead>
  415. <tbody>
  416. <tr>
  417. <th class="serie">2001</th>
  418. <td>153</td>
  419. <td>60</td>
  420. <td>52</td>
  421. </tr>
  422. <tr>
  423. <th class="serie">2002</th>
  424. <td>113</td>
  425. <td>70</td>
  426. <td>60</td>
  427. </tr>
  428. <tr>
  429. <th class="serie">2003</th>
  430. <td>120</td>
  431. <td>80</td>
  432. <td>40</td>
  433. </tr>
  434. </tbody>
  435. </table>
  436. </div>
  437. <div class="example">
  438. <h1>Example 4</h1>
  439. <table id="table-3" class="jgtable {size:'700x350',type:'p3',axis_step:1,title:'Example 4',title_color:'28179b',title_size:16,bar_width:30,bar_spacing:2,fillarea:true,fillbottom:true,filltop:false,colors:['a21a9c','FFCC00','da1b1b'],lines:[[1,1,0],[1,1,0],[1,1,0]],bg:'FFFFFF',bg_type:'gradient',bg_angle:90,bg_offset:'b7b4b4',bg_width:10,bg_trasparency:false,chbg:'f7f7f7',chbg_type:'gradient',chbg_angle:90,chbg_offset:'e81711',chbg_width:10,chbg_trasparency:false,grid:false,grid_x:7,grid_y:10,grid_line:0,grid_blank:0}">
  440. <thead>
  441. <tr>
  442. <th>Anno</th>
  443. <th class="serie">Data 4</th>
  444. <th class="serie">Data 5</th>
  445. </tr>
  446. </thead>
  447. <tbody>
  448. <tr>
  449. <th class="serie">2001</th>
  450. <td>40</td>
  451. <td>30</td>
  452. </tr>
  453. <tr>
  454. <th class="serie">2000</th>
  455. <td>30</td>
  456. <td>40</td>
  457. </tr>
  458. </tbody>
  459. </table>
  460. </div>
  461. <div class="example">
  462. <h1>Example 5</h1>
  463. <table id="table-4" class="jgtable {size:'450x350',type:'p',axis_step:1,title:'Example 5',title_color:'28179b',title_size:16,bar_width:30,bar_spacing:2,fillarea:true,fillbottom:true,filltop:false,colors:['a21a9c','FFCC00','da1b1b'],lines:[[1,1,0],[1,1,0],[1,1,0]],bg:'FFFFFF',bg_type:'gradient',bg_angle:90,bg_offset:'b7b4b4',bg_width:10,bg_trasparency:false,chbg:'f7f7f7',chbg_type:'gradient',chbg_angle:90,chbg_offset:'e81711',chbg_width:10,chbg_trasparency:false,grid:false,grid_x:7,grid_y:10,grid_line:0,grid_blank:0}">
  464. <thead>
  465. <tr>
  466. <th>Anno</th>
  467. <th class="serie">Data 4</th>
  468. <th class="serie">Data 5</th>
  469. </tr>
  470. </thead>
  471. <tbody>
  472. <tr>
  473. <th class="serie">2001</th>
  474. <td>40</td>
  475. <td>30</td>
  476. </tr>
  477. <tr>
  478. <th class="serie">2000</th>
  479. <td>30</td>
  480. <td>40</td>
  481. </tr>
  482. </tbody>
  483. </table>
  484. </div>
  485. <div class="example">
  486. <h1>Example 6</h1>
  487. <table id="table-5" class="jgtable {size:'650x450',type:'lc',axis_step:1,title:false,title_color:'FFFFFF',title_size:10,bar_width:30,bar_spacing:1,fillarea:false,fillbottom:true,filltop:true,colors:['f04242','FFCC00','99CC00'],lines:[[12,9,7],[14,9,7],[13,9,7]],bg:'dca0ee',bg_type:'solid',bg_angle:90,bg_offset:'FFFFFF',bg_width:20,bg_trasparency:false,chbg:'FFFFFF',chbg_type:'solid',chbg_angle:90,chbg_offset:'FFFFFF',chbg_width:20,chbg_trasparency:false,grid:true,grid_x:3,grid_y:3,grid_line:0,grid_blank:0}">
  488. <thead>
  489. <tr>
  490. <th>Anno</th>
  491. <th class="serie">Data 1</th>
  492. <th class="serie">Data 2</th>
  493. <th class="serie">Data 3</th>
  494. </tr>
  495. </thead>
  496. <tbody>
  497. <tr>
  498. <th class="serie">2001</th>
  499. <td>153</td>
  500. <td>60</td>
  501. <td>52</td>
  502. </tr>
  503. <tr>
  504. <th class="serie">2002</th>
  505. <td>113</td>
  506. <td>70</td>
  507. <td>60</td>
  508. </tr>
  509. <tr>
  510. <th class="serie">2003</th>
  511. <td>120</td>
  512. <td>80</td>
  513. <td>40</td>
  514. </tr>
  515. </tbody>
  516. </table>
  517. </div>
  518. <div class="example">
  519. <h1>Example 7</h1>
  520. <table id="table-6" class="jgtable {size:'650x450',type:'bhs',axis_step:1,title:false,title_color:'FFFFFF',title_size:10,bar_width:90,bar_spacing:11,fillarea:false,fillbottom:true,filltop:true,colors:['f04242','FFCC00','99CC00'],lines:[[12,9,7],[14,9,7],[13,9,7]],bg:'dca0ee',bg_type:'gradient',bg_angle:40,bg_offset:'FFFFFF',bg_width:20,bg_trasparency:false,chbg:'bfbfbf',chbg_type:'stripes',chbg_angle:0,chbg_offset:'f5f5f5',chbg_width:10,chbg_trasparency:false,grid:false,grid_x:3,grid_y:3,grid_line:0,grid_blank:0}">
  521. <thead>
  522. <tr>
  523. <th>Anno</th>
  524. <th class="serie">Data 1</th>
  525. <th class="serie">Data 2</th>
  526. <th class="serie">Data 3</th>
  527. </tr>
  528. </thead>
  529. <tbody>
  530. <tr>
  531. <th class="serie">2001</th>
  532. <td>153</td>
  533. <td>60</td>
  534. <td>52</td>
  535. </tr>
  536. <tr>
  537. <th class="serie">2002</th>
  538. <td>113</td>
  539. <td>70</td>
  540. <td>60</td>
  541. </tr>
  542. <tr>
  543. <th class="serie">2003</th>
  544. <td>120</td>
  545. <td>80</td>
  546. <td>40</td>
  547. </tr>
  548. </tbody>
  549. </table>
  550. </div>
  551. <div class="example">
  552. <h1>Example 8</h1>
  553. <table id="table-7" class="jgtable {size:'650x450',type:'bvs',axis_step:1,title:false,title_color:'FFFFFF',title_size:10,bar_width:90,bar_spacing:11,fillarea:false,fillbottom:true,filltop:true,colors:['f04242','FFCC00','99CC00'],lines:[[12,9,7],[14,9,7],[13,9,7]],bg:'dca0ee',bg_type:'gradient',bg_angle:40,bg_offset:'FFFFFF',bg_width:20,bg_trasparency:false,chbg:'bfbfbf',chbg_type:'stripes',chbg_angle:0,chbg_offset:'f5f5f5',chbg_width:10,chbg_trasparency:false,grid:false,grid_x:3,grid_y:3,grid_line:0,grid_blank:0}">
  554. <thead>
  555. <tr>
  556. <th>Anno</th>
  557. <th class="serie">Data 1</th>
  558. <th class="serie">Data 2</th>
  559. <th class="serie">Data 3</th>
  560. </tr>
  561. </thead>
  562. <tbody>
  563. <tr>
  564. <th class="serie">2001</th>
  565. <td>153</td>
  566. <td>60</td>
  567. <td>52</td>
  568. </tr>
  569. <tr>
  570. <th class="serie">2002</th>
  571. <td>113</td>
  572. <td>70</td>
  573. <td>60</td>
  574. </tr>
  575. <tr>
  576. <th class="serie">2003</th>
  577. <td>120</td>
  578. <td>80</td>
  579. <td>40</td>
  580. </tr>
  581. </tbody>
  582. </table>
  583. </div>
  584. </body>
  585. </html>