初めて投稿致します。
プログミングを初めてまだ3ヶ月弱のため、質問仕方等に至らない点等御座いますが、
何卒宜しくお願い致します。
###前提・実現したいこと
①mysqlからphpでデータを取得
②highchartsで、そのデータをグラフ表示
※①→②のデータ受け渡し:json
該当のソースコードで実行しても、グラフがうまく表示されません。
どのように変更すればうまく表示できるでしょうか。
###発生している問題・エラーメッセージ
発生している問題:グラフを表示できない
エラーメッセージ:特に御座いません。
###該当のソースコード
php
1// getDate.php 2 3<?php 4 5require_once(__DIR__ . '/conf.php'); 6 7try{ 8 9 $pdo =new PDO(DSN, DB_USERNAME, DB_PASSWORD); 10 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 11 $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 12 13}catch(PDOException $Exception){ 14 15 die('エラー:'.$Exception->getMessage()); 16 17} 18 19try { 20 21$sql = "SELECT * from sales"; 22 $stmh = $pdo->prepare($sql); 23 $stmh->execute(); 24 $rowCount = $stmh->rowCount(); 25 26 27} catch(PDOException $Exception){ 28 29die('エラー:'.$Exception->getMessage()); 30 31} 32 33$rows = array(); 34$rows['name'] = 'sales'; 35 36while($r = $stmh->fetch(PDO::FETCH_ASSOC)){ 37 $rows['data'][]= $r['sales']; 38} 39 40$result = array(); 41array_push($result, $rows); 42echo json_encode($result); 43
javascript
1//graph.js 2 3$(function () { 4 5 var chart = Highcharts.chart('container', { 6 title: { 7 text: 'Monthly Average Temperature', 8 x: -20 //center 9 }, 10 subtitle: { 11 text: 'Source: WorldClimate.com', 12 x: -20 13 }, 14 xAxis: { 15 categories: ['1', '2', '3', '4', '5'] 16 }, 17 yAxis: { 18 title: { 19 text: 'Temperature (°C)' 20 }, 21 plotLines: [{ 22 value: 0, 23 width: 1, 24 color: '#808080' 25 }] 26 }, 27 tooltip: { 28 valueSuffix: '°C' 29 }, 30 legend: { 31 layout: 'vertical', 32 align: 'right', 33 verticalAlign: 'middle', 34 borderWidth: 0 35 }, 36 series:[{}] 37 }); 38 39 $.getJSON("getData.php", function(json) { 40 options.series[0].data = json['data']; 41 chart = new Highcharts.Chart(options); 42 }); 43 44}); 45
html
1// index.html 2 3<!DOCTYPE html> 4<html lang ="ja"> 5<head> 6 <meta charset="utf-8" /> 7 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 8 <title>グラフの練習</title> 9 10</head> 11<body> 12 <script src="graph.js"></script> 13 14 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 15 16 17 <div id="result"></div> 18 19 20 <script src="https://code.highcharts.com/highcharts.js"></script> 21 <script src="https://code.highcharts.com/modules/exporting.js"></script> 22</body> 23</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 |
+----+------------+----------+----------+--------+
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/07 08:09