Canvas+jQuery

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

---

Old version
| test2 b | slider bar |

---

Minimum 最小構成

<!--[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">
$('#canvasMyID').jQchart.draw({
  data   : [[300,500,600,700,888,777,666]]
});
</script>

[HTML file] mini.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]
  ]
};

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>