静岡理工科大学 菅沼ホーム PHP 目次 索引

データベースとグラフ

      1. データベースと表&グラフ
      2. 一般的なグラフ

  1. データベースと表&グラフ

      データベースの内容を表やグラフで表したい場合がしばしば発生します.表&グラフ(ソースプログラムは以下に示すとおり)は,データベースに保存されている内容を取り出し,その結果を表とグラフで表現しています.このプログラムでは,データベースのテーブルを作成し,データを挿入する操作を行っていますが,これは,あくまでテスト用であり,一般的には必要ありません.

    01	<!DOCTYPE HTML>
    02	<HTML>
    03	<HEAD>
    04		<TITLE>表&グラフ</TITLE>
    05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    06		<LINK REL="stylesheet" TYPE="text/css" HREF="../master.css">
    07		<SCRIPT TYPE="text/javascript" SRC="graph.js"></SCRIPT>
    08	</HEAD>
    09	<BODY CLASS="white" STYLE="text-align: center">
    10		<H1 CLASS="center">表&グラフ</H3>
    11	<?php
    12						// データベースへの追加
    13		$db = mysql_connect("*****", "*****", "*****");
    14		if (!$db)
    15			exit("<h1>データベースへ接続できません</h1>\n");
    16						// テーブルの削除
    17		mysql_select_db("webshop", $db);
    18		$result = mysql_query("SHOW TABLES", $db);
    19		if (mysql_num_rows($result) > 0) {
    20			while ($row = mysql_fetch_row($result)) {
    21				if (strcmp($row[0], "commodity") == 0) {
    22					mysql_query("DROP TABLE commodity", $db);
    23					break;
    24				}
    25			}
    26			mysql_free_result($result);
    27		}
    28						// テーブルの生成とデータの追加
    29		$str = "(id INT AUTO_INCREMENT PRIMARY KEY,itemname varchar(100) not null,stock INT NOT NULL)";
    30		mysql_query("CREATE TABLE commodity ".$str, $db);
    31		if (mysql_errno($db) != 0)
    32			exit("<h1>テーブル commodity を作成できません</h1>\n");
    33		mysql_query("INSERT INTO commodity VALUES(NULL,'商品1',10)", $db);
    34		mysql_query("INSERT INTO commodity VALUES(NULL,'商品2',20)", $db);
    35		mysql_query("INSERT INTO commodity VALUES(NULL,'商品3',4)", $db);
    36		mysql_query("INSERT INTO commodity VALUES(NULL,'商品4',40)", $db);
    37		mysql_query("INSERT INTO commodity VALUES(NULL,'商品5',35)", $db);
    38		mysql_query("INSERT INTO commodity VALUES(NULL,'商品6',4)", $db);
    39		mysql_query("INSERT INTO commodity VALUES(NULL,'商品7',3)", $db);
    40		mysql_query("INSERT INTO commodity VALUES(NULL,'商品8',2)", $db);
    41		mysql_query("INSERT INTO commodity VALUES(NULL,'商品9',15)", $db);
    42		mysql_query("INSERT INTO commodity VALUES(NULL,'商品10',20)", $db);
    43						// データの出力
    44								// グラフ表示の準備
    45		$gp      = "0,在庫の多い商品,商品名,商品在庫,1,在庫";
    46		$x_title = array();
    47		$data    = array();
    48		$n       = 0;
    49		$max     = 0;
    50								// 表の作成
    51		echo "	<TABLE BORDER='1' STYLE='margin-right: auto; margin-left: auto'>\n";
    52		echo "		<TR>\n";
    53		echo "			<TH>商品名</TH>\n";
    54		echo "			<TH>商品在庫</TH>\n";
    55		echo "		</TR>\n";
    56		$result = mysql_query("SELECT * FROM commodity WHERE stock >= 10", $db);
    57		while ($row = mysql_fetch_row($result)) {
    58			echo "		<TR>\n";
    59			echo "			<TD>".$row[1]."</TD>\n";
    60			echo "			<TD>".$row[2]."</TD>\n";
    61			echo "		</TR>\n";
    62			$x_title[$n] = $row[1];
    63			$data[$n] = $row[2];
    64			if ($row[2] > $max)
    65				$max = $row[2];
    66			$n++;
    67		}
    68		echo "	</TABLE>\n";
    69	
    70		mysql_free_result($result);
    71								// グラフ表示データの作成
    72		$gp = $gp.",".$n;   // データの数
    73		for ($i1 = 0; $i1 < $n; $i1++)
    74			$gp = $gp.",".$x_title[$i1];   // x軸タイトル
    75		if ($max > 50) {
    76			$step = 20;
    77			$max  = 100;
    78		}
    79		else {
    80			$step = 10;
    81			$max  = 50;
    82		}
    83		$gp = $gp.",0,".$max.",".$step.",0";  // 最小値,最大値,刻み幅,小数点以下桁数
    84		for ($i1 = 0; $i1 < $n; $i1++)
    85			$gp = $gp.",".$data[$i1];   // データ
    86		$gp = $gp.",1,0";   // グラフタイトルと凡例の表示
    87						// データベースへの接続を切る
    88		mysql_close ($db);
    89	?>
    90		<BR>
    91		<DIV STYLE="text-align: center">
    92			<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="900" HEIGHT="600" onClick="Click(event)"></CANVAS>
    93		</DIV>
    94		<SCRIPT TYPE="text/javascript">
    95			graph("<?php echo $gp ?>");
    96		</SCRIPT>
    97	</BODY>
    98	</HTML>
    			
    13 行目

      MySQL と接続している.

    17 行目~ 27 行目

      データベース webshop に,テーブル commodity が存在した場合は,それを削除している.このプログラムで,テーブルの生成やデータの追加方法を示したいために行っている処理であり,一般的には必要ない.

    29 行目~ 30 行目

      テーブル commodity を作成している.この処理も,一般的には必要ない.

    33 行目~ 42 行目

      テーブル commodity にデータを追加している.この処理も,一般的には必要ない.

    45 行目

      95 行目において呼んでいる関数 graph は,グラフを描画するために必要な情報をカンマ「 , 」で区切った文字列として受け取り,その内容に従って様々なグラフを描画する.変数 $gp には,グラフを描画するために必要な情報が設定される.ここでは,「グラフの種類( 0 は棒グラフを示す),グラフタイトル, x 軸タイトル, y 軸タイトル,グラフの数,各グラフのタイトル(グラフの数だけ入力)」を設定している.

    46 行目~ 49 行目

      このプログラムでは,在庫数が多い商品に対して,商品毎の在庫数を棒グラフで表すことを目的としている.配列変数 $x_title には各商品の商品名,配列変数 $data にはその在庫数,変数 $n には商品の数,及び,変数 $max には最大在庫数が入る.

    51 行目~ 68 行目

      56 行目の SQL 文によって,在庫数が 10 以上の商品を選び,上で述べた変数に必要なデータを設定すると共に,商品名とその在庫数を表で表している.

    72 行目

      データ数(商品数)を変数 $gp に追加している.

    73 行目~ 74 行目

      各商品の商品名を変数 $gp に追加している.

    75 行目~ 82 行目

      $max の値に基づき,縦軸に対する刻み幅と最大値を設定している.

    83 行目

      変数 $gp に,「縦軸の最小値,縦軸の最大値,縦軸の刻み幅,縦軸に表示する数値の小数点以下桁数」を追加している.

    84 行目~ 85 行目

      各商品に対する在庫数を変数 $gp に追加している.グラフの数が複数の場合は,その数だけ,これらの行を繰り返すことになる.

    86 行目

      変数 $gp に,「グラフタイトルを表示するか否か( 1:表示,0:表示しない),凡例を表示するか否か( 1:表示,0:表示しない)」を追加している.

    95 行目

      変数 $gp に設定された内容を引数として,関数 graph を呼んでいる.

      上記のプログラムにおいて使用している関数 graph は,JavaScript で記述されており,与えられた引数に基づき,必要なグラフを描くための汎用関数です.graph では,グラフの種類によって異なるプログラムを呼び出し,グラフを描くことになります.以下に示すように,graph.js には,graph,及び,様々なグラフを描くための関数が定義されています.以下のプログラムを見れば,描きたいグラフによって,どのようなデータを,どのような順番で引数として渡される文字列に記述すべきかが分かると思います.

    canvas  = null;
    ctx     = null;
    title   = null;   // グラフタイトル, x軸タイトル, y軸タイトル
    n_g     = 0;   // グラフの数
    g_title = null;   // 各グラフのタイトル(凡例)
    n_p     = 0;   // データの数
    x_title = null;   // x軸への表示内容
    x_scale = null;   // x軸の最小値, y軸の最大値, y軸の刻み幅
    xx_scale = null;   // x_scale の対数値
    place_x = 0;   // x軸の小数点以下桁数
    y_scale = null;   // y軸の最小値, y軸の最大値, y軸の刻み幅
    place_y = 0;   // y軸の小数点以下桁数
    data_x  = null;   // データ(x軸,n_g×n_p個)
    data_y  = null;   // データ(y軸,n_g×n_p個)
    data_xx = null;   // data_x の対数値
    d_t     = true;   // グラフタイトル表示の有無
    d_g     = true;   // 凡例表示の有無
    kind    = 0;   // グラフの種類
    ver     = true;   // 縦か横か( true が縦)
    change  = "横表示";   // 表示切り替えボタン
    cx      = 0;   // 表示切り替えボタンのx座標
    cy      = 0;   // 表示切り替えボタンのy座標
    cw      = 0;   // 表示切り替えボタンの幅
    ch      = 0;   // 表示切り替えボタンの高さ
    x_base  = 0;   // キャンバスの左上のx座標
    y_base  = 0;   // キャンバスの左上のy座標
    cl      = new Array(10);   // グラフの色
    cl[0]   = "rgb(0, 0, 0)";
    cl[1]   = "rgb(255, 0, 255)";
    cl[2]   = "rgb(0, 0, 255)";
    cl[3]   = "rgb(128, 0, 128)";
    cl[4]   = "rgb(0, 255, 255)";
    cl[5]   = "rgb(0, 128, 128)";
    cl[6]   = "rgb(0, 128, 0)";
    cl[7]   = "rgb(192, 192, 192)";
    cl[8]   = "rgb(255, 0, 0)";
    cl[9]   = "rgb(128, 0, 0)";
    
    /****************************/
    /* グラフの描画             */
    /*      coded by Y.Suganuma */
    /****************************/
    function graph(gp)
    {
    	canvas        = document.getElementById('canvas_e');
    	canvas.width  = 900;   // キャンバス要素の幅
    	canvas.height = 600;   // キャンバス要素の高さ
    	ctx           = canvas.getContext('2d');   // キャンバスからコンテキストを取得
    	x_base        = canvas.offsetLeft;   // キャンバスの左上のx座標
    	y_base        = canvas.offsetTop;   // キャンバスの左上のy座標
    					// データの分離とグラフの選択
    	a    = gp.split(",");
    	kind = parseInt(a[0]);   // グラフの種類
    	k    = 1;
    							//
    							// 棒グラフ
    							//
    	if (kind == 0) {
    		title = new Array(3);   // グラフタイトル, x軸タイトル, y軸タイトル
    		for (i1 = 0; i1 < 3; i1++) {
    			title[i1] = a[k];
    			k++;
    		}
    		n_g = parseInt(a[k]);   // グラフの数
    		g_title = new Array(n_g);   // 各グラフのタイトル(凡例)
    		k++;
    		for (i1 = 0; i1 < n_g; i1++) {
    			g_title[i1] = a[k];
    			k++;
    		}
    		n_p = parseInt(a[k]);   // データの数
    		x_title = new Array(n_p);   // x軸への表示内容
    		k++;
    		for (i1 = 0; i1 < n_p; i1++) {
    			x_title[i1] = a[k];
    			k++;
    		}
    		y_scale = new Array(3);   // y軸の最小値, y軸の最大値, y軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			y_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_y = parseInt(a[k]);   // y軸の小数点以下桁数
    		k++;
    		data_y = new Array(n_g);   // データ(n_g×n_p個)
    		for (i1 = 0; i1 < n_g; i1++) {
    			data_y[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_y[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    		}
    		if (parseInt(a[k]) == 0)   // グラフタイトルの表示
    			d_t = false;
    		if (parseInt(a[k+1]) == 0)   // 凡例の表示
    			d_g = false;
    		BarGraph();
    	}
    							//
    							// 折れ線グラフ(1)
    							//
    	else if (kind == 1) {
    		title = new Array(3);   // グラフタイトル, x軸タイトル, y軸タイトル
    		for (i1 = 0; i1 < 3; i1++) {
    			title[i1] = a[k];
    			k++;
    		}
    		n_g = parseInt(a[k]);   // グラフの数
    		g_title = new Array(n_g);   // 各グラフのタイトル(凡例)
    		k++;
    		for (i1 = 0; i1 < n_g; i1++) {
    			g_title[i1] = a[k];
    			k++;
    		}
    		n_p = parseInt(a[k]);   // データの数
    		x_title = new Array(n_p);   // x軸への表示内容
    		k++;
    		for (i1 = 0; i1 < n_p; i1++) {
    			x_title[i1] = a[k];
    			k++;
    		}
    		y_scale = new Array(3);   // y軸の最小値, y軸の最大値, y軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			y_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_y = parseInt(a[k]);   // y軸の小数点以下桁数
    		k++;
    		data_y = new Array(n_g);   // データ(n_g×n_p個)
    		for (i1 = 0; i1 < n_g; i1++) {
    			data_y[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_y[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    		}
    		if (parseInt(a[k]) == 0)   // グラフタイトルの表示
    			d_t = false;
    		if (parseInt(a[k+1]) == 0)   // 凡例の表示
    			d_g = false;
    		LineGraph1();
    	}
    							//
    							// 折れ線グラフ(2)
    							//
    	else if (kind == 2) {
    		title = new Array(3);   // グラフタイトル, x軸タイトル, y軸タイトル
    		for (i1 = 0; i1 < 3; i1++) {
    			title[i1] = a[k];
    			k++;
    		}
    		n_g = parseInt(a[k]);   // グラフの数
    		g_title = new Array(n_g);   // 各グラフのタイトル(凡例)
    		k++;
    		for (i1 = 0; i1 < n_g; i1++) {
    			g_title[i1] = a[k];
    			k++;
    		}
    		x_scale = new Array(3);   // x軸の最小値, x軸の最大値, x軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			x_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_x = parseInt(a[k]);   // x軸の小数点以下桁数
    		k++;
    		y_scale = new Array(3);   // y軸の最小値, y軸の最大値, y軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			y_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_y = parseInt(a[k]);   // y軸の小数点以下桁数
    		k++;
    		n_p = parseInt(a[k]);   // データの数
    		k++;
    		data_x = new Array(n_g);   // x軸のデータ(n_g×n_p個)
    		data_y = new Array(n_g);   // y軸のデータ(n_g×n_p個)
    		for (i1 = 0; i1 < n_g; i1++) {
    			data_x[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_x[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    			data_y[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_y[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    		}
    		if (parseInt(a[k]) == 0)   // グラフタイトルの表示
    			d_t = false;
    		if (parseInt(a[k+1]) == 0)   // 凡例の表示
    			d_g = false;
    		LineGraph2();
    	}
    							//
    							// 積み上げ棒グラフ
    							//
    	else if (kind == 3) {
    		title = new Array(3);   // グラフタイトル, x軸タイトル, y軸タイトル
    		for (i1 = 0; i1 < 3; i1++) {
    			title[i1] = a[k];
    			k++;
    		}
    		n_g = parseInt(a[k]);   // グラフの数
    		g_title = new Array(n_g);   // 各グラフのタイトル(凡例)
    		k++;
    		for (i1 = 0; i1 < n_g; i1++) {
    			g_title[i1] = a[k];
    			k++;
    		}
    		n_p = parseInt(a[k]);   // データの数
    		x_title = new Array(n_p);   // x軸への表示内容(凡例)
    		k++;
    		for (i1 = 0; i1 < n_p; i1++) {
    			x_title[i1] = a[k];
    			k++;
    		}
    		y_scale = new Array(3);   // y軸の最小値, y軸の最大値, y軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			y_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_y = parseInt(a[k]);   // y軸の小数点以下桁数
    		k++;
    		data_y = new Array(n_g);   // データ(n_g×n_p個)
    		for (i1 = 0; i1 < n_g; i1++) {
    			data_y[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_y[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    		}
    		if (parseInt(a[k]) == 0)   // グラフタイトルの表示
    			d_t = false;
    		if (parseInt(a[k+1]) == 0)   // 凡例の表示
    			d_g = false;
    		StackGraph();
    	}
    							//
    							// 円グラフ
    							//
    	else if (kind == 4) {
    		title = new Array();   // グラフタイトル
    		title[0] = a[k];
    		k++;
    		n_p = parseInt(a[k]);   // データの数
    		x_title = new Array(n_p);   // 凡例
    		k++;
    		for (i1 = 0; i1 < n_p; i1++) {
    			x_title[i1] = a[k];
    			k++;
    		}
    		data_y = new Array();   // データ(n_p個)
    		for (i1 = 0; i1 < n_p; i1++) {
    			data_y[i1] = parseFloat(a[k]);
    			k++;
    		}
    		if (parseInt(a[k]) == 0)   // グラフタイトルの表示
    			d_t = false;
    		PieGraph();
    	}
    							//
    							// 散布図
    							//
    	else if (kind == 5) {
    		title = new Array(3);   // グラフタイトル, x軸タイトル, y軸タイトル
    		for (i1 = 0; i1 < 3; i1++) {
    			title[i1] = a[k];
    			k++;
    		}
    		x_scale = new Array(3);   // x軸の最小値, x軸の最大値, x軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			x_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_x = parseInt(a[k]);   // x軸の小数点以下桁数
    		k++;
    		y_scale = new Array(3);   // y軸の最小値, y軸の最大値, y軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			y_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_y = parseInt(a[k]);   // y軸の小数点以下桁数
    		k++;
    		n_p = parseInt(a[k]);   // データの数
    		k++;
    		data_y = new Array(2);   // データ(2×n_p個)
    		for (i1 = 0; i1 < 2; i1++) {
    			data_y[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_y[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    		}
    		if (parseInt(a[k]) == 0)   // グラフタイトルの表示
    			d_t = false;
    		ScatterDiagram();
    	}
    							//
    							// レーダーチャート
    							//
    	else if (kind == 6) {
    		title    = new Array(1);   // グラフタイトル
    		title[0] = a[k];
    		k++;
    		n_g = parseInt(a[k]);   // グラフの数
    		g_title = new Array(n_g);   // 各グラフのタイトル(凡例)
    		k++;
    		for (i1 = 0; i1 < n_g; i1++) {
    			g_title[i1] = a[k];
    			k++;
    		}
    		n_p = parseInt(a[k]);   // データの数
    		x_title = new Array(n_p);   // x軸への表示内容
    		k++;
    		for (i1 = 0; i1 < n_p; i1++) {
    			x_title[i1] = a[k];
    			k++;
    		}
    		y_scale = new Array(3);   // y軸の最小値, y軸の最大値, y軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			y_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_y = parseInt(a[k]);   // y軸の小数点以下桁数
    		k++;
    		data_y = new Array(n_g);   // データ(n_g×n_p個)
    		for (i1 = 0; i1 < n_g; i1++) {
    			data_y[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_y[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    		}
    		if (parseInt(a[k]) == 0)   // グラフタイトルの表示
    			d_t = false;
    		if (parseInt(a[k+1]) == 0)   // 凡例の表示
    			d_g = false;
    		RadarChart();
    	}
    							//
    							// ボード線図(片対数グラフ)
    							//
    	else {
    		title = new Array(3);   // グラフタイトル, x軸タイトル, y軸タイトル
    		for (i1 = 0; i1 < 3; i1++) {
    			title[i1] = a[k];
    			k++;
    		}
    		n_g = parseInt(a[k]);   // グラフの数
    		g_title = new Array(n_g);   // 各グラフのタイトル(凡例)
    		k++;
    		for (i1 = 0; i1 < n_g; i1++) {
    			g_title[i1] = a[k];
    			k++;
    		}
    		x_scale = new Array(3);   // x軸の最小値, x軸の最大値, x軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			x_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_x = parseInt(a[k]);   // x軸の小数点以下桁数
    		k++;
    		y_scale = new Array(3);   // y軸の最小値, y軸の最大値, y軸の刻み幅
    		for (i1 = 0; i1 < 3; i1++) {
    			y_scale[i1] = parseFloat(a[k]);
    			k++;
    		}
    		place_y = parseInt(a[k]);   // y軸の小数点以下桁数
    		k++;
    		n_p = parseInt(a[k]);   // データの数
    		k++;
    		data_x = new Array(n_g);   // x軸のデータ(n_g×n_p個)
    		data_y = new Array(n_g);   // y軸のデータ(n_g×n_p個)
    		for (i1 = 0; i1 < n_g; i1++) {
    			data_x[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_x[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    			data_y[i1] = new Array(n_p);
    			for (i2 = 0; i2 < n_p; i2++) {
    				data_y[i1][i2] = parseFloat(a[k]);
    				k++;
    			}
    		}
    		if (parseInt(a[k]) == 0)   // グラフタイトルの表示
    			d_t = false;
    		if (parseInt(a[k+1]) == 0)   // 凡例の表示
    			d_g = false;
    		Bode();
    	}
    }
    
    /****************************/
    /* 棒グラフの描画           */
    /*      coded by Y.Suganuma */
    /****************************/
    function BarGraph()
    {
    	tx = new Array();
    					//
    					// 描画領域の設定
    					//
    	ctx.fillStyle  = 'rgb(255, 255, 255)';
    	ctx.fillRect(10, 10, canvas.width-20, canvas.height-20);
    	x_l = 15;
    	x_r = canvas.width - 15;
    	y_u = 15;
    	y_d = canvas.height - 15;
    					//
    					// グラフタイトルの表示
    					//
    	r      = 0.05;   // タイトル領域の割合
    	f_size = ((y_d - y_u) < (x_r - x_l)) ? Math.floor((y_d - y_u) * r) : Math.floor((x_r - x_l) * r);
    	if (f_size < 5)
    		f_size = 5;
    	if (d_t) {
    		ctx.fillStyle  = 'rgb(0, 0, 0)';
    		ctx.font = f_size + "px 'MS ゴシック'";
    		met = ctx.measureText(title[0]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d;
    		ctx.fillText(title[0], px, py);
    		y_d -= f_size;
    	}
    							//
    							// 縦と横の変更ボタンの設置
    							//
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font = f_size + "px 'MS ゴシック'";
    	met = ctx.measureText(change);
    	cx  = x_r - met.width - 5;
    	cy  = y_u;
    	cw  = met.width + 5;
    	ch  = f_size + 5;
    	ctx.fillStyle  = 'rgb(255, 215, 0)';
    	ctx.fillRect(cx, cy, cw, ch);
    	ctx.fillStyle  = 'rgb(0, 0, 0)';
    	px = cx + 2;
    	py = cy + f_size;
    	ctx.fillText(change, px, py);
    					//
    					// 凡例の表示
    					//
    	if (d_g) {
    		han = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			met = ctx.measureText(g_title[i1]);
    			if (met.width > han)
    				han = met.width;
    		}
    		han += 15;
    		r    = 0.2;   // 凡例領域の割合
    		k1   = Math.floor((x_r - x_l) * r);
    		if (han > k1)
    			han = k1;
    		kx = x_r - han;
    		ky = y_u + 2 * f_size;
    		k  = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			ctx.fillStyle  = cl[k];
    			ctx.fillRect(kx, ky, 10, 5);
    			ctx.fillStyle  = 'rgb(0, 0, 0)';
    			ctx.fillText(g_title[i1], kx+15, ky+2*f_size/5);
    			k++;
    			if (k > 9)
    				k = 0;
    			ky += (f_size + 5);
    		}
    		x_r -= (han + 10);
    	}
    	else
    		x_r -= Math.floor(0.03 * (x_r - x_l));
    					//
    					// x軸及びy軸のタイトルの表示
    					//
    							// 縦表示
    	ctx.fillStyle = 'rgb(0, 0, 0)';
    	if (ver) {
    		if (title[1].length > 0 && title[1] != "-") {
    			met = ctx.measureText(title[1]);
    			px  = (x_l + x_r) / 2 - met.width / 2;
    			py  = y_d - 5;
    			ctx.fillText(title[1], px, py);
    			y_d -= (f_size + 5);
    		}
    		if (title[2].length > 0 && title[2] != "-") {
    			met = ctx.measureText(title[2]);
    			px  = x_l;
    			py  = y_u + 4 * f_size / 5;
    			ctx.fillText(title[2], px, py);
    			y_u += 4 * f_size / 5;
    		}
    	}
    							// 横表示
    	else {
    		if (title[2].length > 0 && title[2] != "-") {
    			met = ctx.measureText(title[2]);
    			px  = (x_l + x_r) / 2 - met.width / 2;
    			py  = y_d - 5;
    			ctx.fillText(title[2], px, py);
    			y_d -= (f_size + 5);
    		}
    		if (title[1].length > 0 && title[1].localeCompare("-") != 0) {
    			met = ctx.measureText(title[1]);
    			px  = x_l;
    			py  = y_u + 4 * f_size / 5;
    			ctx.fillText(title[1], px, py);
    			y_u += 4 * f_size / 5;
    		}
    	}
    	y_u += 10;
    					//
    					// x軸,y軸,及び,各軸の目盛り
    					//
    	ctx.lineWidth   = 1;
    	ctx.strokeStyle = "rgb(0, 0, 0)";
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font  = f_size + "px 'MS 明朝'";
    	y_d      -= (f_size + 5);
    							// 縦表示
    	if (ver) {
    									// y軸
    		y1  = y_scale[0];
    		k   = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    		len = 0;
    		b   = Math.pow(10, place_y);
    		for (i1 = 0; i1 < k+1; i1++) {
    			yy = Math.round(y1 * b).toString();
    			if (place_y == 0)
    				tx[i1] = yy;
    			else {
    				if (yy.length < place_y+1) {
    					n = place_y + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				tx[i1] = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    			}
    			met = ctx.measureText(tx[i1]);
    			if (met.width > len)
    				len = met.width;
    			y1 += y_scale[2];
    		}
    		ctx.moveTo(x_l+len+10, y_u);
    		ctx.lineTo(x_l+len+10, y_d);
    		ctx.moveTo(x_r, y_u);
    		ctx.lineTo(x_r, y_d);
    		y1 = y_scale[0];
    		x1 = y_d;
    		sp = (y_d - y_u) / k;
    		for (i1 = 0; i1 < k+1; i1++) {
    			ky  = Math.floor(Math.round(x1));
    			met = ctx.measureText(tx[i1]);
    			k1  = met.width;
    			px  = x_l + len - k1;
    			py  = ky + 2 * f_size / 5;
    			ctx.fillText(tx[i1], px, py);
    			ctx.moveTo(x_l+len+10, ky);
    			ctx.lineTo(x_r, ky);
    			y1 += y_scale[2];
    			x1 -= sp;
    		}
    		x_l += (len + 10);
    									// x軸
    		sp  = (x_r - x_l) / n_p;
    		x1  = x_l + sp / 2.0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			kx  = Math.floor(Math.round(x1));
    			met = ctx.measureText(x_title[i1]);
    			k1  = met.width;
    			px  = kx - k1 / 2;
    			py  = y_d + 11 * f_size / 10;
    			ctx.fillText(x_title[i1], px, py);
    			ctx.moveTo(kx, y_d);
    			ctx.lineTo(kx, y_d-5);
    			x1 += sp;
    		}
    	}
    							// 横表示
    	else {
    									// y軸
    		len = 0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			met = ctx.measureText(x_title[i1]);
    			if (met.width > len)
    				len = met.width;
    		}
    		ctx.moveTo(x_l+len+5, y_u);
    		ctx.lineTo(x_l+len+5, y_d);
    		ctx.moveTo(x_r, y_u);
    		ctx.lineTo(x_r, y_d);
    		sp = (y_d - y_u) / n_p;
    		y1 = y_d - sp / 2.0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			ky  = Math.floor(Math.round(y1));
    			met = ctx.measureText(x_title[n_p-1-i1]);
    			k1  = met.width;
    			px  = x_l + len - k1;
    			py  = ky + 2 * f_size / 5;
    			ctx.fillText(x_title[n_p-1-i1], px, py);
    			ctx.moveTo(x_l+len+5, ky);
    			ctx.lineTo(x_l+len+10, ky);
    			y1 -= sp;
    		}
    		ctx.moveTo(x_l+len+5, y_u);
    		ctx.lineTo(x_r, y_u);
    		ctx.moveTo(x_l+len+5, y_d);
    		ctx.lineTo(x_r, y_d);
    		x_l += (len + 5);
    									// x軸
    		k  = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    		x1 = y_scale[0];
    		y1 = x_l;
    		sp = (x_r - x_l) / k;
    		b  = Math.pow(10, place_y);
    		for (i1 = 0; i1 < k+1; i1++) {
    			kx = Math.floor(Math.round(y1));
    			yy = Math.round(x1 * b).toString();
    			if (place_y == 0)
    				st = yy;
    			else {
    				if (yy.length < place_y+1) {
    					n = place_y + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				st = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    			}
    			met = ctx.measureText(st);
    			k1  = met.width;
    			px  = kx - k1 / 2;
    			py  = y_d + f_size;
    			ctx.fillText(st, px, py);
    			if (i1 < k) {
    				ctx.moveTo(kx, y_d);
    				ctx.lineTo(kx, y_u);
    			}
    			x1 += y_scale[2];
    			y1 += sp;
    		}
    	}
    	ctx.stroke();
    					//
    					// グラフの表示
    					//
    							// 縦表示
    	if (ver) {
    		g_w = Math.floor(0.8 * (x_r - x_l) / (n_g * n_p));
    		sp  = (x_r - x_l) / n_p;
    		x1  = x_l + sp / 2.0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			kx = Math.floor(Math.round(x1));
    			k1 = 0;
    			k2 = kx - n_g * g_w / 2;
    			for (i2 = 0; i2 < n_g; i2++) {
    				ky = y_d - Math.floor((y_d - y_u) * (data_y[i2][i1] - y_scale[0]) / (y_scale[1] - y_scale[0]));
    				ctx.fillStyle = cl[k1];
    				ctx.fillRect(k2, ky, g_w, y_d-ky);
    				k2 += g_w;
    				k1++;
    				if (k1 > 9)
    					k1 = 0;
    			}
    			x1 += sp;
    		}
    	}
    							// 横表示
    	else {
    		g_w = Math.floor(0.8 * (y_d - y_u) / (n_g * n_p));
    		sp  = (y_d - y_u) / n_p;
    		y1  = y_d - sp / 2.0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			ky = Math.floor(Math.round(y1));
    			k1 = 0;
    			k2 = ky - n_g * g_w / 2;
    			for (i2 = 0; i2 < n_g; i2++) {
    				kx = Math.floor((x_r - x_l) * (data_y[i2][n_p-1-i1] - y_scale[0]) / (y_scale[1] - y_scale[0]));
    				ctx.fillStyle = cl[k1];
    				ctx.fillRect(x_l, k2, kx, g_w);
    				k2 += g_w;
    				k1++;
    				if (k1 > 9)
    					k1 = 0;
    			}
    			y1 -= sp;
    		}
    	}
    }
    
    /****************************/
    /* 折れ線グラフ(1)の描画 */
    /*      coded by Y.Suganuma */
    /****************************/
    function LineGraph1()
    {
    	tx = new Array();
    					//
    					// 描画領域の設定
    					//
    	ctx.fillStyle  = 'rgb(255, 255, 255)';
    	ctx.fillRect(10, 10, canvas.width-20, canvas.height-20);
    	x_l = 15;
    	x_r = canvas.width - 15;
    	y_u = 15;
    	y_d = canvas.height - 15;
    					//
    					// グラフタイトルの表示
    					//
    	r      = 0.05;   // タイトル領域の割合
    	f_size = ((y_d - y_u) < (x_r - x_l)) ? Math.floor((y_d - y_u) * r) : Math.floor((x_r - x_l) * r);
    	if (f_size < 5)
    		f_size = 5;
    	if (d_t) {
    		ctx.fillStyle  = 'rgb(0, 0, 0)';
    		ctx.font = f_size + "px 'MS ゴシック'";
    		met = ctx.measureText(title[0]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d;
    		ctx.fillText(title[0], px, py);
    		y_d -= f_size;
    	}
    							//
    							// 縦と横の変更ボタンの設置
    							//
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font = f_size + "px 'MS ゴシック'";
    	met = ctx.measureText(change);
    	cx  = x_r - met.width - 5;
    	cy  = y_u;
    	cw  = met.width + 5;
    	ch  = f_size + 5;
    	ctx.fillStyle  = 'rgb(255, 215, 0)';
    	ctx.fillRect(cx, cy, cw, ch);
    	ctx.fillStyle  = 'rgb(0, 0, 0)';
    	px = cx + 2;
    	py = cy + f_size;
    	ctx.fillText(change, px, py);
    					//
    					// 凡例の表示
    					//
    	if (d_g) {
    		han = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			met = ctx.measureText(g_title[i1]);
    			if (met.width > han)
    				han = met.width;
    		}
    		han += 15;
    		r    = 0.2;   // 凡例領域の割合
    		k1   = Math.floor((x_r - x_l) * r);
    		if (han > k1)
    			han = k1;
    		kx = x_r - han;
    		ky = y_u + 2 * f_size;
    		k  = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			ctx.fillStyle  = cl[k];
    			ctx.fillRect(kx, ky, 10, 5);
    			ctx.fillStyle  = 'rgb(0, 0, 0)';
    			ctx.fillText(g_title[i1], kx+15, ky+2*f_size/5);
    			k++;
    			if (k > 9)
    				k = 0;
    			ky += (f_size + 5);
    		}
    		x_r -= (han + 10);
    	}
    	else
    		x_r -= Math.floor(0.03 * (x_r - x_l));
    					//
    					// x軸及びy軸のタイトルの表示
    					//
    							// 縦表示
    	ctx.fillStyle = 'rgb(0, 0, 0)';
    	if (ver) {
    		if (title[1].length > 0 && title[1] != "-") {
    			met = ctx.measureText(title[1]);
    			px  = (x_l + x_r) / 2 - met.width / 2;
    			py  = y_d - 5;
    			ctx.fillText(title[1], px, py);
    			y_d -= (f_size + 5);
    		}
    		if (title[2].length > 0 && title[2] != "-") {
    			met = ctx.measureText(title[2]);
    			px  = x_l;
    			py  = y_u + 4 * f_size / 5;
    			ctx.fillText(title[2], px, py);
    			y_u += 4 * f_size / 5;
    		}
    	}
    							// 横表示
    	else {
    		if (title[2].length > 0 && title[2] != "-") {
    			met = ctx.measureText(title[2]);
    			px  = (x_l + x_r) / 2 - met.width / 2;
    			py  = y_d - 5;
    			ctx.fillText(title[2], px, py);
    			y_d -= (f_size + 5);
    		}
    		if (title[1].length > 0 && title[1].localeCompare("-") != 0) {
    			met = ctx.measureText(title[1]);
    			px  = x_l;
    			py  = y_u + 4 * f_size / 5;
    			ctx.fillText(title[1], px, py);
    			y_u += 4 * f_size / 5;
    		}
    	}
    	y_u += 10;
    					//
    					// x軸,y軸,及び,各軸の目盛り
    					//
    	ctx.lineWidth   = 1;
    	ctx.strokeStyle = "rgb(0, 0, 0)";
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font  = f_size + "px 'MS 明朝'";
    	y_d      -= (f_size + 5);
    							// 縦表示
    	if (ver) {
    									// y軸
    		y1  = y_scale[0];
    		k   = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    		len = 0;
    		b   = Math.pow(10, place_y);
    		for (i1 = 0; i1 < k+1; i1++) {
    			yy = Math.round(y1 * b).toString();
    			if (place_y == 0)
    				tx[i1] = yy;
    			else {
    				if (yy.length < place_y+1) {
    					n = place_y + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				tx[i1] = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    			}
    			met = ctx.measureText(tx[i1]);
    			if (met.width > len)
    				len = met.width;
    			y1 += y_scale[2];
    		}
    		ctx.moveTo(x_l+len+10, y_u);
    		ctx.lineTo(x_l+len+10, y_d);
    		ctx.moveTo(x_r, y_u);
    		ctx.lineTo(x_r, y_d);
    		y1 = y_scale[0];
    		x1 = y_d;
    		sp = (y_d - y_u) / k;
    		for (i1 = 0; i1 < k+1; i1++) {
    			ky  = Math.floor(Math.round(x1));
    			met = ctx.measureText(tx[i1]);
    			k1  = met.width;
    			px  = x_l + len - k1;
    			py  = ky + 2 * f_size / 5;
    			ctx.fillText(tx[i1], px, py);
    			ctx.moveTo(x_l+len+10, ky);
    			ctx.lineTo(x_r, ky);
    			y1 += y_scale[2];
    			x1 -= sp;
    		}
    		x_l += (len + 10);
    									// x軸
    		sp  = (x_r - x_l) / n_p;
    		x1  = x_l + sp / 2.0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			kx  = Math.floor(Math.round(x1));
    			met = ctx.measureText(x_title[i1]);
    			k1  = met.width;
    			px  = kx - k1 / 2;
    			py  = y_d + 11 * f_size / 10;
    			ctx.fillText(x_title[i1], px, py);
    			ctx.moveTo(kx, y_d);
    			ctx.lineTo(kx, y_d-5);
    			x1 += sp;
    		}
    	}
    							// 横表示
    	else {
    									// y軸
    		len = 0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			met = ctx.measureText(x_title[i1]);
    			if (met.width > len)
    				len = met.width;
    		}
    		ctx.moveTo(x_l+len+5, y_u);
    		ctx.lineTo(x_l+len+5, y_d);
    		ctx.moveTo(x_r, y_u);
    		ctx.lineTo(x_r, y_d);
    		sp = (y_d - y_u) / n_p;
    		y1 = y_d - sp / 2.0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			ky  = Math.floor(Math.round(y1));
    			met = ctx.measureText(x_title[n_p-1-i1]);
    			k1  = met.width;
    			px  = x_l + len - k1;
    			py  = ky + 2 * f_size / 5;
    			ctx.fillText(x_title[n_p-1-i1], px, py);
    			ctx.moveTo(x_l+len+5, ky);
    			ctx.lineTo(x_l+len+10, ky);
    			y1 -= sp;
    		}
    		ctx.moveTo(x_l+len+5, y_u);
    		ctx.lineTo(x_r, y_u);
    		ctx.moveTo(x_l+len+5, y_d);
    		ctx.lineTo(x_r, y_d);
    		x_l += (len + 5);
    									// x軸
    		k  = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    		x1 = y_scale[0];
    		y1 = x_l;
    		sp = (x_r - x_l) / k;
    		b  = Math.pow(10, place_y);
    		for (i1 = 0; i1 < k+1; i1++) {
    			kx = Math.floor(Math.round(y1));
    			yy = Math.round(x1 * b).toString();
    			if (place_y == 0)
    				st = yy;
    			else {
    				if (yy.length < place_y+1) {
    					n = place_y + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				st = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    			}
    			met = ctx.measureText(st);
    			k1  = met.width;
    			px  = kx - k1 / 2;
    			py  = y_d + f_size;
    			ctx.fillText(st, px, py);
    			if (i1 < k) {
    				ctx.moveTo(kx, y_d);
    				ctx.lineTo(kx, y_u);
    			}
    			x1 += y_scale[2];
    			y1 += sp;
    		}
    	}
    	ctx.stroke();
    					//
    					// グラフの表示
    					//
    	ctx.lineWidth = 2;
    	cr = f_size / 4;
    	if (cr == 0)
    		cr = 1;
    									// 縦表示
    	if (ver) {
    		sp = (x_r - x_l) / n_p;
    		k1 = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			x1  = x_l + sp / 2.0;
    			kx1 = 0;
    			ky1 = 0;
    			ctx.strokeStyle = cl[k1];  
    			ctx.fillStyle   = cl[k1];
    			for (i2 = 0; i2 < n_p; i2++) {
    				kx = Math.floor(Math.round(x1));
    				ky = y_d - Math.floor((y_d - y_u) * (data_y[i1][i2] - y_scale[0]) / (y_scale[1] - y_scale[0]));
    				ctx.beginPath();
    				ctx.arc(kx, ky, cr, 0, 2*Math.PI, false);
    				ctx.fill();
    				if (i2 > 0) {
    					ctx.moveTo(kx1, ky1);
    					ctx.lineTo(kx, ky);
    					ctx.stroke();
    				}
    				kx1  = kx;
    				ky1  = ky;
    				x1  += sp;
    			}
    			k1++;
    			if (k1 > 9)
    				k1 = 0;
    		}
    	}
    									// 横表示
    	else {
    		sp = (y_d - y_u) / n_p;
    		k1 = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			y1  = y_d - sp / 2.0;
    			kx1 = 0;
    			ky1 = 0;
    			ctx.strokeStyle = cl[k1];  
    			ctx.fillStyle   = cl[k1];
    			for (i2 = 0; i2 < n_p; i2++) {
    				ky = Math.floor(Math.round(y1));
    				kx = x_l + Math.floor((x_r - x_l) * (data_y[i1][n_p-1-i2] - y_scale[0]) / (y_scale[1] - y_scale[0]));
    				ctx.beginPath();
    				ctx.arc(kx, ky, cr, 0, 2*Math.PI, false);
    				ctx.fill();
    				if (i2 > 0) {
    					ctx.moveTo(kx1, ky1);
    					ctx.lineTo(kx, ky);
    					ctx.stroke();
    				}
    				kx1  = kx;
    				ky1  = ky;
    				y1  -= sp;
    			}
    			k1++;
    			if (k1 > 9)
    				k1 = 0;
    		}
    	}
    }
    
    /****************************/
    /* 折れ線グラフ(2)の描画 */
    /*      coded by Y.Suganuma */
    /****************************/
    function LineGraph2()
    {
    	tx = new Array();
    					//
    					// 描画領域の設定
    					//
    	ctx.fillStyle  = 'rgb(255, 255, 255)';
    	ctx.fillRect(10, 10, canvas.width-20, canvas.height-20);
    	x_l = 15;
    	x_r = canvas.width - 15;
    	y_u = 15;
    	y_d = canvas.height - 15;
    					//
    					// グラフタイトルの表示
    					//
    	r      = 0.05;   // タイトル領域の割合
    	f_size = ((y_d - y_u) < (x_r - x_l)) ? Math.floor((y_d - y_u) * r) : Math.floor((x_r - x_l) * r);
    	if (f_size < 5)
    		f_size = 5;
    	if (d_t) {
    		ctx.fillStyle  = 'rgb(0, 0, 0)';
    		ctx.font = f_size + "px 'MS ゴシック'";
    		met = ctx.measureText(title[0]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d;
    		ctx.fillText(title[0], px, py);
    		y_d -= f_size;
    	}
    							//
    							// 縦と横の変更ボタンの設置
    							//
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font = f_size + "px 'MS ゴシック'";
    	met = ctx.measureText(change);
    	cx  = x_r - met.width - 5;
    	cy  = y_u;
    	cw  = met.width + 5;
    	ch  = f_size + 5;
    	ctx.fillStyle  = 'rgb(255, 215, 0)';
    	ctx.fillRect(cx, cy, cw, ch);
    	ctx.fillStyle  = 'rgb(0, 0, 0)';
    	px = cx + 2;
    	py = cy + f_size;
    	ctx.fillText(change, px, py);
    					//
    					// 凡例の表示
    					//
    	if (d_g) {
    		han = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			met = ctx.measureText(g_title[i1]);
    			if (met.width > han)
    				han = met.width;
    		}
    		han += 15;
    		r    = 0.2;   // 凡例領域の割合
    		k1   = Math.floor((x_r - x_l) * r);
    		if (han > k1)
    			han = k1;
    		kx = x_r - han;
    		ky = y_u + 2 * f_size;
    		k  = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			ctx.fillStyle  = cl[k];
    			ctx.fillRect(kx, ky, 10, 5);
    			ctx.fillStyle  = 'rgb(0, 0, 0)';
    			ctx.fillText(g_title[i1], kx+15, ky+2*f_size/5);
    			k++;
    			if (k > 9)
    				k = 0;
    			ky += (f_size + 5);
    		}
    		x_r -= (han + 10);
    	}
    	else
    		x_r -= Math.floor(0.03 * (x_r - x_l));
    					//
    					// x軸及びy軸のタイトルの表示
    					//
    							// 縦表示
    	ctx.fillStyle = 'rgb(0, 0, 0)';
    	if (ver) {
    		if (title[1].length > 0 && title[1] != "-") {
    			met = ctx.measureText(title[1]);
    			px  = (x_l + x_r) / 2 - met.width / 2;
    			py  = y_d - 5;
    			ctx.fillText(title[1], px, py);
    			y_d -= (f_size + 5);
    		}
    		if (title[2].length > 0 && title[2] != "-") {
    			met = ctx.measureText(title[2]);
    			px  = x_l;
    			py  = y_u + 4 * f_size / 5;
    			ctx.fillText(title[2], px, py);
    			y_u += 4 * f_size / 5;
    		}
    	}
    							// 横表示
    	else {
    		if (title[2].length > 0 && title[2] != "-") {
    			met = ctx.measureText(title[2]);
    			px  = (x_l + x_r) / 2 - met.width / 2;
    			py  = y_d - 5;
    			ctx.fillText(title[2], px, py);
    			y_d -= (f_size + 5);
    		}
    		if (title[1].length > 0 && title[1].localeCompare("-") != 0) {
    			met = ctx.measureText(title[1]);
    			px  = x_l;
    			py  = y_u + 4 * f_size / 5;
    			ctx.fillText(title[1], px, py);
    			y_u += 4 * f_size / 5;
    		}
    	}
    	y_u += 10;
    					//
    					// x軸,y軸,及び,各軸の目盛り
    					//
    	ctx.lineWidth   = 1;
    	ctx.strokeStyle = "rgb(0, 0, 0)";
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font  = f_size + "px 'MS 明朝'";
    	y_d      -= (f_size + 5);
    							// 縦表示
    	if (ver) {
    									// y軸
    		y1  = y_scale[0];
    		k   = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    		len = 0;
    		b   = Math.pow(10, place_y);
    		for (i1 = 0; i1 < k+1; i1++) {
    			yy = Math.round(y1 * b).toString();
    			if (place_y == 0)
    				tx[i1] = yy;
    			else {
    				if (yy.length < place_y+1) {
    					n = place_y + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				tx[i1] = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    			}
    			met = ctx.measureText(tx[i1]);
    			if (met.width > len)
    				len = met.width;
    			y1 += y_scale[2];
    		}
    		ctx.moveTo(x_l+len+10, y_u);
    		ctx.lineTo(x_l+len+10, y_d);
    		ctx.moveTo(x_r, y_u);
    		ctx.lineTo(x_r, y_d);
    		y1 = y_scale[0];
    		x1 = y_d;
    		sp = (y_d - y_u) / k;
    		for (i1 = 0; i1 < k+1; i1++) {
    			ky  = Math.floor(Math.round(x1));
    			met = ctx.measureText(tx[i1]);
    			k1  = met.width;
    			px  = x_l + len - k1;
    			py  = ky + 2 * f_size / 5;
    			ctx.fillText(tx[i1], px, py);
    			ctx.moveTo(x_l+len+10, ky);
    			ctx.lineTo(x_r, ky);
    			y1 += y_scale[2];
    			x1 -= sp;
    		}
    		x_l += (len + 10);
    									// x軸
    		k  = Math.floor((x_scale[1] - x_scale[0]) / (0.99 * x_scale[2]));
    		x1 = x_scale[0];
    		y1 = x_l;
    		sp = (x_r - x_l) / k;
    		b  = Math.pow(10, place_x);
    		for (i1 = 0; i1 < k+1; i1++) {
    			kx = Math.floor(Math.round(y1));
    			yy = Math.round(x1 * b).toString();
    			if (place_x == 0)
    				st = yy;
    			else {
    				if (yy.length < place_x+1) {
    					n = place_x + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				st = yy.substr(0,yy.length-place_x) + "." + yy.substr(yy.length-place_x,place_x);
    			}
    			met = ctx.measureText(st);
    			k1  = met.width;
    			px  = kx - k1 / 2;
    			py  = y_d + f_size;
    			ctx.fillText(st, px, py);
    			if (i1 < k) {
    				ctx.moveTo(kx, y_d);
    				ctx.lineTo(kx, y_u);
    			}
    			x1 += x_scale[2];
    			y1 += sp;
    		}
    	}
    							// 横表示
    	else {
    									// y軸
    		y1  = x_scale[0];
    		k   = Math.floor((x_scale[1] - x_scale[0]) / (0.99 * x_scale[2]));
    		len = 0;
    		b   = Math.pow(10, place_x);
    		for (i1 = 0; i1 < k+1; i1++) {
    			yy = Math.round(y1 * b).toString();
    			if (place_x == 0)
    				tx[i1] = yy;
    			else {
    				if (yy.length < place_x+1) {
    					n = place_x + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				tx[i1] = yy.substr(0,yy.length-place_x) + "." + yy.substr(yy.length-place_x,place_x);
    			}
    			met = ctx.measureText(tx[i1]);
    			if (met.width > len)
    				len = met.width;
    			y1 += x_scale[2];
    		}
    		ctx.moveTo(x_l+len+10, y_u);
    		ctx.lineTo(x_l+len+10, y_d);
    		ctx.moveTo(x_r, y_u);
    		ctx.lineTo(x_r, y_d);
    		y1 = x_scale[0];
    		x1 = y_d;
    		sp = (y_d - y_u) / k;
    		for (i1 = 0; i1 < k+1; i1++) {
    			ky  = Math.floor(Math.round(x1));
    			met = ctx.measureText(tx[i1]);
    			k1  = met.width;
    			px  = x_l + len - k1;
    			py  = ky + 2 * f_size / 5;
    			ctx.fillText(tx[i1], px, py);
    			ctx.moveTo(x_l+len+10, ky);
    			ctx.lineTo(x_r, ky);
    			y1 += x_scale[2];
    			x1 -= sp;
    		}
    		x_l += (len + 10);
    									// x軸
    		k  = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    		x1 = y_scale[0];
    		y1 = x_l;
    		sp = (x_r - x_l) / k;
    		b  = Math.pow(10, place_y);
    		for (i1 = 0; i1 < k+1; i1++) {
    			kx = Math.floor(Math.round(y1));
    			yy = Math.round(x1 * b).toString();
    			if (place_y == 0)
    				st = yy;
    			else {
    				if (yy.length < place_y+1) {
    					n = place_y + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				st = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    			}
    			met = ctx.measureText(st);
    			k1  = met.width;
    			px  = kx - k1 / 2;
    			py  = y_d + f_size;
    			ctx.fillText(st, px, py);
    			if (i1 < k) {
    				ctx.moveTo(kx, y_d);
    				ctx.lineTo(kx, y_u);
    			}
    			x1 += y_scale[2];
    			y1 += sp;
    		}
    	}
    	ctx.stroke();
    					//
    					// グラフの表示
    					//
    	ctx.lineWidth = 2;
    	cr = f_size / 4;
    	if (cr == 0)
    		cr = 1;
    							// 縦表示
    	if (ver) {
    		k1 = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			kx1 = 0;
    			ky1 = 0;
    			ctx.strokeStyle = cl[k1];  
    			ctx.fillStyle   = cl[k1];
    			for (i2 = 0; i2 < n_p; i2++) {
    				kx = x_l + Math.floor((x_r - x_l) * (data_x[i1][i2] - x_scale[0]) / (x_scale[1] - x_scale[0]));
    				ky = y_d - Math.floor((y_d - y_u) * (data_y[i1][i2] - y_scale[0]) / (y_scale[1] - y_scale[0]));
    				ctx.beginPath();
    				ctx.arc(kx, ky, cr, 0, 2*Math.PI, false);
    				ctx.fill();
    				if (i2 > 0) {
    					ctx.moveTo(kx1, ky1);
    					ctx.lineTo(kx, ky);
    					ctx.stroke();
    				}
    				kx1 = kx;
    				ky1 = ky;
    			}
    			k1++;
    			if (k1 > 9)
    				k1 = 0;
    		}
    	}
    							// 横表示
    	else {
    		k1  = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			kx1 = 0;
    			ky1 = 0;
    			ctx.strokeStyle = cl[k1];  
    			ctx.fillStyle   = cl[k1];
    			for (i2 = 0; i2 < n_p; i2++) {
    				kx = x_l + Math.floor((x_r - x_l) * (data_y[i1][i2] - y_scale[0]) / (y_scale[1] - y_scale[0]));
    				ky = y_d - Math.floor((y_d - y_u) * (data_x[i1][i2] - x_scale[0]) / (x_scale[1] - x_scale[0]));
    				ctx.beginPath();
    				ctx.arc(kx, ky, cr, 0, 2*Math.PI, false);
    				ctx.fill();
    				if (i2 > 0) {
    					ctx.moveTo(kx1, ky1);
    					ctx.lineTo(kx, ky);
    					ctx.stroke();
    				}
    				kx1 = kx;
    				ky1 = ky;
    			}
    			k1++;
    			if (k1 > 9)
    				k1 = 0;
    		}
    	}
    }
    
    /****************************/
    /* 積み上げ棒グラフの描画   */
    /*      coded by Y.Suganuma */
    /****************************/
    function StackGraph()
    {
    	tx = new Array();
    					//
    					// 描画領域の設定
    					//
    	ctx.fillStyle  = 'rgb(255, 255, 255)';
    	ctx.fillRect(10, 10, canvas.width-20, canvas.height-20);
    	x_l = 15;
    	x_r = canvas.width - 15;
    	y_u = 15;
    	y_d = canvas.height - 15;
    					//
    					// グラフタイトルの表示
    					//
    	r      = 0.05;   // タイトル領域の割合
    	f_size = ((y_d - y_u) < (x_r - x_l)) ? Math.floor((y_d - y_u) * r) : Math.floor((x_r - x_l) * r);
    	if (f_size < 5)
    		f_size = 5;
    	if (d_t) {
    		ctx.fillStyle  = 'rgb(0, 0, 0)';
    		ctx.font = f_size + "px 'MS ゴシック'";
    		met = ctx.measureText(title[0]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d;
    		ctx.fillText(title[0], px, py);
    		y_d -= f_size;
    	}
    							//
    							// 縦と横の変更ボタンの設置
    							//
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font = f_size + "px 'MS ゴシック'";
    	met = ctx.measureText(change);
    	cx  = x_r - met.width - 5;
    	cy  = y_u;
    	cw  = met.width + 5;
    	ch  = f_size + 5;
    	ctx.fillStyle  = 'rgb(255, 215, 0)';
    	ctx.fillRect(cx, cy, cw, ch);
    	ctx.fillStyle  = 'rgb(0, 0, 0)';
    	px = cx + 2;
    	py = cy + f_size;
    	ctx.fillText(change, px, py);
    					//
    					// 凡例の表示
    					//
    	if (d_g) {
    		han = 0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			met = ctx.measureText(x_title[i1]);
    			if (met.width > han)
    				han = met.width;
    		}
    		han += 15;
    		r    = 0.2;   // 凡例領域の割合
    		k1   = Math.floor((x_r - x_l) * r);
    		if (han > k1)
    			han = k1;
    		kx = x_r - han;
    		ky = y_u + 2 * f_size;
    		k  = 0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			ctx.fillStyle  = cl[k];
    			ctx.fillRect(kx, ky, 10, 5);
    			ctx.fillStyle  = 'rgb(0, 0, 0)';
    			ctx.fillText(x_title[i1], kx+15, ky+2*f_size/5);
    			k++;
    			if (k > 9)
    				k = 0;
    			ky += (f_size + 5);
    		}
    		x_r -= (han + 10);
    	}
    	else
    		x_r -= Math.floor(0.03 * (x_r - x_l));
    					//
    					// x軸及びy軸のタイトルの表示
    					//
    							// 縦表示
    	ctx.fillStyle = 'rgb(0, 0, 0)';
    	if (ver) {
    		if (title[1].length > 0 && title[1] != "-") {
    			met = ctx.measureText(title[1]);
    			px  = (x_l + x_r) / 2 - met.width / 2;
    			py  = y_d - 5;
    			ctx.fillText(title[1], px, py);
    			y_d -= (f_size + 5);
    		}
    		if (title[2].length > 0 && title[2] != "-") {
    			met = ctx.measureText(title[2]);
    			px  = x_l;
    			py  = y_u + 4 * f_size / 5;
    			ctx.fillText(title[2], px, py);
    			y_u += 4 * f_size / 5;
    		}
    	}
    							// 横表示
    	else {
    		if (title[2].length > 0 && title[2] != "-") {
    			met = ctx.measureText(title[2]);
    			px  = (x_l + x_r) / 2 - met.width / 2;
    			py  = y_d - 5;
    			ctx.fillText(title[2], px, py);
    			y_d -= (f_size + 5);
    		}
    		if (title[1].length > 0 && title[1].localeCompare("-") != 0) {
    			met = ctx.measureText(title[1]);
    			px  = x_l;
    			py  = y_u + 4 * f_size / 5;
    			ctx.fillText(title[1], px, py);
    			y_u += 4 * f_size / 5;
    		}
    	}
    	y_u += 10;
    					//
    					// x軸,y軸,及び,各軸の目盛り
    					//
    	ctx.lineWidth   = 1;
    	ctx.strokeStyle = "rgb(0, 0, 0)";
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font  = f_size + "px 'MS 明朝'";
    	y_d      -= (f_size + 5);
    							// 縦表示
    	if (ver) {
    									// y軸
    		y1  = y_scale[0];
    		k   = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    		len = 0;
    		b   = Math.pow(10, place_y);
    		for (i1 = 0; i1 < k+1; i1++) {
    			yy = Math.round(y1 * b).toString();
    			if (place_y == 0)
    				tx[i1] = yy;
    			else {
    				if (yy.length < place_y+1) {
    					n = place_y + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				tx[i1] = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    			}
    			met = ctx.measureText(tx[i1]);
    			if (met.width > len)
    				len = met.width;
    			y1 += y_scale[2];
    		}
    		ctx.moveTo(x_l+len+10, y_u);
    		ctx.lineTo(x_l+len+10, y_d);
    		ctx.moveTo(x_r, y_u);
    		ctx.lineTo(x_r, y_d);
    		y1 = y_scale[0];
    		x1 = y_d;
    		sp = (y_d - y_u) / k;
    		for (i1 = 0; i1 < k+1; i1++) {
    			ky  = Math.floor(Math.round(x1));
    			met = ctx.measureText(tx[i1]);
    			k1  = met.width;
    			px  = x_l + len - k1;
    			py  = ky + 2 * f_size / 5;
    			ctx.fillText(tx[i1], px, py);
    			ctx.moveTo(x_l+len+10, ky);
    			ctx.lineTo(x_r, ky);
    			y1 += y_scale[2];
    			x1 -= sp;
    		}
    		x_l += (len + 10);
    									// x軸
    		sp  = (x_r - x_l) / n_g;
    		x1  = x_l + sp / 2.0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			kx  = Math.floor(Math.round(x1));
    			met = ctx.measureText(g_title[i1]);
    			k1  = met.width;
    			px  = kx - k1 / 2;
    			py  = y_d + 11 * f_size / 10;
    			ctx.fillText(g_title[i1], px, py);
    			ctx.moveTo(kx, y_d);
    			ctx.lineTo(kx, y_d-5);
    			x1 += sp;
    		}
    	}
    							// 横表示
    	else {
    									// y軸
    		len = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			met = ctx.measureText(g_title[i1]);
    			if (met.width > len)
    				len = met.width;
    		}
    		ctx.moveTo(x_l+len+5, y_u);
    		ctx.lineTo(x_l+len+5, y_d);
    		ctx.moveTo(x_r, y_u);
    		ctx.lineTo(x_r, y_d);
    		sp = (y_d - y_u) / n_g;
    		y1 = y_d - sp / 2.0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			ky  = Math.floor(Math.round(y1));
    			met = ctx.measureText(g_title[n_g-1-i1]);
    			k1  = met.width;
    			px  = x_l + len - k1;
    			py  = ky + 2 * f_size / 5;
    			ctx.fillText(g_title[n_g-1-i1], px, py);
    			ctx.moveTo(x_l+len+5, ky);
    			ctx.lineTo(x_l+len+10, ky);
    			y1 -= sp;
    		}
    		ctx.moveTo(x_l+len+5, y_u);
    		ctx.lineTo(x_r, y_u);
    		ctx.moveTo(x_l+len+5, y_d);
    		ctx.lineTo(x_r, y_d);
    		x_l += (len + 5);
    									// x軸
    		k  = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    		x1 = y_scale[0];
    		y1 = x_l;
    		sp = (x_r - x_l) / k;
    		b  = Math.pow(10, place_y);
    		for (i1 = 0; i1 < k+1; i1++) {
    			kx = Math.floor(Math.round(y1));
    			yy = Math.round(x1 * b).toString();
    			if (place_y == 0)
    				st = yy;
    			else {
    				if (yy.length < place_y+1) {
    					n = place_y + 1 - yy.length;
    					for (i2 = 0; i2 < n; i2++)
    						yy = "0" + yy;
    				}
    				st = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    			}
    			met = ctx.measureText(st);
    			k1  = met.width;
    			px  = kx - k1 / 2;
    			py  = y_d + f_size;
    			ctx.fillText(st, px, py);
    			if (i1 < k) {
    				ctx.moveTo(kx, y_d);
    				ctx.lineTo(kx, y_u);
    			}
    			x1 += y_scale[2];
    			y1 += sp;
    		}
    	}
    	ctx.stroke();
    					//
    					// グラフの表示
    					//
    							// 縦表示
    	if (ver) {
    		g_w = Math.floor(0.8 * (x_r - x_l) / n_g);
    		sp  = (x_r - x_l) / n_g;
    		x1  = x_l + sp / 2.0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			kx = Math.round(x1);
    			k1 = 0;
    			y1 = y_d;
    			for (i2 = 0; i2 < n_p; i2++) {
    				ky = Math.round(y1);
    				y2 = (y_d - y_u) * (data_y[i1][i2] - y_scale[0]) / (y_scale[1] - y_scale[0]);
    				k2 = Math.round(y2);
    				ctx.fillStyle = cl[k1];
    				ctx.fillRect(kx-g_w/2, ky-k2, g_w, k2);
    				y1 -= y2;
    				k1++;
    				if (k1 > 9)
    					k1 = 0;
    			}
    			x1 += sp;
    		}
    	}
    							// 横表示
    	else {
    		g_w = Math.floor(0.8 * (y_d - y_u) / n_g);
    		sp  = (y_d - y_u) / n_g;
    		y1  = y_d - sp / 2.0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			ky = Math.round(y1);
    			k1 = 0;
    			x1 = x_l;
    			for (i2 = 0; i2 < n_p; i2++) {
    				kx = Math.round(x1);
    				y2 = (x_r - x_l) * (data_y[n_g-1-i1][i2] - y_scale[0]) / (y_scale[1] - y_scale[0]);
    				k2 = Math.round(y2);
    				ctx.fillStyle = cl[k1];
    				ctx.fillRect(kx, ky-g_w/2, k2, g_w);
    				x1 += y2;
    				k1++;
    				if (k1 > 9)
    					k1 = 0;
    			}
    			y1 -= sp;
    		}
    	}
    }
    
    /****************************/
    /* 円グラフの描画           */
    /*      coded by Y.Suganuma */
    /****************************/
    function PieGraph()
    {
    	tx = new Array();
    					//
    					// 描画領域の設定
    					//
    	ctx.fillStyle  = 'rgb(255, 255, 255)';
    	ctx.fillRect(10, 10, canvas.width-20, canvas.height-20);
    	x_l = 15;
    	x_r = canvas.width - 15;
    	y_u = 15;
    	y_d = canvas.height - 15;
    					//
    					// グラフタイトルの表示
    					//
    	r      = 0.05;   // タイトル領域の割合
    	f_size = ((y_d - y_u) < (x_r - x_l)) ? Math.floor((y_d - y_u) * r) : Math.floor((x_r - x_l) * r);
    	if (f_size < 5)
    		f_size = 5;
    	if (d_t) {
    		ctx.fillStyle  = 'rgb(0, 0, 0)';
    		ctx.font = f_size + "px 'MS ゴシック'";
    		met = ctx.measureText(title[0]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d;
    		ctx.fillText(title[0], px, py);
    		y_d -= f_size;
    	}
    					//
    					// 凡例の表示
    					//
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font = f_size + "px 'MS ゴシック'";
    	if (d_g) {
    		han = 0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			met = ctx.measureText(x_title[i1]);
    			if (met.width > han)
    				han = met.width;
    		}
    		han += 15;
    		r    = 0.2;   // 凡例領域の割合
    		k1   = Math.floor((x_r - x_l) * r);
    		if (han > k1)
    			han = k1;
    		kx = x_r - han;
    		ky = y_u + f_size / 2;
    		k  = 0;
    		for (i1 = 0; i1 < n_p; i1++) {
    			ctx.fillStyle  = cl[k];
    			ctx.fillRect(kx, ky, 10, 5);
    			ctx.fillStyle  = 'rgb(0, 0, 0)';
    			ctx.fillText(x_title[i1], kx+15, ky+2*f_size/5);
    			k++;
    			if (k > 9)
    				k = 0;
    			ky += (f_size + 5);
    		}
    		x_r -= (han + 10);
    	}
    	else
    		x_r -= Math.floor(0.03 * (x_r - x_l));
    					//
    					// グラフの表示
    					//
    	if (x_r-x_l < y_d-y_u)
    		k1 = x_r - x_l;
    	else
    		k1 = y_d - y_u;
    	len = 9 * k1 / 20;
    	kx  = (x_r + x_l) / 2;
    	ky  = (y_d + y_u) / 2;
    	a1  = 90;
    	a2  = a1 + Math.round(3.60 * data_y[n_p-1]);
    	k--;
    	if (k < 0)
    		k = 9;
    	for (i1 = 0; i1 < n_p; i1++) {
    		x1 = kx + len * Math.cos(Math.PI * a1 / 180.0);
    		y1 = ky - len * Math.sin(Math.PI * a1 / 180.0);
    		ctx.beginPath();
    		ctx.moveTo(kx, ky);
    		ctx.fillStyle   = cl[k];
    		ctx.strokeStyle = cl[k];
    		ctx.lineTo(x1, y1);
    		for (a = a1+1; a <= a2; a++) {
    			x1 = kx + len * Math.cos(Math.PI * a / 180.0);
    			y1 = ky - len * Math.sin(Math.PI * a / 180.0);
    			ctx.lineTo(x1, y1);
    		}
    		ctx.closePath();
    		ctx.fill();
    		if (i1 < n_p-1) {
    			a1 = a2;
    			a2 = a1 + Math.round(3.60 * data_y[n_p-2-i1]);
    			k--;
    			if (k < 0)
    				k = 9;
    		}
    	}
    }
    
    /****************************/
    /* 散布図の描画             */
    /*      coded by Y.Suganuma */
    /****************************/
    function ScatterDiagram()
    {
    	tx = new Array();
    					//
    					// 描画領域の設定
    					//
    	ctx.fillStyle  = 'rgb(255, 255, 255)';
    	ctx.fillRect(10, 10, canvas.width-20, canvas.height-20);
    	x_l = 15;
    	x_r = canvas.width - 15;
    	y_u = 15;
    	y_d = canvas.height - 15;
    					//
    					// グラフタイトルの表示
    					//
    	r      = 0.05;   // タイトル領域の割合
    	f_size = ((y_d - y_u) < (x_r - x_l)) ? Math.floor((y_d - y_u) * r) : Math.floor((x_r - x_l) * r);
    	if (f_size < 5)
    		f_size = 5;
    	if (d_t) {
    		ctx.fillStyle  = 'rgb(0, 0, 0)';
    		ctx.font = f_size + "px 'MS ゴシック'";
    		met = ctx.measureText(title[0]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d;
    		ctx.fillText(title[0], px, py);
    		y_d -= f_size;
    	}
    					//
    					// x軸及びy軸のタイトルの表示
    					//
    	x_r    -= Math.floor(0.03 * (x_r - x_l));
    	f_size  = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font      = f_size + "px 'MS ゴシック'";
    	ctx.fillStyle = 'rgb(0, 0, 0)';
    	if (title[1].length > 0 && title[1] != "-") {
    		met = ctx.measureText(title[1]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d - 5;
    		ctx.fillText(title[1], px, py);
    		y_d -= (f_size + 5);
    	}
    	if (title[2].length > 0 && title[2] != "-") {
    		met = ctx.measureText(title[2]);
    		px  = x_l;
    		py  = y_u + 4 * f_size / 5;
    		ctx.fillText(title[2], px, py);
    		y_u += 7 * f_size / 5;
    	}
    					//
    					// x軸,y軸,及び,各軸の目盛り
    					//
    	ctx.lineWidth   = 1;
    	ctx.strokeStyle = "rgb(0, 0, 0)";
    	ctx.fillStyle   = "rgb(0, 0, 0)";
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font  = f_size + "px 'MS 明朝'";
    	y_d      -= (f_size + 5);
    							// y軸
    	y1  = y_scale[0];
    	k   = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    	len = 0;
    	b   = Math.pow(10, place_y);
    	for (i1 = 0; i1 < k+1; i1++) {
    		yy = Math.round(y1 * b).toString();
    		if (place_y == 0)
    			tx[i1] = yy;
    		else {
    			if (yy.length < place_y+1) {
    				n = place_y + 1 - yy.length;
    				for (i2 = 0; i2 < n; i2++)
    					yy = "0" + yy;
    			}
    			tx[i1] = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    		}
    		met = ctx.measureText(tx[i1]);
    		if (met.width > len)
    			len = met.width;
    		y1 += y_scale[2];
    	}
    	ctx.moveTo(x_l+len+10, y_u);
    	ctx.lineTo(x_l+len+10, y_d);
    	ctx.moveTo(x_r, y_u);
    	ctx.lineTo(x_r, y_d);
    	y1 = y_scale[0];
    	x1 = y_d;
    	sp = (y_d - y_u) / k;
    	for (i1 = 0; i1 < k+1; i1++) {
    		ky  = Math.floor(Math.round(x1));
    		met = ctx.measureText(tx[i1]);
    		k1  = met.width;
    		px  = x_l + len - k1;
    		py  = ky + 2 * f_size / 5;
    		ctx.fillText(tx[i1], px, py);
    		ctx.moveTo(x_l+len+10, ky);
    		ctx.lineTo(x_r, ky);
    		y1 += y_scale[2];
    		x1 -= sp;
    	}
    	x_l += (len + 10);
    							// x軸
    	k  = Math.floor((x_scale[1] - x_scale[0]) / (0.99 * x_scale[2]));
    	x1 = x_scale[0];
    	y1 = x_l;
    	sp = (x_r - x_l) / k;
    	b  = Math.pow(10, place_x);
    	for (i1 = 0; i1 < k+1; i1++) {
    		kx = Math.floor(Math.round(y1));
    		yy = Math.round(x1 * b).toString();
    		if (place_x == 0)
    			st = yy;
    		else {
    			if (yy.length < place_x+1) {
    				n = place_x + 1 - yy.length;
    				for (i2 = 0; i2 < n; i2++)
    					yy = "0" + yy;
    			}
    			st = yy.substr(0,yy.length-place_x) + "." + yy.substr(yy.length-place_x,place_x);
    		}
    		met = ctx.measureText(st);
    		k1  = met.width;
    		px  = kx - k1 / 2;
    		py  = y_d + f_size;
    		ctx.fillText(st, px, py);
    		if (i1 < k) {
    			ctx.moveTo(kx, y_d);
    			ctx.lineTo(kx, y_u);
    		}
    		x1 += x_scale[2];
    		y1 += sp;
    	}
    	ctx.stroke();
    					//
    					// グラフの表示
    					//
    	cr = f_size / 4;
    	if (cr == 0)
    		cr = 1;
    	for (i1 = 0; i1 < n_p; i1++) {
    		kx = x_l + Math.floor((x_r - x_l) * (data_y[0][i1] - x_scale[0]) / (x_scale[1] - x_scale[0]));
    		ky = y_d - Math.floor((y_d - y_u) * (data_y[1][i1] - y_scale[0]) / (y_scale[1] - y_scale[0]));
    		ctx.beginPath();
    		ctx.arc(kx, ky, cr, 0, 2*Math.PI, false);
    		ctx.fill();
    	}
    					//
    					// 相関係数
    					//
    	vii = 0.0;
    	vjj = 0.0;
    	vij = 0.0;
    	mi  = 0.0;
    	mj  = 0.0;
    	for (i1 = 0; i1 < n_p; i1++) {
    		mi += data_y[0][i1];
    		mj += data_y[1][i1];
    	}
    	mi /= n_p;
    	mj /= n_p;
    	for (i1 = 0; i1 < n_p; i1++) {
    		vii += (data_y[0][i1] - mi) * (data_y[0][i1] - mi);
    		vjj += (data_y[1][i1] - mj) * (data_y[1][i1] - mj);
    		vij += (data_y[0][i1] - mi) * (data_y[1][i1] - mj);
    	}
    	vii      /= (n_p - 1);
    	vjj      /= (n_p - 1);
    	vij      /= (n_p - 1);
    	x1        = vij / (Math.sqrt(vii) * Math.sqrt(vjj));
    	ctx.font  = f_size + "px 'MS ゴシック'";
    	yy        = Math.round(x1 * 1000).toString();
    	st        = "相関係数: " + yy.substr(0,yy.length-3) + "." + yy.substr(yy.length-3,3);
    	met       = ctx.measureText(st);
    	k1        = met.width;
    	px        = x_r - met.width;
    	py        = y_u - f_size;
    	ctx.fillText(st, px, py);
    }
    
    /****************************/
    /* レーダーチャートの描画   */
    /*      coded by Y.Suganuma */
    /****************************/
    function RadarChart()
    {
    	tx = new Array();
    					//
    					// 描画領域の設定
    					//
    	ctx.fillStyle  = 'rgb(255, 255, 255)';
    	ctx.fillRect(10, 10, canvas.width-20, canvas.height-20);
    	x_l = 15;
    	x_r = canvas.width - 15;
    	y_u = 15;
    	y_d = canvas.height - 15;
    					//
    					// グラフタイトルの表示
    					//
    	r      = 0.05;   // タイトル領域の割合
    	f_size = ((y_d - y_u) < (x_r - x_l)) ? Math.floor((y_d - y_u) * r) : Math.floor((x_r - x_l) * r);
    	if (f_size < 5)
    		f_size = 5;
    	if (d_t) {
    		ctx.fillStyle  = 'rgb(0, 0, 0)';
    		ctx.font = f_size + "px 'MS ゴシック'";
    		met = ctx.measureText(title[0]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d;
    		ctx.fillText(title[0], px, py);
    		y_d -= f_size;
    	}
    					//
    					// 凡例の表示
    					//
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font = f_size + "px 'MS ゴシック'";
    	if (d_g) {
    		han = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			met = ctx.measureText(g_title[i1]);
    			if (met.width > han)
    				han = met.width;
    		}
    		han += 15;
    		r    = 0.2;   // 凡例領域の割合
    		k1   = Math.floor((x_r - x_l) * r);
    		if (han > k1)
    			han = k1;
    		kx = x_r - han;
    		ky = y_u + f_size / 2;
    		k  = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			ctx.fillStyle  = cl[k];
    			ctx.fillRect(kx, ky, 10, 5);
    			ctx.fillStyle  = 'rgb(0, 0, 0)';
    			ctx.fillText(g_title[i1], kx+15, ky+2*f_size/5);
    			k++;
    			if (k > 9)
    				k = 0;
    			ky += (f_size + 5);
    		}
    		x_r -= (han + 10);
    	}
    	else
    		x_r -= Math.floor(0.03 * (x_r - x_l));
    					//
    					// 軸,及び,軸の目盛り
    					//
    							// フォントサイズ
    	f_size = Math.floor(0.7 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font = f_size + "px 'MS 明朝'";
    							// 大きさの決定
    	a   = 0.5 * Math.PI;
    	aa  = 2.0 * Math.PI / n_p;
    	x11 = 0.0;
    	x12 = 0.0;
    	x21 = 0.0;
    	x22 = 0.0;
    	y11 = 0.0;
    	y12 = 0.0;
    	y21 = 0.0;
    	y22 = 0.0;
    	for (i1 = 0; i1 < n_p; i1++) {
    		xx  = 100 * Math.cos(a);
    		yy  = 100 * Math.sin(a);
    		met = ctx.measureText(x_title[i1]);
    		k1  = met.width;
    		if (i1 == 0) {
    			x12 = 0.5 * k1;
    			x22 = x12;
    			y11 = 100.0;
    			y12 = 5.0 * f_size / 4.0;
    		}
    		else if (Math.abs(xx) < 1.0e-5) {
    			x0 = 0.5 * k1;
    			if (x0 > x12)
    				x12 = x0;
    			if (x0 > x22)
    				x22 = x0;
    			y21 = 100.0;
    			y22 = f_size + 5.0;
    		}
    		else {
    			if (yy < 0.0) {
    				y0 = -yy + 0.5 * f_size;
    				if (y0 > y21+y22) {
    					y21 = -yy;
    					y22 = 0.5 * f_size;
    				}
    			}
    			if (xx > 0.0) {
    				x0 = xx + k1 + 5.0;
    				if (x0 > x21+x22) {
    					x21 = xx;
    					x22 = k1 + 5.0;
    				}
    			}
    			else {
    				x0 = -xx + k1 + 5.0;
    				if (x0 > x11+x12) {
    					x11 = -xx;
    					x12 = k1 + 5.0;
    				}
    			}
    		}
    		a += aa;
    	}
    	x0 = x12 + x22;
    	xx = (x_r - x_l - x0 - 10) / (x11 + x21);
    	y0 = y12 + y22;
    	yy = (y_d - y_u - y0 - 10) / (y11 + y21);
    	r  = (xx < yy) ? xx : yy;
    	cr = Math.floor(100 * r);
    	xx = x_l + r * x11 + x12 + 5.0;
    	cx = Math.floor(xx + (x_r - x_l - r * x11 - x12 - r * x21 - x22 - 5) / 2);
    	yy = y_u + r * y11 + y12 + 5.0;
    	cy = Math.floor(yy + (y_d - y_u - r * y11 - y12 - r * y21 - y22 - 5) / 2);
    							// 軸とタイトルの描画
    	ctx.lineWidth   = 1;
    	ctx.strokeStyle = "rgb(0, 0, 0)";
    	k  = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2])) + 1;
    	xx = cr / k;
    	a  = 0.5 * Math.PI;
    	aa = 2.0 * Math.PI / n_p;
    	for (i1 = 0; i1 < n_p; i1++) {
    		kx  = Math.round(cr * Math.cos(a));
    		ky  = Math.round(cr * Math.sin(a));
    		met = ctx.measureText(x_title[i1]);
    		k1  = met.width;
    		ctx.moveTo(cx, cy);
    		ctx.lineTo(cx+kx, cy-ky);
    		yy = xx;
    		for (i2 = 0; i2 < k; i2++) {
    			kx0 = cx + Math.round(yy * Math.cos(a));
    			ky0 = cy - Math.round(yy * Math.sin(a));
    			kx1 = kx0 + Math.round(3 * Math.cos(a+0.5*Math.PI));
    			ky1 = ky0 - Math.round(3 * Math.sin(a+0.5*Math.PI));
    			kx2 = kx0 + Math.round(3 * Math.cos(a-0.5*Math.PI));
    			ky2 = ky0 - Math.round(3 * Math.sin(a-0.5*Math.PI));
    			ctx.moveTo(kx1, ky1);
    			ctx.lineTo(kx2, ky2);
    			yy += xx;
    		}
    		if (i1 == 0) {
    			met = ctx.measureText(x_title[i1]);
    			ctx.fillText(x_title[i1], cx+kx-k1/2, cy-ky-4*f_size/5);
    			yy = xx;
    			sp = y_scale[0];
    			for (i2 = 0; i2 < k; i2++) {
    				kx0 = cx + Math.round(yy * Math.cos(a)) + 5;
    				ky0 = cy - Math.floor(Math.round(yy * Math.sin(a)) - 3 * f_size / 10);
    				b   = Math.pow(10, place_y);
    				zz  = Math.round(sp * b).toString();
    				if (place_y == 0)
    					tx[i2] = zz;
    				else {
    					if (zz.length < place_y+1) {
    						n = place_y + 1 - zz.length;
    						for (i2 = 0; i2 < n; i2++)
    							zz = "0" + zz;
    					}
    					tx[i2] = zz.substr(0,zz.length-place_y) + "." + zz.substr(zz.length-place_y,place_y);
    				}
    				met = ctx.measureText(tx[i2]);
    				ctx.fillText(tx[i2], kx0, ky0);
    				yy += xx;
    				sp += y_scale[2];
    			}
    		}
    		else {
    			met = ctx.measureText(x_title[i1]);
    			if (kx == 0) {
    				px = cx + kx - k1 / 2;
    				py = cy - ky + 5 * f_size / 4;
    			}
    			else if (kx > 0) {
    				px = cx + kx + 5;
    				py = cy - ky + 3 * f_size / 10;
    			}
    			else {
    				px = cx + kx - k1 - 10;
    				py = cy - ky + 3 * f_size / 10;
    			}
    			ctx.fillText(x_title[i1], px, py);
    		}
    		a += aa;
    	}
    	ctx.stroke();
    					//
    					// グラフの表示
    					//
    	ctx.lineWidth = 2;
    	pt = f_size / 4;
    	if (pt == 0)
    		pt = 1;
    	k1 = 0;
    	for (i1 = 0; i1 < n_g; i1++) {
    		ctx.strokeStyle = cl[k1];
    		ctx.fillStyle   = cl[k1];
    		a   = 0.5 * Math.PI;
    		aa  = 2.0 * Math.PI / n_p;
    		kx1 = 0;
    		ky1 = 0;
    		kx2 = 0;
    		ky2 = 0;
    		for (i2 = 0; i2 < n_p; i2++) {
    			yy = xx + (cr - xx) * (data_y[i1][i2] - y_scale[0]) / (y_scale[1] - y_scale[0]);
    			kx = cx + Math.round(yy * Math.cos(a));
    			ky = cy - Math.round(yy * Math.sin(a));
    			ctx.beginPath();
    			ctx.arc(kx, ky, pt, 0, 2*Math.PI, false);
    			ctx.fill();
    			if (i2 == 0) {
    				kx2 = kx;
    				ky2 = ky;
    			}
    			else {
    				ctx.moveTo(kx1, ky1);
    				ctx.lineTo(kx, ky);
    				ctx.stroke();
    				if (i2 == n_p-1) {
    					ctx.moveTo(kx2, ky2);
    					ctx.lineTo(kx, ky);
    					ctx.stroke();
    				}
    			}
    			kx1  = kx;
    			ky1  = ky;
    			a   += aa;
    		}
    		k1++;
    		if (k1 > 9)
    			k1 = 0;
    	}
    }
    
    /****************************/
    /* ボード線図の描画         */
    /*      coded by Y.Suganuma */
    /****************************/
    function Bode()
    {
    	tx = new Array();
    					//
    					// 描画領域の設定
    					//
    	ctx.fillStyle  = 'rgb(255, 255, 255)';
    	ctx.fillRect(10, 10, canvas.width-20, canvas.height-20);
    	x_l = 15;
    	x_r = canvas.width - 15;
    	y_u = 15;
    	y_d = canvas.height - 15;
    					//
    					// グラフタイトルの表示
    					//
    	r      = 0.05;   // タイトル領域の割合
    	f_size = ((y_d - y_u) < (x_r - x_l)) ? Math.floor((y_d - y_u) * r) : Math.floor((x_r - x_l) * r);
    	if (f_size < 5)
    		f_size = 5;
    	if (d_t) {
    		ctx.fillStyle  = 'rgb(0, 0, 0)';
    		ctx.font = f_size + "px 'MS ゴシック'";
    		met = ctx.measureText(title[0]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d;
    		ctx.fillText(title[0], px, py);
    		y_d -= f_size;
    	}
    					//
    					// 凡例の表示
    					//
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font = f_size + "px 'MS ゴシック'";
    	if (d_g) {
    		han = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			met = ctx.measureText(g_title[i1]);
    			if (met.width > han)
    				han = met.width;
    		}
    		han += 15;
    		r    = 0.2;   // 凡例領域の割合
    		k1   = Math.floor((x_r - x_l) * r);
    		if (han > k1)
    			han = k1;
    		kx = x_r - han;
    		ky = y_u + 1 * f_size / 2;
    		k  = 0;
    		for (i1 = 0; i1 < n_g; i1++) {
    			ctx.fillStyle  = cl[k];
    			ctx.fillRect(kx, ky, 10, 5);
    			ctx.fillStyle  = 'rgb(0, 0, 0)';
    			ctx.fillText(g_title[i1], kx+15, ky+2*f_size/5);
    			k++;
    			if (k > 9)
    				k = 0;
    			ky += (f_size + 5);
    		}
    		x_r -= (han + 10);
    	}
    	else
    		x_r -= Math.floor(0.03 * (x_r - x_l));
    					//
    					// x軸の対数
    					//
    	x_scale_org = x_scale[0];
    	xx_scale    = new Array(3);
    	xx_scale[0] = Math.log(x_scale[0]) / Math.log(10.0);
    	xx_scale[1] = Math.log(x_scale[1]) / Math.log(10.0);
    	xx_scale[2] = 1.0;
    	data_xx     = new Array(n_g);
    	for (i1 = 0; i1 < n_g; i1++) {
    		data_xx[i1] = new Array(n_p);
    		for (i2 = 0; i2 < n_p; i2++)
    			data_xx[i1][i2] = Math.log(data_x[i1][i2]) / Math.log(10.0);
    	}
    					//
    					// x軸及びy軸のタイトルの表示
    					//
    	ctx.fillStyle = 'rgb(0, 0, 0)';
    	if (title[1].length > 0 && title[1] != "-") {
    		met = ctx.measureText(title[1]);
    		px  = (x_l + x_r) / 2 - met.width / 2;
    		py  = y_d - 5;
    		ctx.fillText(title[1], px, py);
    		y_d -= (f_size + 5);
    	}
    	else
    		y_d -= (f_size / 2 + 5);
    	if (title[2].length > 0 && title[2] != "-") {
    		met = ctx.measureText(title[2]);
    		px  = x_l;
    		py  = y_u + 4 * f_size / 5;
    		ctx.fillText(title[2], px, py);
    		y_u += 4 * f_size / 5;
    	}
    					//
    					// x軸,y軸,及び,各軸の目盛り
    					//
    	ctx.lineWidth   = 1;
    	ctx.strokeStyle = "rgb(0, 0, 0)";
    	f_size = Math.floor(0.8 * f_size);
    	if (f_size < 5)
    		f_size = 5;
    	ctx.font  = f_size + "px 'MS 明朝'";
    	y_d     -= 5 * f_size / 4;
    	y_u     += 10;
    	x_l     += f_size;
    							// y軸
    	k_y = Math.floor((y_scale[1] - y_scale[0]) / (0.99 * y_scale[2]));
    	y1  = y_scale[0];
    	len = 0;
    	b   = Math.pow(10, place_y);
    	for (i1 = 0; i1 < k_y+1; i1++) {
    		yy = Math.round(y1 * b).toString();
    		if (place_y == 0)
    			tx[i1] = yy;
    		else {
    			if (yy.length < place_y+1) {
    				n = place_y + 1 - yy.length;
    				for (i2 = 0; i2 < n; i2++)
    					yy = "0" + yy;
    			}
    			tx[i1] = yy.substr(0,yy.length-place_y) + "." + yy.substr(yy.length-place_y,place_y);
    		}
    		met = ctx.measureText(tx[i1]);
    		if (met.width > len)
    			len = met.width;
    		y1 += y_scale[2];
    	}
    	ctx.moveTo(x_l+len+5, y_u);
    	ctx.lineTo(x_l+len+5, y_d);
    	ctx.moveTo(x_r, y_u);
    	ctx.lineTo(x_r, y_d);
    	ctx.stroke();
    	y1 = y_scale[0];
    	x1 = y_d;
    	sp = (y_d - y_u) / k_y;
    	for (i1 = 0; i1 < k_y+1; i1++) {
    		ky  = Math.round(x1);
    		met = ctx.measureText(tx[i1]);
    		k1  = met.width;
    		px  = x_l + len - k1;
    		py  = ky + 3 * f_size / 10;
    		ctx.fillText(tx[i1], px, py);
    		ctx.moveTo(x_l+len+5, ky);
    		ctx.lineTo(x_r, ky);
    		ctx.stroke();
    		y1 += y_scale[2];
    		x1 -= sp;
    	}
    	x_l += (len + 5);
    							// x軸
    	k_x = Math.floor((xx_scale[1] - xx_scale[0]) / (0.99 * xx_scale[2]));
    	x1  = x_scale_org;
    	y1  = x_l;
    	sp  = (x_r - x_l) / k_x;
    	b   = Math.pow(10, place_x);
    	for (i1 = 0; i1 < k_x+1; i1++) {
    		kx = Math.round(y1);
    		yy = Math.round(x1 * b).toString();
    		if (place_x == 0)
    			tx[i1] = yy;
    		else {
    			if (yy.length < place_x+1) {
    				n = place_x + 1 - yy.length;
    				for (i2 = 0; i2 < n; i2++)
    					yy = "0" + yy;
    			}
    			tx[i1] = yy.substr(0,yy.length-place_x) + "." + yy.substr(yy.length-place_x,place_x);
    		}
    		met = ctx.measureText(tx[i1]);
    		k1  = met.width;
    		px  = kx - k1 / 2;
    		py  = y_d + f_size + 3;
    		ctx.fillText(tx[i1], px, py);
    		ctx.moveTo(kx, y_d);
    		ctx.lineTo(kx, y_u);
    		ctx.stroke();
    		if (i1 != k_x) {
    			ctx.beginPath();
    			ctx.strokeStyle = 'rgb(128, 128, 128)';
    			for (i2 = 2; i2 <= 9; i2++) {
    				y2 = Math.log(x1 * i2) / Math.log(10.0);
    				kx = x_l + Math.round(((x_r - x_l) * (y2 - xx_scale[0]) / (xx_scale[1] - xx_scale[0])));
    				ctx.moveTo(kx, y_d);
    				ctx.lineTo(kx, y_u);
    				ctx.stroke();
    			}
    			ctx.beginPath();
    			ctx.strokeStyle = 'rgb(0, 0, 0)';
    		}
    		x1 *= 10.0;
    		y1 += sp;
    	}
    					//
    					// グラフの表示
    					//
    	ctx.lineWidth = 2;
    	k1 = 0;
    	for (i1 = 0; i1 < n_g; i1++) {
    		ctx.beginPath();
    		ctx.strokeStyle = cl[k1];
    		kx1 = 0;
    		ky1 = 0;
    		for (i2 = 0; i2 < n_p; i2++) {
    			kx = x_l + Math.floor((x_r - x_l) * (data_xx[i1][i2] - xx_scale[0]) / (xx_scale[1] - xx_scale[0]));
    			ky = y_d - Math.floor((y_d - y_u) * (data_y[i1][i2] - y_scale[0]) / (y_scale[1] - y_scale[0]));
    			if (i2 > 0) {
    				ctx.moveTo(kx1, ky1);
    				ctx.lineTo(kx, ky);
    				ctx.stroke();
    			}
    			kx1 = kx;
    			ky1 = ky;
    		}
    		k1++;
    		if (k1 >= cl.length)
    			k1 = 0;
    	}
    }
    
    /***************************/
    /* 縦表示,横表示の切り替え*/
    /***************************/
    function Click(event)
    {
    	if (kind <= 3) {
    		if (navigator.appName.indexOf("Explorer") >= 0) {
    			var x_now = event.x - x_base;
    			var y_now = event.y - y_base;
    		}
    		else {
    			var x_now = event.pageX - x_base;
    			var y_now = event.pageY - y_base;
    		}
    		if (x_now > cx && x_now < cx+cw && y_now > cy && y_now < cy+ch) {
    			if (ver) {
    				ver    = false;
    				change = "縦表示";
    			}
    			else {
    				ver    = true;
    				change = "横表示";
    			}
    		}
    
    		ctx.beginPath();
    		ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    		if (kind == 0)
    			BarGraph();
    		else if (kind == 1)
    			LineGraph1();
    		else if (kind == 2)
    			LineGraph2();
    		else
    			StackGraph();
    	}
    }
    			
  2. 一般的なグラフ

      上の例では,棒グラフだけを描きましたが,graph.js に定義してある関数を利用すると,様々なグラフを描くことができます.下に示すページ( graph.htm )は,どのようなグラフが描けるのかを示すためのページです.このページにおいてグラフを選択すると,指定したグラフが表示されます.グラフの右上に「横表示」(または,「縦表示」)の表示がある場合は,そこをクリックするとグラフの縦表示,横表示が切り替わります.なお,このページでは,グラフを描くために必要なデータは,関数 sel においてあらかじめ設定されます.

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>グラフの表示</TITLE>
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
    	<SCRIPT TYPE="text/javascript" SRC="../graph.js"></SCRIPT>
    	<SCRIPT TYPE="text/javascript">
    		function sel(kind)
    		{
    			gp = "";
    					// 棒グラフ
    			if (kind == 0)
    				gp = "0,棒グラフの例,x軸タイトル,y軸タイトル,6,自己啓発,目的意識,国際感覚,実行力,創造力,交渉力,5,非常に重視する,やや重視する,普通,あまり考慮しない,全く考慮しない,0.0,200.0,50.0,0,114,146,40,0,0,144,130,24,0,1,10,56,160,36,15,179,100,21,0,0,101,141,46,0,1,131,104,60,1,0,1,1";
    					// 折れ線グラフ(1)
    			else if (kind == 1)
    				gp = "1,折れ線グラフの例(1),x軸タイトル,y軸タイトル,6,自己啓発,目的意識,国際感覚,実行力,創造力,交渉力,5,非常に重視する,やや重視する,普通,あまり考慮しない,全く考慮しない,0.0,200.0,50.0,0,114,146,40,0,0,144,130,24,0,1,10,56,160,36,15,179,100,21,0,0,101,141,46,0,1,131,104,60,1,0,1,1";
    					// 折れ線グラフ(2)
    			else if (kind == 2)
    				gp = "2,折れ線グラフの例(2),x軸タイトル,y軸タイトル,3,グラフ1,グラフ2,グラフ3,0.0,100.0,20.0,1,0.0,200.0,50.0,0,4,0,14,40,100,179,100,21,0,0,30,34,100,101,141,46,10,0,56,60,100,131,104,60,100,1,1";
    					// 積み上げ棒グラフ
    			else if (kind == 3) {
    				gp = "3,積み上げ棒グラフの例(全体:300人),x軸タイトル,y軸タイトル,21,自己啓発,目的意識,国際感覚,実行力,創造力,交渉力,情報収集力,プレゼンテーション能力,積極性・自主性・チャレンジ精神,柔軟性・協調性,好奇心・探求心,持続力・忍耐力,責任感,明朗さ,真面目さ,基礎学力(数学・物理等),専門知識,専門技術,日本語(文章読解・文章作成),英語,コンピュータ・情報処理,5,非常に重視する,やや重視する,普通,あまり考慮しない,全く考慮しない,0.0,100.0,20.0,0";
    				data_y    = new Array();
    				data_y[0] = new Array();
    				data_y[0][0] = 114;
    				data_y[0][1] = 146;
    				data_y[0][2] = 40;
    				data_y[0][3] = 0;
    				data_y[0][4] = 0;
    				data_y[1] = new Array();
    				data_y[1][0] = 144;
    				data_y[1][1] = 130;
    				data_y[1][2] = 24;
    				data_y[1][3] = 0;
    				data_y[1][4] = 1;
    				data_y[2] = new Array();
    				data_y[2][0] = 10;
    				data_y[2][1] = 56;
    				data_y[2][2] = 160;
    				data_y[2][3] = 36;
    				data_y[2][4] = 15;
    				data_y[3] = new Array();
    				data_y[3][0] = 179;
    				data_y[3][1] = 100;
    				data_y[3][2] = 21;
    				data_y[3][3] = 0;
    				data_y[3][4] = 0;
    				data_y[4] = new Array();
    				data_y[4][0] = 101;
    				data_y[4][1] = 141;
    				data_y[4][2] = 46;
    				data_y[4][3] = 0;
    				data_y[4][4] = 1;
    				data_y[5] = new Array();
    				data_y[5][0] = 131;
    				data_y[5][1] = 104;
    				data_y[5][2] = 60;
    				data_y[5][3] = 1;
    				data_y[5][4] = 0;
    				data_y[6] = new Array();
    				data_y[6][0] = 55;
    				data_y[6][1] = 122;
    				data_y[6][2] = 107;
    				data_y[6][3] = 5;
    				data_y[6][4] = 1;
    				data_y[7] = new Array();
    				data_y[7][0] = 43;
    				data_y[7][1] = 95;
    				data_y[7][2] = 132;
    				data_y[7][3] = 13;
    				data_y[7][4] = 3;
    				data_y[8] = new Array();
    				data_y[8][0] = 215;
    				data_y[8][1] = 75;
    				data_y[8][2] = 11;
    				data_y[8][3] = 0;
    				data_y[8][4] = 0;
    				data_y[9] = new Array();
    				data_y[9][0] = 115;
    				data_y[9][1] = 142;
    				data_y[9][2] = 41;
    				data_y[9][3] = 0;
    				data_y[9][4] = 0;
    				data_y[10] = new Array();
    				data_y[10][0] = 87;
    				data_y[10][1] = 139;
    				data_y[10][2] = 61;
    				data_y[10][3] = 2;
    				data_y[10][4] = 1;
    				data_y[11] = new Array();
    				data_y[11][0] = 116;
    				data_y[11][1] = 141;
    				data_y[11][2] = 39;
    				data_y[11][3] = 0;
    				data_y[11][4] = 1;
    				data_y[12] = new Array();
    				data_y[12][0] = 172;
    				data_y[12][1] = 107;
    				data_y[12][2] = 23;
    				data_y[12][3] = 0;
    				data_y[12][4] = 1;
    				data_y[13] = new Array();
    				data_y[13][0] = 106;
    				data_y[13][1] = 122;
    				data_y[13][2] = 67;
    				data_y[13][3] = 2;
    				data_y[13][4] = 1;
    				data_y[14] = new Array();
    				data_y[14][0] = 115;
    				data_y[14][1] = 107;
    				data_y[14][2] = 68;
    				data_y[14][3] = 3;
    				data_y[14][4] = 1;
    				data_y[15] = new Array();
    				data_y[15][0] = 43;
    				data_y[15][1] = 116;
    				data_y[15][2] = 121;
    				data_y[15][3] = 12;
    				data_y[15][4] = 3;
    				data_y[16] = new Array();
    				data_y[16][0] = 44;
    				data_y[16][1] = 104;
    				data_y[16][2] = 124;
    				data_y[16][3] = 13;
    				data_y[16][4] = 7;
    				data_y[17] = new Array();
    				data_y[17][0] = 41;
    				data_y[17][1] = 99;
    				data_y[17][2] = 125;
    				data_y[17][3] = 16;
    				data_y[17][4] = 8;
    				data_y[18] = new Array();
    				data_y[18][0] = 32;
    				data_y[18][1] = 98;
    				data_y[18][2] = 150;
    				data_y[18][3] = 6;
    				data_y[18][4] = 3;
    				data_y[19] = new Array();
    				data_y[19][0] = 9;
    				data_y[19][1] = 48;
    				data_y[19][2] = 158;
    				data_y[19][3] = 50;
    				data_y[19][4] = 17;
    				data_y[20] = new Array();
    				data_y[20][0] = 46;
    				data_y[20][1] = 106;
    				data_y[20][2] = 128;
    				data_y[20][3] = 13;
    				data_y[20][4] = 1;
    				for (i1 = 0; i1 < 21; i1++) {
    					s = 0;
    					for (i2 = 0; i2 < 5; i2++)
    						s += data_y[i1][i2];
    					for (i2 = 0; i2 < 5; i2++) {
    						data_y[i1][i2] = data_y[i1][i2] / s * 100;
    						gp = gp + "," + data_y[i1][i2];
    					}
    				}
    				gp = gp + ",1,1";
    			}
    					// 円グラフ
    			else if (kind == 4) {
    				gp = "4,円グラフの例(全体:277人),5,非常に重視する,やや重視する,普通,あまり考慮しない,全く考慮しない";
    				x = new Array();
    				x[0] = 10;
    				x[1] = 56;
    				x[2] = 160;
    				x[3] = 36;
    				x[4] = 15;
    				s    = 0;
    				for (i1 = 0; i1 < 5; i1++)
    					s += x[i1];
    				for (i1 = 0; i1 < 5; i1++) {
    					x[i1] = x[i1] / s * 100;
    					gp = gp + "," + x[i1];
    				}
    				gp = gp + ",1";
    			}
    					// 散布図
    			else if (kind == 5)
    				gp = "5,散布図の例,x軸タイトル,y軸タイトル,0.0,150.0,30.0,0,0.0,200.0,50.0,0,10,11,146,40,70,100,120,50,130,80,130,17,170,21,80,140,100,80,190,60,180,1";
    					// レーダーチャート
    			else if (kind == 6)
    				gp = "6,レーダーチャートの例,2,重要度,評価,21,自己啓発,目的意識,国際感覚,実行力,創造力,交渉力・調整力・コミュニケーション,情報収集力,プレゼンテーション能力,積極性・自主性・チャレンジ精神,柔軟性・協調性,好奇心・探求心,持続力・忍耐力,責任感,明朗さ,真面目さ,基礎学力(数学・物理等),専門知識,専門技術,日本語(文章読解・文章作成),英語,コンピュータ・情報処理,1.0,5.0,1.0,1,4.2,4.4,3.0,4.5,4.2,4.2,3.8,3.6,4.7,4.2,4.1,4.2,4.5,4.1,4.1,3.6,3.6,3.5,3.5,2.9,3.6,3.4,3.5,2.7,3.5,3.2,3.2,3.1,2.9,3.4,3.6,3.3,3.6,3.8,3.5,4.0,3.3,3.2,3.2,3.1,2.7,3.4,1,1";
    					// ボード線図(片対数グラフ)
    			else
    				gp = "7,ボード線図の例,角周波数,ゲイン(dB),2,一次遅れ要素,二次遅れ要素,0.01,100.0,1.0,2,-80.0,20.0,20.0,0,101,0.01,0.0109647819614318,0.0120226443461741,0.013182567385564,0.0144543977074592,0.0158489319246111,0.0173780082874937,0.0190546071796325,0.0208929613085404,0.0229086765276777,0.0251188643150958,0.0275422870333817,0.0301995172040202,0.0331131121482591,0.0363078054770102,0.0398107170553498,0.0436515832240167,0.0478630092322639,0.0524807460249773,0.0575439937337158,0.0630957344480195,0.0691830970918938,0.0758577575029186,0.0831763771102673,0.0912010839355912,0.1,0.109647819614318,0.120226443461741,0.131825673855641,0.144543977074593,0.158489319246111,0.173780082874938,0.190546071796325,0.208929613085404,0.229086765276778,0.251188643150959,0.275422870333817,0.301995172040202,0.331131121482592,0.363078054770102,0.398107170553498,0.436515832240167,0.47863009232264,0.524807460249774,0.575439937337159,0.630957344480195,0.691830970918939,0.758577575029186,0.831763771102674,0.912010839355913,1,1.09647819614318,1.20226443461741,1.31825673855641,1.44543977074593,1.58489319246111,1.73780082874938,1.90546071796325,2.08929613085404,2.29086765276778,2.51188643150958,2.75422870333817,3.01995172040202,3.31131121482592,3.63078054770102,3.98107170553498,4.36515832240167,4.7863009232264,5.24807460249774,5.75439937337159,6.30957344480195,6.91830970918939,7.58577575029186,8.31763771102674,9.12010839355913,10,10.9647819614318,12.0226443461741,13.1825673855641,14.4543977074593,15.8489319246112,17.3780082874938,19.0546071796325,20.8929613085404,22.9086765276778,25.1188643150959,27.5422870333818,30.1995172040203,33.1131121482592,36.3078054770103,39.8107170553499,43.6515832240168,47.8630092322641,52.4807460249775,57.543993733716,63.0957344480196,69.183097091894,75.8577575029188,83.1763771102676,91.2010839355915,100,-0.00043427276862636,-0.000522105424932322,-0.000627701152241214,-0.000754651740749838,-0.000907275005683991,-0.00109076142866441,-0.00131135036701045,-0.0015765417703246,-0.00189535052688523,-0.00227861197648364,-0.00273934881496565,-0.00329321162892171,-0.00395900769500453,-0.00475933552387765,-0.00572134599940977,-0.00687765494318666,-0.00826743661415132,-0.00993773312918616,-0.0119450211581656,-0.014357084593869,-0.017255250287929,-0.0207370534016865,-0.0249194093944646,-0.0299423809918071,-0.0359736402894658,-0.0432137378264255,-0.051902300972248,-0.0623252917208117,-0.0748234565761777,-0.0898020952083107,-0.10774225511957,-0.129213420154599,-0.154887692755856,-0.185555362732532,-0.222141596415848,-0.265723755961027,-0.317548557029209,-0.379047887154574,-0.451851641314966,-0.537795410636778,-0.6389203414338,-0.757462064101649,-0.895825422443528,-1.05654200302736,-1.2422083724146,-1.45540463109294,-1.69859540490393,-1.97401850619972,-2.2835697095824,-2.62869465226149,-3.01029995663982,-3.42869465226149,-3.8835697095824,-4.37401850619973,-4.89859540490394,-5.45540463109295,-6.04220837241461,-6.65654200302738,-7.29582542244354,-7.95746206410166,-8.63892034143381,-9.33779541063679,-10.0518516413149,-10.7790478871545,-11.5175485570292,-12.265723755961,-13.0221415964158,-13.7855553627325,-14.5548876927558,-15.3292134201546,-16.1077422551196,-16.8898020952083,-17.6748234565762,-18.4623252917208,-19.2519023009722,-20.0432137378264,-20.8359736402895,-21.6299423809918,-22.4249194093944,-23.2207370534017,-24.0172552502879,-24.8143570845939,-25.6119450211582,-26.4099377331292,-27.2082674366141,-28.0068776549432,-28.8057213459994,-29.6047593355239,-30.403959007695,-31.2032932116289,-32.002739348815,-32.8022786119765,-33.6018953505269,-34.4015765417703,-35.201311350367,-36.0010907614287,-36.8009072750057,-37.6007546517408,-38.4006277011522,-39.2005221054249,-40.0004342727686,0.01,0.0109647819614318,0.0120226443461741,0.013182567385564,0.0144543977074592,0.0158489319246111,0.0173780082874937,0.0190546071796325,0.0208929613085404,0.0229086765276777,0.0251188643150958,0.0275422870333817,0.0301995172040202,0.0331131121482591,0.0363078054770102,0.0398107170553498,0.0436515832240167,0.0478630092322639,0.0524807460249773,0.0575439937337158,0.0630957344480195,0.0691830970918938,0.0758577575029186,0.0831763771102673,0.0912010839355912,0.1,0.109647819614318,0.120226443461741,0.131825673855641,0.144543977074593,0.158489319246111,0.173780082874938,0.190546071796325,0.208929613085404,0.229086765276778,0.251188643150959,0.275422870333817,0.301995172040202,0.331131121482592,0.363078054770102,0.398107170553498,0.436515832240167,0.47863009232264,0.524807460249774,0.575439937337159,0.630957344480195,0.691830970918939,0.758577575029186,0.831763771102674,0.912010839355913,1,1.09647819614318,1.20226443461741,1.31825673855641,1.44543977074593,1.58489319246111,1.73780082874938,1.90546071796325,2.08929613085404,2.29086765276778,2.51188643150958,2.75422870333817,3.01995172040202,3.31131121482592,3.63078054770102,3.98107170553498,4.36515832240167,4.7863009232264,5.24807460249774,5.75439937337159,6.30957344480195,6.91830970918939,7.58577575029186,8.31763771102674,9.12010839355913,10,10.9647819614318,12.0226443461741,13.1825673855641,14.4543977074593,15.8489319246112,17.3780082874938,19.0546071796325,20.8929613085404,22.9086765276778,25.1188643150959,27.5422870333818,30.1995172040203,33.1131121482592,36.3078054770103,39.8107170553499,43.6515832240168,47.8630092322641,52.4807460249775,57.543993733716,63.0957344480196,69.183097091894,75.8577575029188,83.1763771102676,91.2010839355915,100,0.000760038415382399,0.000913772766359686,0.00109860460812431,0.00132082497033832,0.0015879978301257,0.00190921780497035,0.00229542006615489,0.00275975307888415,0.00331802694011069,0.00398925269639393,0.00479629117620189,0.00576663367903434,0.0069333414679863,0.00833617658612594,0.0100229632730993,0.0120512274603127,0.0144901717990999,0.0174230558361977,0.0209500658109257,0.0251917767617845,0.0302933320307221,0.0364294929122781,0.043810745501032,0.0526906945590592,0.0633750278465736,0.0762324020119698,0.0917076870782207,0.11033811653403,0.132773031837264,0.159798094398276,0.192365079368509,0.231628683657635,0.278992202428454,0.336164489672405,0.405231365272613,0.488745617523805,0.589841028229403,0.712377430460434,0.861125568145392,1.0420019107726,1.26236286023883,1.53136003903385,1.86032983314904,2.26310269847673,2.7558619659877,3.35544406114777,4.07285867859558,4.8930591948081,5.71985312756973,6.26638529740493,6.02059991327959,4.66638529740486,2.51985312756961,0.0930591948079767,-2.32714132140453,-4.64455593885234,-6.84413803401239,-8.93689730152335,-10.939670166851,-12.8686399609662,-14.7376371397612,-16.5579980892274,-18.3388744318546,-20.0876225695396,-21.8101589717706,-23.5112543824762,-25.1947686347274,-26.8638355103276,-28.5210077975716,-30.1683713163424,-31.8076349206315,-33.4402019056017,-35.0672269681628,-36.689661883466,-38.3082923129218,-39.9237675979881,-41.5366249721535,-43.147309305441,-44.756189254499,-46.3635705070877,-47.9697066679693,-49.5748082232382,-51.1790499341891,-52.7825769441638,-54.3855098282009,-55.9879487725397,-57.5899770367269,-59.1916638234139,-60.7930666585321,-62.394233366321,-63.9952037088238,-65.5960107473037,-67.1966819730599,-68.7972402469212,-70.3977045799339,-71.9980907821951,-73.5984120021699,-75.1986791750297,-76.7989013953919,-78.3990862272337,-79.9992399615847,1,1";
    			graph(gp);
    		}
    	</SCRIPT>
    </HEAD>
    <BODY CLASS="white">
    	<H3 STYLE="text-align: center">表示するグラフを選択してください</H3>
    	<FORM>
    		<DIV STYLE="text-align: center">
    			<TABLE STYLE="text-align: left; margin-right: auto; margin-left: auto">
    				<TR>
    					<TD><INPUT TYPE="radio" NAME="g_type" onClick="sel(0)">棒グラフ</TD>
    					<TD><INPUT TYPE="radio" NAME="g_type" onClick="sel(1)">折れ線グラフ(1)</TD>
    				<TR>
    					<TD><INPUT TYPE="radio" NAME="g_type" onClick="sel(2)">折れ線グラフ(2)</TD>
    					<TD><INPUT TYPE="radio" NAME="g_type" onClick="sel(3)">積み上げ棒グラフ</TD>
    				</TR>
    				<TR>
    					<TD><INPUT TYPE="radio" NAME="g_type" onClick="sel(4)">円グラフ</TD>
    					<TD><INPUT TYPE="radio" NAME="g_type" onClick="sel(5)">散布図</TD>
    				</TR>
    				<TR>
    					<TD><INPUT TYPE="radio" NAME="g_type" onClick="sel(6)">レーダーチャート</TD>
    					<TD><INPUT TYPE="radio" NAME="g_type" onClick="sel(7)">ボード線図(片対数グラフ)</TD>
    				</TR>
    			</TABLE>
    		</DIV>
    	</FORM>
    	<BR>
    	<DIV STYLE="text-align: center">
    		<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="900" HEIGHT="600" onClick="Click(event)"></CANVAS>
    	</DIV>
    </BODY>
    </HTML>
    			

静岡理工科大学 菅沼ホーム PHP 目次 索引