どうも！LSSです！！
ふと「canvasとJavaScriptで折れ線グラフ描けるかな」と思い立ち、やってみました。
コード
<p><canvas id="cv0" width="280" height="200">Canvas非対応ブラウザです</canvas></p>
<script>// <![CDATA[
var gx=10;//原点x
var gy=10;//原点y
var mx=280;//最大x
var my=200;//最大y
var mp=200;//値の最大
var gf1=[133,150,133,100,99,152,117];//グラフ化するデータ
var gf1c='red';//折れ線の色
var ctx0=cv0.getContext("2d");
//表の下地を描画
ctx0.beginPath();
ctx0.fillStyle='#dddddd';
ctx0.fillRect(0,0,mx,my);
ctx0.strokeStyle='black';
ctx0.lineWidth=1;
ctx0.moveTo(gx,0);
ctx0.lineTo(gx,my);
ctx0.moveTo(0,my-gy);
ctx0.lineTo(mx,my-gy);
ctx0.stroke();
//ここから表の描画
ctx0.beginPath();
ctx0.strokeStyle=gf1c;
ctx0.fillStyle='black';//値の文字の色
ctx0.font='10pt sunserif';//値の文字のフォントサイズと種類
ctx0.textAlign='left';//値の文字、左を起点とする
ctx0.textBaseline='bottom';//値の文字、底を起点とする
ctx0.moveTo(gx,my-gy-((my-gy)*gf1[0]/mp));
ctx0.fillText(gf1[0],gx,my-gy-((my-gy)*gf1[0]/mp));
for(i=1;i<gf1.length;i++){
ctx0.lineTo(gx+((mx-gx)*i/(gf1.length)),my-gy-((my-gy)*gf1[i]/mp));
ctx0.fillText(gf1[i],gx+((mx-gx)*i/(gf1.length)),my-gy-((my-gy)*gf1[i]/mp));
}
ctx0.stroke();
// ]]></script>
コード、一部解説
ちょっと長めのコードですが、まるっとHTML編集画面にコピペして
var mp=200;//値の最大
var gf1=[133,150,133,100,99,152,117];//グラフ化するデータ
var gf1c='red';//折れ線の色
の部分を変更すれば使えます^^
ここで200はグラフの天井となる値で、
[133,150,133,100,99,152,117]
の中身はいくつでもカンマ区切りで数値を並べられます。
（ちなみにこのサンプルの数字は4/1からのこのブログのアクセス数ｗ）
まさか、はてな記法に悩まされるとは…
とりあえずグラフを描くスクリプトが完成して、記事を書こうとして、コードを貼り付けた時…「コード」として表示する部分に脚注*1が勝手に入ってしまい、見せるほうのコードがぐちゃぐちゃになりました^^;;;
えー、今までの記事はならなかったと思うけど…（（と））なんて今までも結構使ってたハズだけど大丈夫かな…。
対策を調べたところ、半角の［］と［］で挟む事で、その挟んだ間ははてな記法の影響から除外されるとか。
ちょっとこの記事投稿してから確認します。
