jquery.jQchart

---

Old version
| test2 b | slider bar |

---

Minimum 最小構成

Basic Sample (基本)

[HTML file] min0.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="../jquery.jqchart.js" type="text/javascript"></script>
<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
$.event.add(window,'load', function(e){
	$('#canvasMyID').jQchart('./data0.txt')
});
</script>

[Data file] data0.txt
{
  data : [
    [333,555,888,445,666,999,333]
  ]
};

*注意 jQueryの便利なイベント、$(function(){/*スクリプト*/}) や ready( fn ) や bind( type, data, fn ) は、早すぎて、ここでは、IEがエラーになってしまいますので「$.event.add(window,'load'...」を使っています。

[HTML file] min0-1.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="../jquery.jqchart.js" type="text/javascript"></script>
<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
var setting={
  data : [[300,500,600,700,888,777,666]]
};
$(function(){
	$('#canvasMyID').jQchart(setting);
})
</script>

Event (イベントによる描画)

[HTML file] min1.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="../jquery.jqchart.js" type="text/javascript"></script>
<canvas id="canvasMyID"></canvas>
<input type="button" value="data1.txt" 
       onclick="$('#canvasMyID').jQchart('./data0.txt')">

[Data file] data0.txt
{
  data : [
    [333,555,888,445,666,999,333]
  ]
};

[HTML file] min2.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="../jquery.jqchart.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('#myBtn').click(function(){
		$('#canvasMyID').jQchart('./data0.txt');
	})
})
</script>
<canvas id="canvasMyID"></canvas>
<button id="myBtn">data0.txt</button>

[Data file] data0.txt
{
  data : [
    [333,555,888,445,666,999,333]
  ]
};

Canvas Width&Height; 幅と高さなどの指定方法

(以下、jquery.jsとexcanvas.jsのロード部分は省略)

width,height

<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
var chartSetting={
  config : { 
    width  : 600 , 
    height : 300 
  },
  data : [[300,500,600,700,888,777,666]]
};
$('#canvasMyID').jQchart.draw(chartSetting);
</script>

<canvas id="canvasMyID" width="600" height="300"></canvas>
<script type="text/javascript">
$('#canvasMyID').jQchart.draw({
  data   : [[300,500,600,700,888,777,666]]
});
</script>

<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
$('#canvasMyID').jQchart.draw({
  data   : [[300,500,600,700,888,777,666]]
})
  .css('width', '600px')
  .css('height','300px');
</script>

<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
var oj=$('#canvasMyID');
oj.jQchart.draw({
  config : { 
    width  : 500, 
    height : 200
  },
  data   : [[300,500,600,700,888,777,666]]
})
</script>

* キャンバスの幅と高さwidthとheightは、「drawの引数＞canvas要素の属性＞デフォルト値(w500,h300)」の優先順位で決まります。

チャート領域のパディング位置

<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
var chartSetting={
  config : { 
    width  : 600 , 
    height : 300 ,
    paddingL : 30  , 
    paddingT : 50
  },
  data : [[300,500,600,700,888,777,666]]
};
$('#canvasMyID').jQchart.draw(chartSetting);
</script>