<!--[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.js" charset="utf-8"></script>
<script type="text/javascript" src="./lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="./jquery.gradient-forjqchart.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-family : Times;
}
.jQchart-labelData-canvasMyID1{
	font-size : 20px;
}
.jQchart-title{
	font-size : 12px;
}
</style>
<script type="text/javascript">
var data = [
      [435,500,600,700,888,777,925],
      [60,435,456,352,567,678,1260],
      [200,123,312,200,402,300,512]
  ];
</script>
<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 : "line"</b> and Set CSS of labelData',
    type     : 'line'
  },
  data : data
};
jQuery(function($){
	$('#canvasMyID1').jQchart(chartSetting1);
})
</script>