折れ線グラフを作成したい

こちらから抜粋

ダウンロードすると以下のファイルが含まれています。
・LineGraph.swf ・・・ setup.txtと、data.txtを読み込みグラフを作成するFlashファイル
・setup.txt ・・・ グラフのサイズなど、グラフの設定をするファイル
・data.txt ・・・ グラフ上に描かれる、折れ線化されるデータファイル

  • 折れ線グラフの縦、横のサイズを変更するには、 setup.txtのgraph_xと、graph_yを設定してください。
  • 折れ線グラフの縦軸、横軸のデータを変更するには、 data.txtの、data1~99と、data_name1~99を変更してください。
  • Y軸の区切り数は通常10分割です。この数を変更するには、graph_y_numを指定してください。(規定値10)右の例では、5分割に変更しています。
  • Y軸をパーセント表示するには、graph_y_value=1 を指定してください。
    Y軸に単位などラベルをつけたい場合は、graph_y_name=ラベル名 を指定してください。
  • マウスカーソルに合わせて線を表示するには、mouseline=1 を指定してください。
  • そして!応用は下
  • 折れ線グラフをデータベースの値で動的に作成するには、読み込むデータファイルをdata.phpなどのサーバスクリプトファイルにし、その実行結果でdata0~99と、data_name0~99を出力します。

折れ線グラフを作成したい

こちらから抜粋

コピペ用に作ってみた。いやー軽い軽い。JSで<canvas>で図形描画なんて馬鹿らしくなっちゃうね。ちなみに色はあんまり弄ってない。考えたら暖色系って盛り上がってる感じがするから、このままのが良いかもね。

では続きをどうぞ。 …そういえば、商用利用できたっけ?

折れ線グラフ
<img src="http://chart.apis.google.com/chart?cht=lc
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,10,14,30,80,40,100
&amp;chm=s,FF9904,0,-1,6" />
折れ線グラフ(塗りつぶし)
<img src="http://chart.apis.google.com/chart?cht=lc
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,10,14,30,80,40,100
&amp;chls=2,7,4
&amp;chcs=FF9900
&amp;chm=B,FFC266,0,0,0" />
折れ線グラフ(範囲マーカー)
<img src="http://chart.apis.google.com/chart?cht=lc
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,10,14,30,80,40,100
&amp;chm=r,FFEBCC,0,0.20,0.75|s,FF9904,0,-1,6" />
棒グラフ
<img src="http://chart.apis.google.com/chart?cht=bvs
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chco=FFC266
&amp;chd=t:10,50,14,30,80,40,20" />
棒グラフ(データ線付き)
<img src="http://chart.apis.google.com/chart?cht=bvs
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,50,14,30,80,40,20
&amp;chco=FFC266
&amp;chm=D,FF9900,0,0,3,1" />
棒グラフ(テキストマーカー)
<img src="http://chart.apis.google.com/chart?cht=bhg
&amp;chs=300x250
&amp;chg=20,50,1,5
&amp;chxt=y,x
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,50,14,30,80,40,20
&amp;chm=tHomepage,333333,0,0,13,1|tPamphlet,333333,0,1,13,1|tDirect+mail,333333,0,2,13,1|tInfomation,333333,0,3,13,1|tOther+Sites,333333,0,4,13,1|tAds,333333,0,5,13,1|tNews+paper,333333,0,6,13,1
&amp;chco=FFC266" />
円グラフ
<img src="http://chart.apis.google.com/chart?cht=p
&amp;chd=t:14711,11684,3431
&amp;chs=300x150
&amp;chl=1|2|3" />
円グラフ(3D)
<img src="http://chart.apis.google.com/chart?cht=p3
&amp;chd=t:14711,11684,3431
&amp;chs=300x150
&amp;chl=1|2|3" />
レーダーチャート

<img src="http://chart.apis.google.com/chart?cht=r
&amp;chd=t:80,30,99,60,50,20
&amp;chs=300x200
&amp;chls=3,0,0
&amp;chxt=x,y
&amp;chxl=0:|Str|Vit|Agi|Dex|Int|Luk|1:|||||
&amp;chm=B,FF990080,0,0,5" />
QRコード
<img src="http://chart.apis.google.com/chart?cht=qr
&amp;chs=300x100
&amp;chl=http%3a//archiva.jp/" />

概説

パラメータ 意味 構文
cht 図のタイプ cht=lc
chs 図のサイズ chs=250x100
chg グリッド線 chg=[x軸のステップサイズ],[y軸のステップサイズ],[分断線],[空白線]
chxt 複数軸ラベル(軸タイプ) chxt=x,y,r,x
chxl 複数軸ラベル(軸ラベル) chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|100|
2:|A|B|C|
3:|2005|2006|2007
chls 線のスタイル chls=[線の太さ],[線の長さ],[空白の長さ]
chcs 線の色 chcs=FF9900
chco チャートの色 chco=FFC266
chm=r 範囲マーカー chm=[r(水平範囲)/R(垂直範囲)],[色],0,[始点],[終点]
chm=D 棒グラフのデータ線 chm=D,[色],[data set index],0,[サイズ],[描画順序 1/0/-1]
chm 図形マーカー chm=[図形タイプ],[色],[data set index],[data point],[サイズ],[描画順序 1/0/-1]

ここで図形タイプとは、以下から選ぶ。

a 矢印
c 十字
d ひし形
o
s 正方形
t 任意のテキスト(スペースは + で表す)
v x軸の直線(データポイントまで)
V x軸の直線(図の上端まで)
h y軸の直線(チャートを横切る水平線)
x ×印

ここで苦戦したのが、始まりの数値、始点です。

ダイエットグラフを作りたいのにパーセント表示じゃ、わけが分かんない!
って事で調べたら、
&chds=はじまり、おわり

さらに線を2本にしたいと思って調べたら、
&chd=t:1本目|2本目

例)&chds=57,63
  &chd=t:10,15,4,60,45|30,23,73,24,8

これでOK(*゚▽゚*)

こんなグラフができました☆

ダイエットグラフ
<img src="http://chart.apis.google.com/chart?cht=lc
&chs=640x400
&chco=ff0000,0000ff
&chg=18,50,1,5
&chxt=x,y
&chds=52,63
&chxl=0:|8/15|9/1|2|3|~省略~|1:||53(33)|54(34)|55(35)~省略~|
&chd=t:63,61.8,61.2~省略~|55.1,55.7,55.8~省略~" />

参考になったのはこちらこちら