データーベースからGoogle Chartの動的な折れ線グラフ

Question

###前提・実現したいこと
データーベースにはid、日付、値段、人数が保存してあります。
それらを動的に折れ線グラフを作っていまして、表示までさせることはできましたが３０件以上表示させますと下に大量の日付が表示されてしまうので取得してる日付を一定の間隔のような感じに表示したいのですが可能でしょうか？

2016/08/01 2016/08/15 2016/08/30

イメージ的にはこんな感じになります。
今のところ３０件すべてに日付が入ってるので邪魔な感じです。

###該当のソースコード

<?php
 $con = mysqli_connect('host','user','pw','db');
?>
 <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 
 
 
 	$query = "SELECT * FROM data order by id limit 30";
	
	

 $exec = mysqli_query($con,$query);
 while($row = mysqli_fetch_array($exec)){

 echo "['".$row['time']."',".$row['nedan']."],";
 }
 ?>
 ]);

//デザイン変更
 var options = {
	title:'値段', 
	width: 950, 
    height: 200, 
	colors: ['#0000FF'], 
    pointSize: 8, 
    lineWidth: 4, pointSize: 6, 
    vAxis: {direction: -1, minValue: 1},
	chartArea: {left: 100},
    titleTextStyle: { fontSize: 12 },	
	legend: { position: 'top'}, 
   
 
 };
//ここまで

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

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

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[anchan0718]

ありがとうございます。編集させていただきました。

Answer 1

arrayToDataTable で渡すデータのtypeを type: 'date' にしてみてはいかがでしょうか。

【DataTables and DataViews  |  Charts  |  Google Developers】
https://developers.google.com/chart/interactive/docs/datatables_dataviews#javascriptliteral

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

Comments

[anchan0718]

回答ありがとうございます。
['日付', '値段'],→['date', '値段'],にしたところ変わらなかったです。

echo "['".$row['time']."',".$row['nedan']."],";　変更前
↓
echo "[".$row['time'].","　変更後
文字列になってると表が変わるみたいなので数字にし、いい感じになりましたが、timeカラムには日付が入ってますが日付が表示されずにまったく関係ない数字が入ってしまいました。

１２００　　１３００　　１４００　　１５００
このような感じです。

mysqlへインサートする時はdateタイプにてnow()でインサートしてます。

ご教授よろしくお願いします。

[kei344]

> ['日付', '値段'],→['date', '値段'],にしたところ変わらなかったです。
例示した構造をよく見て、typeとは何かを考えてみてください。

例示したものでPHPを使わず表示が出来るようにJavaScriptを組み、それをPHPで出力するようにコーディングする、と言う順番で修正されてはいかがでしょうか。

[anchan0718]

勘違いしてました。
今までは文字列として日付を渡していましたが、mysqlのdateタイプnow()で日付を取得してそれを出力させたところ
１２００　　１３００　　１４００　　１５００
のように表示されました。

そういうやり方もあるんですね。
mysqlの日付をyyyy-mm-ddではなくyyyymmddに保存する方法ってありますか？
おそらくこれで出力させ、yyyy/mm/ddでフォーマットすれば反映されるんじゃないかと思っているんですが、日付を取得するとどうしても2016-08-01になってしまいます。

[kei344]

PHPとMySQLの話ではありません。Google ChartはJavaScriptで動いています。

だから、PHPを使わず表示が出来るようにJavaScriptを組んでみてから考えられないと思った表示には出来ませんよ。

> 日付を取得するとどうしても2016-08-01になってしまいます。
JavaScriptで使うときには何とでもなりますが、どうしても気になるようでしたら新規で質問をしてください。

[anchan0718]

なかなか理解ができていなくてすみません。
javascriptを使ってDBに接続して、グラフを表示させるような感じですね。
確かにPHPを使うこともありませんね。挑戦してみます。

分かりました。ありがとうございました。

[kei344]

いやだからそうじゃなくて、表示にはJavaScriptで、そのデータを用意するのがPHP＆DBなのは問題ありません。

JavaScriptでどう書けばよいかがわからない状態で、PHPやDBの話が混ざっておられるようなので、上記のような回答をしています。