chart.js  mysql接続　データ登録からグラフ表示まで

#目的：mysqlに登録した内容をchart.jsに表示させる

今回はphpでmysqlに洋服の名前と価格を登録し、その内容をchart.jsの公式ドキュメントのコードにはめ込む方法を解説します。

以下は完成の画面

データ登録画面(nyuuryoku.php)
![スクリーンショット 2020-07-17 8.45.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/57f99e99-9608-478e-73fd-fd748b5d8b56.png)

グラフ表示画面(chart.php)
![スクリーンショット 2020-07-17 8.45.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/4c221f81-a401-aa3d-23dd-7e35757d621c.png)

mysqlの準備
今回のテーブルは以下
![スクリーンショット 2020-07-17 9.08.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/9fcbcdce-2d20-9b6e-b5f4-6d6472b36174.png)


##chart.jsの用意

公式サイトからコードを引っ張ってくる。
https://www.chartjs.org/docs/latest/

<img width="884" alt="スクリーンショット 2020-07-17 8.49.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/687d8e09-bba0-a547-3da4-3836efcd8be2.png">
Get Startedに入る

<img width="808" alt="スクリーンショット 2020-07-17 8.49.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/fa65d3bf-c42d-3086-aebe-f0935fdccf4c.png">
このページのコードを丸コピ

そしてcdnを読み込む

すると

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    




    <canvas id="myChart" width="400" height="400"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
    <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'ほげ'],//各棒の名前（name)
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 20],//各縦棒の高さ(値段)
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    </script>
</body>
</html>
```

このコードを作れる。

出力するとこうなる
![スクリーンショット 2020-07-17 8.52.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/c6bf774d-e052-b5fe-7b22-478941de22c5.png)

そしてここからphpにカスタマイズする

phpでは
登録用ページ（nyuryouku.php）
登録アクションページ(insert.php)
グラフ表示ページ(chart.php)
db接続関数記載ページ(funcs.php)
を用意。

nyuryoku.php

```php

<?php 
session_start();
include('funcs.php');//別の階層にfuncs.phpがある場合は「betukaisou/funcs.php」などパスを変えてincludesする
?>


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>データ登録</title>

</head>
<body>

<!-- Head[Start] -->
<header>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
    <div class="navbar-header"><a class="navbar-brand" href="chart.php">データ一覧</a></div>
    </div>
  </nav>
</header>
<!-- Head[End] -->
<p><a href="logout.php">ログアウト</a></p>
<!-- Main[Start] -->
<form method="post" action="insert.php">
  <div class="jumbotron">
   <fieldset>
    <legend>服の登録</legend>
     <label>服の名前：<input type="text" name="name"></label><br>
     <label>価格<input type="text" name="price"></label><br>
     <input type="submit" value="送信">
    </fieldset>
  </div>
</form>
<!-- Main[End] -->


</body>
</html>
```
insert.php

```php

<?php 
include('funcs.php');



//1. POSTデータ取得
//$name = filter_input( INPUT_GET, ","name" ); //こういうのもあるよ
//$price = filter_input( INPUT_POST, "price" ); //こういうのもあるよ
$name = $_POST['name'];
$price = $_POST['price'];


//2. DB接続します
$pdo = db_connect();


//３．データ登録SQL作成
//prepare("")の中にはmysqlのSQLで入力したINSERT文を入れて修正すれば良いイメージ
$stmt = $pdo->prepare("INSERT INTO chart_table(name,price,indate)VALUES(:name,:price,sysdate());
");
$stmt->bindValue(':name', h($name), PDO::PARAM_STR);  //Integer（数値の場合 PDO::PARAM_INT)  第３引数は省略出来るが、セキュリティの観点から記述している。文字列か数値はmysqlのデータベースに登録したものがvarcharaかintかというところで判断する
$stmt->bindValue(':price', h($price), PDO::PARAM_INT);  //Integer（数値の場合 PDO::PARAM_INT)

$status = $stmt->execute();

//４．データ登録処理後（基本コピペ使用でOK)
if($status==false){
  //SQL実行時にエラーがある場合（エラーオブジェクト取得して表示）
  $error = $stmt->errorInfo();
  exit("SQLError:".$error[2]);//エラーが起きたらエラーの2番目の配列から取ります。ここは考えず、これを使えばOK
                             // SQLEErrorの部分はエラー時出てくる文なのでなんでもOK
}else{
  //５．index.phpへリダイレクト(エラーがなければindex.phpt)
  header('Location: nyuryoku.php');//Location:の後ろの半角スペースは必ず入れる。
  exit();

}
?>
```
chart.php

```php

<?php 
include('funcs.php');

//2. DB接続します
$pdo = db_connect();


$name = '';
$price = '';


//2．データ登録SQL作成
//prepare("")の中にはmysqlのSQLで入力したINSERT文を入れて修正すれば良いイメージ
$stmt = $pdo->prepare("SELECT* FROM chart_table");
$status = $stmt->execute();

//loop through the returned data
while( $r = $stmt->fetch(PDO::FETCH_ASSOC)){

    $name = $name . '"'. $r['name'].'",';
    $price = $price . '"'. $r['price'] .'",';
}

$name = trim($name,",");
$price = trim($price,",");




?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    




    <canvas id="myChart" width="400" height="400"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
    <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [<?php echo $name ?>],//各棒の名前（name)
            // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'ほげ'],//各棒の名前（name)
            datasets: [{
                label: '# of Votes',
                data: [<?php echo $price ?>],//各縦棒の高さ(値段)
                // data: [12, 19, 3, 5, 2, 20],//各縦棒の高さ(値段)
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    </script>
</body>
</html>
```

funcs.php

```php

<?php 
//共通に使う関数を記述
.DB接続の関数
function db_connect(){
    try {
        //localhostの時はこれ。さくらの場合さくらのデータベースをいれる
        //Password:MAMP='root',XAMPP=''
        $pdo = new PDO('mysql:dbname=chart1;charset=utf8;host=localhost','root','root');
      } catch (PDOException $e) {//$eにエラー内容が入っている。
        exit('DBConnectError:'.$e->getMessage());//ここのDBConnectErrorはエラー時の文字表示の為、ここはなんでも良い。この項目２は基本idとpass以外コピペで覚えればOK
      }
    return $pdo;//※重要！！※ ここでリターンすることで他の項目でも使用している変数($pdo)を関数の外でも使用できるようにしている
}

?>
```

#ポイントの解説

chart.phpの以下の部分

```php3


$name = '';
$price = '';


//2．データ登録SQL作成
//prepare("")の中にはmysqlのSQLで入力したINSERT文を入れて修正すれば良いイメージ
$stmt = $pdo->prepare("SELECT* FROM chart_table");
$status = $stmt->execute();

//loop through the returned data
while( $r = $stmt->fetch(PDO::FETCH_ASSOC)){

    $name = $name . '"'. $r['name'].'",';
    $price = $price . '"'. $r['price'] .'",';
}

$name = trim($name,",");
$price = trim($price,",");

```

変数に持たせた値を

```php

    labels: [<?php echo $name ?>],//各棒の名前（name)
            // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'ほげ'],//各棒の名前（name)
            datasets: [{
                label: '# of Votes',
                data: [<?php echo $price ?>],//各縦棒の高さ(値段)
                // data: [12, 19, 3, 5, 2, 20],//各縦棒の高さ(値段)
```
script内でechoで呼び出している。
こうすることで、mysqlに登録した服の名前と価格がグラフに反映される。



今回はchart.jsの公式ドキュメントを簡単に接続する例としました。
次回はjsonに挑戦したいです。