jQchart + CanvasGradient
|++かも日記 | 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.