
**Attention** 

I cancel the work that I used "use:gradient" for at one time. 
After jquery.jqchart-0.02-beta-3.0.js, "use:gradient" is not usable. 
After v0.02-beta-3.0.js, I try the gradation in canvas.
0.02-beta-2.1.js.gradient(development).end() :)


<!-- libs -->
<!--[if IE]>
<script type="text/javascript" src="./lib/excanvas/excanvas-compressed.js"></script>
<![endif]-->
<script type="text/javascript" src="./lib/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="./jquery.jqchart-0.02-beta-2.1.js" charset="utf-8"></script>
<script type="text/javascript" src="./lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="./lib/jquery.gradient-forjqchart.js"></script>

<!-- enchant -->
<script type="text/javascript" src="./lib/enchant/fx.js"></script>
<script type="text/javascript" src="./lib/enchant/fx.clip.js"></script>
<script type="text/javascript" src="./lib/enchant/fx.slide.js"></script>
<script type="text/javascript" src="./lib/enchant/fx.fade.js"></script>

</head><body>

<style>

body { 
	margin: 20px; 
	font-family: "Myriad Web","Trebuchet MS","Tahoma","Helvetica","Arial","sans-serif"; 
}

#myBgBox{
	background-color:#3f464c;
	padding:30px;
	padding-top:5px;
	text-align:center;
	color:white;
}
#myBgBox h5{
	margin :15px;
	font-size : 18px;
}
.jQchart{
	font-size : 12px;
}
.jQchart-bg{
	margin-left  : auto ;
	margin-right : auto ;
}
.jQchart-labelData{
	font-size : 9px;
}
.jQchart-title{
	font-size : 12px;
}

</style>
<script type="text/javascript">

var data = [
  	[234,555,234],
  	[300,700,600],
  	[789,666,887],
  	[456,890,226],
  	[336,666,776],
  	[458,788,888],
  	[123,333,567],
  	[786,221,777],
  	[666,567,789],
  	[895,654,888],
  	[333,222,444],
  	[456,123,789],
  	[543,235,999],
  	[444,666,227],
  	[123,234,222]
  ];

var data2 = [
  	[435,500,600,700,888,777,925],
  	[60,435,456,352,567,678,1260],
  	[200,123,312,200,402,300,512]
  ];

function chgChart(type,colorSet,gradient,title,data){	//if($('.gradient').length>0)$('.gradient').remove();
	$('#myBgBox').hide();
	$('#canvasMyID1').jQchart({
		config:{
			title    : title,
			type     : type,
			use      : 'gradient:#canvasMyID1',
			colorSet : (typeof colorSet=='string')?$.jQchart.colorSets[colorSet]:colorSet,
			gradient : gradient
		},
		data : data
	}); 
	
	$('#myBgBox').show('slide',{ direction: 'right' });
	return false;
}
  
</script>

 <p>
  <a href="#" onClick="chgChart('bar','','','type:bar,colorSet:default',data)">bar,default</a> | 
  <a href="#" onClick="chgChart('bar','rikyu','','type:bar,colorSet:rikyu',data)">bar,rikyu</a> | 
  <a href="#" onClick="chgChart('bar','gray','','type:bar,colorSet:gray',data)">bar,gray</a> | 
  <a href="#" onClick="chgChart('line','','','type:line,colorSet:default',data2)">line,default</a> | 
  <a href="#" onClick="chgChart('line',['#adadad','#000000','#dddcd6'],{},'type:line,colorSet:gray',data2)">line,Direct colorSet</a> | 
  <a href="#" onClick="chgChart('line',['#06D000','#000000','#dddcd6'],{
      from  : '000000',
      to    : '00aaaa',
      direction:'vertical'
    },'type:line,colorSet:gray',data2)">line,Direct colorSet,from/to</a>(NG) | 
 </p>

<div id="myBgBox">
	<h5>jQchart + use:gradient</h5>
	<canvas id="canvasMyID1" width="500" height="220"></canvas>
</div>

<script type="text/javascript">

var chartSetting1={
  config:{
    title    : '<b>type : "bar"</b>,setting.config.colorSet : $.jQchart.colorSets.gray',
    type     : 'bar',
    use      : 'gradient:#canvasMyID1',
    colorSet : $.jQchart.colorSets.gray
  },
  data : data
};

jQuery(function($){
	$('#canvasMyID1').jQchart(chartSetting1);
})

</script>