「wordpress」 function.php から google chart を表示したいです。

Question

御世話になります。
wordpressに google chartで自作したグラフを表示したいと思います。
以前こちらの質問サイトで、function.phpにヒアドキュメントでまとめて設定すると良い回答を頂きました。
実際に、google chart で表示できるコードをヒアドキュメントにまとめてみたのですが、文法エラーが出てしまいました。私自身あまりfunction.phpやwordpressに詳しくないため、エラー原因を解読することができませんでした。

「実践したいこと」
wordpressの固定ページに<div>でグラフを表示するidを設定しました。
ショートコードで読み込んだjavascript(グラフ関係)とphp(グラフのデータをデータベースから拾う)のファイルを使って、そのidの中にグラフを表示したいです。

「固定ページ」
php

[shortcode1]
<div id="today" style="width:100%;height:150px;"></div>

[function.php]

function shortcode1Func() {

echo <<< EOM

$dsn = 'mysql:host=ホスト名;dbname=データベース名;charset=utf8';
  // データベースのユーザー名
$user = ユーザー名;
  // データベースのパスワード
$password = パスワード;
// tryにPDOの処理を記述
try {
  // PDOインスタンスを生成
  $dbh = new PDO($dsn, $user, $password);
// エラー（例外）が発生した時の処理を記述
} catch (PDOException $e) {
  // エラーメッセージを表示させる
  echo 'データベースにアクセスできません！' . $e->getMessage();
}

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
 
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawContinuousDateChart);

 function drawContinuousDateChart() {
 var data = google.visualization.arrayToDataTable([

 ['分', '通信量'],
 <?php

   $sql = "SELECT * FROM mtraffics;
   $stmt = $dbh->query($sql);
   foreach ($stmt as $row) {
   echo "['".$row["date"]."',".$row['volume']."],"; //グラフに出力する情報（日付、ランキング数値） 
   }
 ?>
 
 ]);

//デザイン変更
 var options = {
	//title:'ランキング', //タイトル
	//width: 1000, //横幅
    //height: 150, //高さ
	colors:['#FF0000', '#0000FF'], //文字の色
	hAxis:{showTextEvery:1},//インデクスの表示
	//Axis: {direction: -1, minValue: 1},
    lineWidth: 1, pointSize: 10, //ラインの横
    titleTextStyle: { fontSize: 12 },	//文字サイズ
	legend : { position: 'top'},	//タイトルポジション
 };

 var chart = new google.visualization.LineChart(document.getElementById('today'));

 chart.draw(data, options);
 }
 </script>
EOM;

}
add_shortcode('shortcode1', 'shortcode1Func');

「エラー」
Parse error: syntax error, unexpected '"', expecting identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING)

どのようにgoogle chart をwordpressに埋め込めればよいでしょうか？
google chart のプラグインがあることは知っていますが、jequeryを使ったグラフもあり、外部から作ったファイルをwordpressで読み込ませる方法を知りたいです。
よろしくお願いします。

Comments

[退会済みユーザー]

`$sql = "SELECT * FROM mtraffics;`の閉じ"が足りてません。

[toutou]

echo <<< EOMの使い方ってあってます？

[退会済みユーザー]

それから、WordPressは`functions.php`です。`function.php`ではなく。

Answer 1

これで動くでしょうか。
PHPやJavascriptのコードがごっちゃごっちゃになっているので、全体的に書き方を見直したほうがいいと思います。

function shortcode1Func() {

$dsn = 'mysql:host=ホスト名;dbname=データベース名;charset=utf8';
  // データベースのユーザー名
$user = ユーザー名;
  // データベースのパスワード
$password = パスワード;
// tryにPDOの処理を記述
try {
  // PDOインスタンスを生成
  $dbh = new PDO($dsn, $user, $password);
// エラー（例外）が発生した時の処理を記述
} catch (PDOException $e) {
  // エラーメッセージを表示させる
  echo 'データベースにアクセスできません！' . $e->getMessage();
}

$output = <<< EOF
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">

 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawContinuousDateChart);

 function drawContinuousDateChart() {
 var data = google.visualization.arrayToDataTable([

 ['分', '通信量'],
EOF;

   $sql = "SELECT * FROM mtraffics";
   $stmt = $dbh->query($sql);
   foreach ($stmt as $row) {
   $output .= "['".$row["date"]."',".$row['volume']."],"; //グラフに出力する情報（日付、ランキング数値） 
   }
$output .= <<< EOF
 ]);
EOF;

$output .= <<< EOF
//デザイン変更
 var options = {
    //title:'ランキング', //タイトル
    //width: 1000, //横幅
    //height: 150, //高さ
    colors:['#FF0000', '#0000FF'], //文字の色
    hAxis:{showTextEvery:1},//インデクスの表示
    //Axis: {direction: -1, minValue: 1},
    lineWidth: 1, pointSize: 10, //ラインの横
    titleTextStyle: { fontSize: 12 },    //文字サイズ
    legend : { position: 'top'},    //タイトルポジション
 };

 var chart = new google.visualization.LineChart(document.getElementById('today'));

 chart.draw(data, options);
 }
 </script>
EOF;

return $output;
}
add_shortcode('shortcode1', 'shortcode1Func');

Comments

[blossan]

書き方を勘違いしていました。回答して頂きありがとうございました。