<!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>
<title>jQuery Google Charts Gui 1.0 - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="lib/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<script src="lib/jquery-ui-personalized-1.6rc2.min.js" type="text/javascript"></script>
<script src="lib/farbtastic/farbtastic.js" type="text/javascript"></script>
<link href="lib/farbtastic/farbtastic.css" type="text/css" rel="stylesheet" />
<script src="../../jgcharts.js" type="text/javascript"></script>
<script src="../../plugins/jgtable/jgtable.js" type="text/javascript"></script>
<script src="plugins/jggui/jggui.js" type="text/javascript"></script>
<link href="plugins/jggui/jggui.css" type="text/css" rel="stylesheet" />
<link href="plugins/jggui/theme/jquery-ui-themeroller.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
var STATIC = 0;
jQuery(document).bind("jggui", function(){
var _callback = function(){
STATIC++;
jQuery(".jgchart").remove();
jQuery(".jgtable")
.jgtable({
single : STATIC,
gui : true
});
};
_callback();
jQuery("img.jggui").jggui({
url : "plugins/jggui/",
height : 400,
width : 600,
callback : _callback
});
});
jQuery(document).ready(function(){
jQuery(document).trigger("jggui");
});
</script>
</head>
<body>
<h1>Click on chart</h1>
<div class="jgtable {type : 'p',colors : ['5131C9'],size : '300x200'}">
<table class="demo">
<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="jgtable {type : 'bhg',bar_width : 15,grid : true,colors : ['5131C9'],size : '390x490'}">
<table class="demo">
<thead>
<tr>
<th>Squadra</th>
<th class="serie">Punti</th>
</tr>
</thead>
<tbody>
<tr><th class="serie">Inter</th><td>27</td></tr>
<tr><th class="serie">Juventus</th><td>24</td></tr>
<tr><th class="serie">Milan</th><td>23</td></tr>
<tr><th class="serie">Napoli</th><td>23</td></tr>
<tr><th class="serie">Lazio</th><td>22</td></tr>
<tr><th class="serie">Udinese</th><td>21</td></tr>
<tr><th class="serie">Genoa</th><td>20</td></tr>
<tr><th class="serie">Fiorentina</th><td>20</td></tr>
<tr><th class="serie">Catania</th><td>18</td></tr>
<tr><th class="serie">Palermo</th><td>16</td></tr>
<tr><th class="serie">Atalanta</th><td>14</td></tr>
<tr><th class="serie">Lecce</th><td>12</td></tr>
<tr><th class="serie">Siena</th><td>12</td></tr>
<tr><th class="serie">Torino</th><td>11</td></tr>
<tr><th class="serie">Cagliari</th><td>10</td></tr>
<tr><th class="serie">Sampdoria</th><td>10</td></tr>
<tr><th class="serie">Roma</th><td>8</td></tr>
<tr><th class="serie">Bologna</th><td>7</td></tr>
<tr><th class="serie">Chievo</th><td>6</td></tr>
<tr><th class="serie">Reggina</th><td>5</td></tr>
</tbody>
</table>
</div>
<div class="jgtable {
type : 'bhg',
bar_width : 19,
bg : 'FFFFFF',
bg_type : 'stripes',
bg_offset : '7a7a7a',
bg_angle : 45,
bg_trasparency : 90,
chbg : 'FFFFFF',
chbg_type : 'gradient',
chbg_offset : 'cb7e01',
grid : true,
grid_x : 3,
grid_y : 3,
grid_line : 2,
grid_blank : 2,
colors : ['5131C9','FFCC00','DA1B1B','FF9900','FF6600','CCFFFF','CCFF00','CCCCCC','FF99CC','999900','999999','66FF00','66CC00','669900','660099','33CC00','333399','000000','000000','000000'],
size : '300x460'
}">
<table class="demo">
<thead>
<tr>
<th>Squadra</th>
<th class="serie">Inter</th>
<th class="serie">Juventus</th>
<th class="serie">Milan</th>
<th class="serie">Napoli</th>
<th class="serie">Lazio</th>
<th class="serie">Udinese</th>
<th class="serie">Genoa</th>
<th class="serie">Fiorentina</th>
<th class="serie">Catania</th>
<th class="serie">Palermo</th>
<th class="serie">Atalanta</th>
<th class="serie">Lecce</th>
<th class="serie">Siena</th>
<th class="serie">Torino</th>
<th class="serie">Cagliari</th>
<th class="serie">Sampdoria</th>
<th class="serie">Roma</th>
<th class="serie">Bologna</th>
<th class="serie">Chievo</th>
<th class="serie">Reggina</th>
</tr>
</thead>
<tbody>
<tr>
<th class="serie">Punti</th>
<td>27</td>
<td>24</td>
<td>23</td>
<td>23</td>
<td>22</td>
<td>21</td>
<td>20</td>
<td>20</td>
<td>18</td>
<td>16</td>
<td>14</td>
<td>12</td>
<td>12</td>
<td>11</td>
<td>10</td>
<td>10</td>
<td>8</td>
<td>7</td>
<td>6</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div class="jgtable {
type : 'lc',
size : '520x370',
lines : [['1','0','0'],['1','0','0']],
axis_step : 10,
bg : '000000',
bg_type : 'gradient',
bg_offset : 'FFFFFF',
bg_trasparency : 90,
grid : true,
grid_x : 4,
grid_y : 4,
grid_line : 2,
grid_blank : 2,
colors : ['5131C9','FFCC00'],
filltop : ''
}">
<table>
<thead>
<tr>
<th></th>
<th class="serie">CA</th>
<th class="serie">DF</th>
</tr>
</thead>
<tbody>
<tr>
<th class="serie">01-03</th>
<td>105.7</td>
<td>97.9</td>
</tr>
<tr>
<th class="serie">02-03</th>
<td>108.1</td>
<td>101.6</td>
</tr>
<tr>
<th class="serie">03-03</th>
<td>110.7</td>
<td>102.9</td>
</tr>
<tr>
<th class="serie">04-03</th>
<td>111.0</td>
<td>93.7</td>
</tr>
<tr>
<th class="serie">05-03</th>
<td>110.0</td>
<td>89.8</td>
</tr>
<tr>
<th class="serie">06-03</th>
<td>109.0</td>
<td>90.7</td>
</tr>
<tr>
<th class="serie">07-03</th>
<td>107.5</td>
<td>93.0</td>
</tr>
<tr>
<th class="serie">08-03</th>
<td>106.1</td>
<td>94.5</td>
</tr>
<tr>
<th class="serie">09-03</th>
<td>104.3</td>
<td>91.9</td>
</tr>
<tr>
<th class="serie">10-03</th>
<td>102.0</td>
<td>93.9</td>
</tr>
<tr>
<th class="serie">11-03</th>
<td>102.8</td>
<td>93.6</td>
</tr>
<tr>
<th class="serie">12-03</th>
<td>103.8</td>
<td>92.6</td>
</tr>
<tr>
<th class="serie">01-04</th>
<td>102.9</td>
<td>94.0</td>
</tr>
<tr>
<th class="serie">02-04</th>
<td>102.1</td>
<td>92.7</td>
</tr>
<tr>
<th class="serie">03-04</th>
<td>100.6</td>
<td>96.0</td>
</tr>
<tr>
<th class="serie">04-04</th>
<td>101.7</td>
<td>97.9</td>
</tr>
<tr>
<th class="serie">05-04</th>
<td>101.8</td>
<td>105.0</td>
</tr>
<tr>
<th class="serie">06-04</th>
<td>103.3</td>
<td>104.1</td>
</tr>
<tr>
<th class="serie">07-04</th>
<td>104.0</td>
<td>105.1</td>
</tr>
<tr>
<th class="serie">08-04</th>
<td>103.7</td>
<td>108.1</td>
</tr>
<tr>
<th class="serie">09-04</th>
<td>108.4</td>
<td>108.4</td>
</tr>
<tr>
<th class="serie">10-04</th>
<td>109.4</td>
<td>113.8</td>
</tr>
<tr>
<th class="serie">11-04</th>
<td>112.0</td>
<td>109.1</td>
</tr>
<tr>
<th class="serie">12-04</th>
<td>112.6</td>
<td>106.3</td>
</tr>
<tr>
<th class="serie">01-05</th>
<td>115.5</td>
<td>106.7</td>
</tr>
<tr>
<th class="serie">02-05</th>
<td>115.7</td>
<td>108.8</td>
</tr>
<tr>
<th class="serie">03-05</th>
<td>114.7</td>
<td>118.8</td>
</tr>
<tr>
<th class="serie">04-05</th>
<td>115.9</td>
<td>120.4</td>
</tr>
<tr>
<th class="serie">05-05</th>
<td>116.2</td>
<td>115.9</td>
</tr>
<tr>
<th class="serie">06-05</th>
<td>118.0</td>
<td>124.7</td>
</tr>
<tr>
<th class="serie">07-05</th>
<td>123.3</td>
<td>126.5</td>
</tr>
<tr>
<th class="serie">08-05</th>
<td>127.6</td>
<td>131.6</td>
</tr>
<tr>
<th class="serie">09-05</th>
<td>130.3</td>
<td>134.0</td>
</tr>
<tr>
<th class="serie">10-05</th>
<td>135.5</td>
<td>135.7</td>
</tr>
<tr>
<th class="serie">11-05</th>
<td>138.2</td>
<td>126.4</td>
</tr>
<tr>
<th class="serie">12-05</th>
<td>139.6</td>
<td>127.4</td>
</tr>
<tr>
<th class="serie">01-06</th>
<td>145.1</td>
<td>131.0</td>
</tr>
<tr>
<th class="serie">02-06</th>
<td>146.4</td>
<td>129.9</td>
</tr>
<tr>
<th class="serie">03-06</th>
<td>147.1</td>
<td>133.7</td>
</tr>
<tr>
<th class="serie">04-06</th>
<td>149.0</td>
<td>138.4</td>
</tr>
<tr>
<th class="serie">05-06</th>
<td>150.3</td>
<td>141.0</td>
</tr>
<tr>
<th class="serie">06-06</th>
<td>151.3</td>
<td>139.3</td>
</tr>
<tr>
<th class="serie">07-06</th>
<td>153.4</td>
<td>145.3</td>
</tr>
<tr>
<th class="serie">08-06</th>
<td>152.7</td>
<td>142.9</td>
</tr>
<tr>
<th class="serie">09-06</th>
<td>152.9</td>
<td>129.2</td>
</tr>
<tr>
<th class="serie">10-06</th>
<td>152.2</td>
<td>126.0</td>
</tr>
<tr>
<th class="serie">11-06</th>
<td>151.9</td>
<td>124.8</td>
</tr>
<tr>
<th class="serie">12-06</th>
<td>150.1</td>
<td>125.9</td>
</tr>
<tr>
<th class="serie">01-07</th>
<td>148.2</td>
<td>118.9</td>
</tr>
<tr>
<th class="serie">02-07</th>
<td>145.3</td>
<td>122.9</td>
</tr>
<tr>
<th class="serie">03-07</th>
<td>142.9</td>
<td>127.7</td>
</tr>
<tr>
<th class="serie">04-07</th>
<td>142.6</td>
<td>134.4</td>
</tr>
<tr>
<th class="serie">05-07</th>
<td>144.0</td>
<td>138.5</td>
</tr>
<tr>
<th class="serie">06-07</th>
<td>145.5</td>
<td>138.7</td>
</tr>
<tr>
<th class="serie">07-07</th>
<td>147.2</td>
<td>141.8</td>
</tr>
<tr>
<th class="serie">08-07</th>
<td>150.0</td>
<td>139.2</td>
</tr>
<tr>
<th class="serie">09-07</th>
<td>153.8</td>
<td>145.6</td>
</tr>
<tr>
<th class="serie">10-07</th>
<td>155.4</td>
<td>147.6</td>
</tr>
<tr>
<th class="serie">11-07</th>
<td>157.0</td>
<td>157.9</td>
</tr>
<tr>
<th class="serie">12-07</th>
<td>158.4</td>
<td>156.2</td>
</tr>
<tr>
<th class="serie">01-08</th>
<td>162.8</td>
<td>153.9</td>
</tr>
<tr>
<th class="serie">02-08</th>
<td>162.8</td>
<td>158.6</td>
</tr>
<tr>
<th class="serie">03-08</th>
<td>164.7</td>
<td>166.3</td>
</tr>
<tr>
<th class="serie">04-08</th>
<td>168.5</td>
<td>165.8</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>