Canvas+jQuery

読み込んでいるデータは次の通り
./data1.txt ./data2.txt

---

Old version
| test2 b | slider bar |

---

Minimum 最小構成

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

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>