質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • PHP

    25526questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    22141questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8775questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • JSON

    1557questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • Highcharts

    44questions

    HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

mysqlからphpで取得したデータで、highchartsのグラフをうまく表示できない

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,411

Dai001

score 6

初めて投稿致します。

プログミングを初めてまだ3ヶ月弱のため、質問仕方等に至らない点等御座いますが、
何卒宜しくお願い致します。

前提・実現したいこと

①mysqlからphpでデータを取得
②highchartsで、そのデータをグラフ表示
※①→②のデータ受け渡し:json

該当のソースコードで実行しても、グラフがうまく表示されません。
どのように変更すればうまく表示できるでしょうか。

発生している問題・エラーメッセージ

発生している問題:グラフを表示できない

エラーメッセージ:特に御座いません。

該当のソースコード

// getDate.php

<?php

require_once(__DIR__ . '/conf.php');

try{

  $pdo =new PDO(DSN, DB_USERNAME, DB_PASSWORD);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

}catch(PDOException $Exception){

  die('エラー:'.$Exception->getMessage());

}

try {

$sql = "SELECT * from sales";
    $stmh = $pdo->prepare($sql);
    $stmh->execute();
    $rowCount = $stmh->rowCount();


} catch(PDOException $Exception){

die('エラー:'.$Exception->getMessage());

}

$rows = array();
$rows['name'] = 'sales';

while($r = $stmh->fetch(PDO::FETCH_ASSOC)){
  $rows['data'][]= $r['sales'];
}

$result = array();
array_push($result, $rows);
echo json_encode($result);
//graph.js

$(function () {

    var chart = Highcharts.chart('container', {
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series:[{}]
    });

    $.getJSON("getData.php", function(json) {
        options.series[0].data = json['data'];
        chart = new Highcharts.Chart(options);
    });

});
// index.html

<!DOCTYPE html>
<html lang ="ja">
<head>
  <meta charset="utf-8" />
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <title>グラフの練習</title>

</head>
<body>
  <script src="graph.js"></script>

  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


  <div id="result"></div>


  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
</body>
</html>

試したこと

下記、サイトを参考に色々と試行錯誤して試行錯誤してみましたが、
うまく表示することができませんでした。

・PHPからJavaScriptに変数を渡すまとめ
http://qiita.com/cither/items/b98cc4e237dcc8f7e51f

・PREPROCESS DATA USING JSON
http://www.highcharts.com/docs/working-with-data/custom-preprocessing#3

・How to load MySQL results to Highcharts using JSON
https://blueflame-software.com/how-to-load-mysql-results-to-highcharts-using-json/

補足情報(言語/FW/ツール等のバージョンなど)

・php: 5.6.28
・mysql: 5.6.34
・jquery: jquery-1.12.4
・highcharts: http://www.highcharts.com/

・salesテーブルの中身

mysql> select * from sales;
+----+------------+----------+----------+--------+
| id | day        | sales    | orders   | counts |
+----+------------+----------+----------+--------+
|  1 | 2017/01/01 | 42961668 | 52961668 |  14000 |
|  2 | 2017/01/02 | 32961668 | 42961668 |  12000 |
|  3 | 2017/01/03 | 52961668 | 42961668 |  15000 |
|  4 | 2017/01/04 | 42961668 | 42961668 |  11000 |
|  5 | 2017/01/05 | 62961668 | 55961668 |  13500 |
+----+------------+----------+----------+--------+

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

まず、getData.phpにブラウザでアクセスして正しくJSONがかえってきているかを確認することからはじめると良いと思います。JSONに問題が無ければ highcharts をPHPを使わずに表示させ、それが出来たらつなげる、という手順ではないでしょうか。

graph.js は exporting.js の次あたりで読み込むほうが良いです。

$.getJSON のコールバック関数の中で、options.series[0].data としていますが、そもそも options という変数が質問文のコードでは用意されていません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/07 17:09

    ご回答ありがとうございます。
    またご返信が遅くなってしまい大変申し訳ございません。

    >getData.phpにブラウザでアクセスして正しくJSONがかえってきているかを確認することからはじめると良いと思います。
    まだ試せていませんが、まずこちらから順を追って解決していきたいと思います。

    キャンセル

0

1) まずは平文のjsonデータを出力するページを使い、ダミーデータでグラフが正常に表示されるようにする。
2) php+MySQLでダミーと同じ形式でjsonデータを出力させる
3)組み合わせて正常に表示されるかを確認する

最初もベテランも関係なく、フェーズを区切ってひとつづつ確認していきましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/07 17:11

    ご回答ありがとうございます。
    またご返信が遅くなってしまい大変申し訳ございません。

    まだ実施できてはいませんが、フェーズを分けて順番に取り組んでみたいと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    25526questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    22141questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8775questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • JSON

    1557questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • Highcharts

    44questions

    HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。