Canvas+jQuery

読み込んでいるデータは次の通り
./cnt200506.dat ./cnt200507.dat ./cnt200508.dat ./cnt200509.dat

---

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のロード部分は省略)

<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>

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

Chart position チャートのTopとLeft(cartT chartL)の指定方法

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

<canvas id="canvasMyID"></canvas>

<script type="text/javascript">

var chartSetting={
  config : { 
    width  : 600 , 
    height : 300 ,
    chartL : 30  , 
    chartT : 50
  },
  data : [[300,500,600,700,888,777,666]]
};

$('#canvasMyID').jQchart.draw(chartSetting);

</script>