[英]Using timeline Google Chart API in PHP - Date/Time formatting issues
我正在嘗試實施Google的時間軸API https://developers.google.com/chart/interactive/docs/gallery/timeline#controlling-the-colors
我不確定日期格式存在問題,因為我不確定如何將時間格式存儲/轉換為時間線圖表的正確格式。
我試圖輸出一個圖表,如下所示:(這是一個硬編碼的示例)
我當前的代碼如下所示:
<?php
$connect=mysqli_connect("localhost","root","","smartcinema");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query = "SELECT a.screen_name, m.title, s.show_startime, s.show_endtime FROM timetable AS t INNER JOIN showing AS s ON s.showing_id = t.showing_id JOIN auditorium AS a ON a.screen_id = t.screen_id JOIN movies AS m ON m.movie_id = t.movie_id";
$qresult = mysqli_query($connect,$query);
$rows = array();
$table = array();
$table['cols'] = array (
array('id' => 'Screen', 'type' => 'string'),
array('id' => 'Movie', 'type' => 'string'),
array('id' => 'Start time', 'type' => 'date'),
array('id' => 'End time', 'type' => 'date')
);
while($res = mysqli_fetch_assoc($qresult)){
$result[] = $res;
}
foreach ($result as $r) {
$temp = array();
$temp[] = array('v' => $r['screen_name']);
$temp[] = array('v' => $r['title']);
$temp[] = array('v' => 'new Date(0,0,0,'.date('H',strtotime($r['show_startime'])).','.date('i',strtotime($r['show_startime'])).','.date('s',strtotime($r['show_startime'])).')');
$temp[] = array('v' => 'new Date(0,0,0,'.date('H',strtotime($r['show_endtime'])).','.date('i',strtotime($r['show_endtime'])).','.date('s',strtotime($r['show_endtime'])).')');
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
print_r($jsonTable);
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var container = document.getElementById('test');
var chart = new google.visualization.Timeline(container);
var options = {
timeline: { colorByRowLabel: true },
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
<div id="test" ></div>
當你print_r($jsonTable);
-與以下示例有何不同?
google.charts.load('current', { callback: drawChart, packages: ['timeline'] }); function drawChart() { var dataTable = new google.visualization.DataTable({ cols: [ {id: 'Screen', type: 'string'}, {id: 'Movie', type: 'string'}, {id: 'Start time', type: 'date'}, {id: 'End time', type: 'date'} ], rows: [ {c:[{v: 'Screen 1'}, {v: 'Batman v Superman: Dawn of Justice'}, {v: new Date(0, 0, 0, 10, 0, 0)}, {v: new Date(0, 0, 0, 12, 31, 0)}]}, {c:[{v: 'Screen 1'}, {v: 'Batman v Superman: Dawn of Justice'}, {v: new Date(0, 0, 0, 12, 51, 0)}, {v: new Date(0, 0, 0, 15, 22, 0)}]}, {c:[{v: 'Screen 1'}, {v: 'Batman v Superman: Dawn of Justice'}, {v: new Date(0, 0, 0, 15, 42, 0)}, {v: new Date(0, 0, 0, 18, 13, 0)}]}, {c:[{v: 'Screen 2'}, {v: 'High-Rise'}, {v: new Date(0, 0, 0, 10, 0, 0)}, {v: new Date(0, 0, 0, 11, 52, 0)}]}, {c:[{v: 'Screen 2'}, {v: 'High-Rise'}, {v: new Date(0, 0, 0, 12, 2, 0)}, {v: new Date(0, 0, 0, 13, 54, 0)}]}, {c:[{v: 'Screen 2'}, {v: 'High-Rise'}, {v: new Date(0, 0, 0, 14, 4, 0)}, {v: new Date(0, 0, 0, 15, 56, 0)}]}, ] }); var container = document.getElementById('example'); var chart = new google.visualization.Timeline(container); chart.draw(dataTable); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="example"></div>
因此,我回頭查看了我的代碼,而不是定義:
var dataTable = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
我正在定義
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
我定義的變量名稱不正確,因此我的工作代碼現在是:
<?php
$connect=mysqli_connect("localhost","root","","smartcinema");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query = "SELECT a.screen_name, m.title, s.show_startime, s.show_endtime FROM timetable AS t INNER JOIN showing AS s ON s.showing_id = t.showing_id JOIN auditorium AS a ON a.screen_id = t.screen_id JOIN movies AS m ON m.movie_id = t.movie_id";
$qresult = mysqli_query($connect,$query);
$rows = array();
$table = array();
$table['cols'] = array (
array('id' => 'Screen', 'type' => 'string'),
array('id' => 'Movie', 'type' => 'string'),
array('id' => 'Start time', 'type' => 'date'),
array('id' => 'End time', 'type' => 'date')
);
while($res = mysqli_fetch_assoc($qresult)){
$result[] = $res;
}
foreach ($result as $r) {
$temp = array();
$temp[] = array('v' => $r['screen_name']);
$temp[] = array('v' => $r['title']);
$temp[] = array('v' => 'Date(0,0,0,'.date('H',strtotime($r['show_startime'])).','.date('i',strtotime($r['show_startime'])).','.date('s',strtotime($r['show_startime'])).')');
$temp[] = array('v' => 'Date(0,0,0,'.date('H',strtotime($r['show_endtime'])).','.date('i',strtotime($r['show_endtime'])).','.date('s',strtotime($r['show_endtime'])).')');
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var dataTable = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var container = document.getElementById('example');
var chart = new google.visualization.Timeline(container);
chart.draw(dataTable);
}
</script>
<div id="example" ></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.