jQchart + CanvasGradient

Efect Canvas 'slide';  -- bar,default | bar,rikyu | bar,gray | line,default | line,Direct colorSet | line,etc... |
Efect Canvas 'fade';  -- bar,default | bar,rikyu | bar,gray | line,default | line,Direct colorSet | line,etc... |
Efect Box 'slide'      -- bar,default | bar,rikyu | bar,gray | line,default | line,Direct colorSet | line,etc... |
--drag(or dblclik the chart)

|++かも日記 | jQuery › Downloads › Plugins › jQchart | nightly.htm |
| jQuery › Downloads › Plugins › csv2table (v002 test)
ccchart ( canvas + css3 )

<!--[if IE]>
<script type="text/javascript" src="./lib/excanvas/excanvas-compressed.js"></script>
<![endif]-->
<script type="text/javascript" src="./lib/jquery.js"></script>
<!-- for drag. add  ui.mouse.js,ui.draggable.js,ui.draggable.ext.js-->
<script src="./lib/jquery.ui/ui.mouse.js"></script>
<script src="./lib/jquery.ui/ui.draggable.js"></script>
<script src="./lib/jquery.ui/ui.draggable.ext.js"></script>
<script src="./lib/jquery.ui/jquery.dimensions.js" type="text/javascript"></script>
<script src="./lib/jquery.ui/ui.droppable.js" type="text/javascript"></script>
<script src="./lib/jquery.ui/ui.droppable.ext.js" type="text/javascript"></script>
<script type="text/javascript" src="./jquery.jqchart.js" charset="utf-8"></script>
<!-- enchant -->
<script type="text/javascript" src="./lib/enchant/fx.js"></script>
<script type="text/javascript" src="./lib/enchant/fx.slide.js"></script>

<style>
#myBgBox{
	background-color:#3f464c;
	padding:30px;
	padding-top:10px;
	padding-bottom:20px;
	text-align:center;
	color:white;
}
#myBgBox h5{
	margin :20px;
	font-size : 18px;
}
#ctrllinks { 
	padding-top:20px;
	font-size: 12px; 
}
#ctrllinks a { 
	color : #999; 
}
.jQchart{
	font-size : 12px;
	margin:auto
}
.jQchart-labelData{
	font-size : 9px;
}
.jQchart-title{
	font-size : 12px;
}
.droppable-active {
	opacity: 1.0;
}
.droppable-hover {
	opacity: 0.7;
}
</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]
  ];
var data3 = [
  	[312,500,402,700,512,777,925],
  	[200,123,312,200,402,300,512]
  ];
var data4 = [
  	[435,332,524,688,774,825,999],
  	[600,335,584,333,457,788,900],
  	[60,435,456,352,567,678,1260],
  	[200,123,312,200,402,300,512]
  ]

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

  
The simplest setting example for useing   bgGradient.
  <a href="#" onClick="
	$('#canvasMyID1').jQchart({	
		config : { bgGradient : true },
		data   : data2
	});
  ">click!</a> | 
 
Setting examples
 <p id="ctrllinks">
  Efect Canvas 'slide';  --
  <a href="#" onClick="
	$('#jQchart-canvasMyID1').fadeOut();
	$('#canvasMyID1').jQchart({
		config:{
			title      : 'type:line , Direct colorSet',
			type       : 'line',
			colorSet   : ['#adadad','orange','#dddcd6'],
			bgGradient : true
		},
		data : data2
	});
	$('#jQchart-canvasMyID1')
		.show('slide',{ direction: 'right' })
		.find('.jQchart-labelData')
		.css('font-size','18px')
		.css('font-family','Times');
  ">line,Direct colorSet</a> | 
  <a href="#" onClick="
	$('#jQchart-canvasMyID1').fadeOut();
	$('#canvasMyID1').jQchart({
		config:{
			title      : 'type:line,etc...',
			type       : 'line',
			colorSet   : ['#06D000','#000000','gold','#eeeeee'],
			bgGradient :{
				direction : 'vertical',
				from      : '#444444',
				to        : '#00aaaa'
			},
			ondrawend : function(oj,cvs){
				$('.jQchart-labelX',oj).css('color','#bbb')
				$('.jQchart-labelY',oj).css('font-size','14px')
			}
		},
		data : data4
	});
	$('#jQchart-canvasMyID1')
		.show('slide',{ direction: 'right' })
  ">line,etc...</a> | 
 </p>
 
Please see csv2table if you want to using CSV data.
 

*on win IE(excanvas), 'vertical' is not work well.