googlecharts php postgresql 时间戳格式日期时间轴清洁器
googlecharts php postgresql timestamp format datetime axis cleaner
我已经启动了我的应用程序准系统 运行，但是底轴上的日期格式很糟糕。
https://s28.postimg.org/fts5h6fel/app.jpg
这是我的底轴格式目标：
https://s28.postimg.org/57qwu5y3x/app2.jpg
有没有办法将 postgresql 中的时间戳用作 googlecharts 中的日期时间？
目前我的脚本将时间戳字段作为字符串导入，否则它根本不起作用。
postgresql 数据库 table:
CREATE TABLE stats(id SERIAL PRIMARY KEY, spo INTEGER NOT NULL, hr INTEGER NOT NULL, spt timestamp NOT NULL);
示例数据：
patient=# SELECT * FROM stats LIMIT 100;
id | spo | hr | spt
-----+-----+----+----------------------------
1 | 97 | 80 | 2017-01-01 22:39:48.606672
2 | 96 | 79 | 2017-01-01 22:39:49.60654
3 | 97 | 79 | 2017-01-01 22:39:50.606504
4 | 96 | 79 | 2017-01-01 22:39:51.60639
5 | 96 | 76 | 2017-01-01 22:39:52.606374
6 | 96 | 74 | 2017-01-01 22:39:53.606271
7 | 96 | 72 | 2017-01-01 22:39:54.606251
8 | 96 | 71 | 2017-01-01 22:39:55.606124
9 | 97 | 70 | 2017-01-01 22:39:56.606061
10 | 97 | 69 | 2017-01-01 22:39:57.606012
这是我当前的网页：
</p>
<pre><code><?php
$con = pg_connect("host=127.0.0.1 port=5432 dbname=patient user=spo password=secretpass") or die("db connection failed!");
$sth = pg_query($con, "select spt,spo,hr from stats");
$table = array();
$table[] = ["spt", "spo", "hr"];
while($r = pg_fetch_assoc($sth)) {
$table[] = [(string) $r['spt'], (int) $r['spo'], (int) $r['hr']];
}
$jsonTable = json_encode($table);
echo $jsonTable;
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable(<?=$jsonTable?>);
var options = {
title: 'spO2/hr monitor',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 1200px; height: 720px"></div>
</body>
</html>
如果这个答案可以帮助您解决您正在处理的问题，请给这个投票post，我是这个网站的新手。
成功了：https://s28.postimg.org/6hwya5925/done.jpg
我最终在数据库中使用了 unix 时间戳，并将其也用作主键，在任何需要修改时间戳的地方，我在必要时使用了字符串操作。
新 postgresql 数据库详细信息：
</p>
<pre><code>CREATE TABLE stats(utc INTEGER PRIMARY KEY, spo INTEGER NOT NULL, hr INTEGER NOT NULL);
patient=# SELECT * FROM stats LIMIT 10;
utc | spo | hr
------------+-----+----
1464499543 | 89 | 63
1464499544 | 89 | 64
1464499545 | 89 | 65
1464499546 | 89 | 65
1464499547 | 89 | 66
1464499548 | 89 | 65
1464499549 | 89 | 65
1464499550 | 89 | 65
1464499551 | 89 | 65
1464499552 | 89 | 65
index.php:
</p>
<pre><code><html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel="stylesheet" href="jquery-ui.structure.min.css">
<link rel="stylesheet" href="jquery-ui.theme.min.css">
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd").datepicker("setDate", "-1");
$("#datepicker").datepicker().on("change", function (e) {
$.ajax({
url: 'getChart.php',
type: 'GET',
data: {dtpickerdate: $(this).val()},
contentType: 'application/json; charset=utf-8',
success: function (result) {
$("#chart").html(result);
}
});
});
});
$(document).ready(function() {
$.ajax({
url: 'getChart.php',
type: 'GET',
data: {dtpickerdate: $("#datepicker").val()},
contentType: 'application/json; charset=utf-8',
success: function (result) {
$("#chart").html(result);
}
});
});
</script>
</head>
<body>
Date: <input type="text" id="datepicker"><br>
<div id="chart" style="width: 100%; height: 97%"></div>
</body>
</html>
getChart.php:
</p>
<pre><code><?php
$dtpickerdate = isset($_GET['dtpickerdate']) ? $_GET['dtpickerdate'] : "2016-06-06";
$con = pg_connect("dbname=patient user=spo password=secretpass") or die("db connection failed!");
$d1 = (string)strtotime($dtpickerdate.' 12:00:00');
$nday = (int)substr($dtpickerdate, -2) + 1;
$ndat = substr($dtpickerdate, 0, 8).(string)$nday;
$d2 = (string)strtotime($ndat.' 12:00:00');
$sth = pg_query($con, "select * from stats where utc between ".$d1." and ".$d2);
$table['cols'] = array(
array(id => 'utc', label => 'Time', type => 'datetime'),
array(id => 'spo', label => 'spO2', type => 'number'),
array(id => 'hr', label => 'PulseRate', type => 'number')
);
while($r = pg_fetch_assoc($sth)) {
$temp = array();
$mon = (int)date("m", $r['utc']) - 1;
$mdat = "Date(".date("Y, ", $r['utc']).(string)$mon.date(", d, H, i, s)", $r['utc']);
$temp[] = array(v => (string) $mdat);
$temp[] = array(v => (int) $r['spo']);
$temp[] = array(v => (int) $r['hr']);
$rows[] = array(c => $temp);
}
$table['rows'] = $rows;
$json = json_encode($table);
//echo $json;
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$json?>);
var options = {
chartArea: {'width': '92%', 'height': '86%'},
title: 'spO2/hr monitor',
legend: { position: 'bottom' },
vAxis: {viewWindow:{max:100, min:50}, gridlines:{count:6}, minorGridlines:{count:4}},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 100%"></div>
</body>
</html>
我已经启动了我的应用程序准系统 运行，但是底轴上的日期格式很糟糕。 https://s28.postimg.org/fts5h6fel/app.jpg
这是我的底轴格式目标： https://s28.postimg.org/57qwu5y3x/app2.jpg
有没有办法将 postgresql 中的时间戳用作 googlecharts 中的日期时间？
目前我的脚本将时间戳字段作为字符串导入，否则它根本不起作用。
postgresql 数据库 table:
CREATE TABLE stats(id SERIAL PRIMARY KEY, spo INTEGER NOT NULL, hr INTEGER NOT NULL, spt timestamp NOT NULL);
示例数据：
patient=# SELECT * FROM stats LIMIT 100;
id | spo | hr | spt
-----+-----+----+----------------------------
1 | 97 | 80 | 2017-01-01 22:39:48.606672
2 | 96 | 79 | 2017-01-01 22:39:49.60654
3 | 97 | 79 | 2017-01-01 22:39:50.606504
4 | 96 | 79 | 2017-01-01 22:39:51.60639
5 | 96 | 76 | 2017-01-01 22:39:52.606374
6 | 96 | 74 | 2017-01-01 22:39:53.606271
7 | 96 | 72 | 2017-01-01 22:39:54.606251
8 | 96 | 71 | 2017-01-01 22:39:55.606124
9 | 97 | 70 | 2017-01-01 22:39:56.606061
10 | 97 | 69 | 2017-01-01 22:39:57.606012
这是我当前的网页：
</p>
<pre><code><?php
$con = pg_connect("host=127.0.0.1 port=5432 dbname=patient user=spo password=secretpass") or die("db connection failed!");
$sth = pg_query($con, "select spt,spo,hr from stats");
$table = array();
$table[] = ["spt", "spo", "hr"];
while($r = pg_fetch_assoc($sth)) {
$table[] = [(string) $r['spt'], (int) $r['spo'], (int) $r['hr']];
}
$jsonTable = json_encode($table);
echo $jsonTable;
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable(<?=$jsonTable?>);
var options = {
title: 'spO2/hr monitor',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 1200px; height: 720px"></div>
</body>
</html>
如果这个答案可以帮助您解决您正在处理的问题，请给这个投票post，我是这个网站的新手。
成功了：https://s28.postimg.org/6hwya5925/done.jpg
我最终在数据库中使用了 unix 时间戳，并将其也用作主键，在任何需要修改时间戳的地方，我在必要时使用了字符串操作。
新 postgresql 数据库详细信息：
</p>
<pre><code>CREATE TABLE stats(utc INTEGER PRIMARY KEY, spo INTEGER NOT NULL, hr INTEGER NOT NULL);
patient=# SELECT * FROM stats LIMIT 10;
utc | spo | hr
------------+-----+----
1464499543 | 89 | 63
1464499544 | 89 | 64
1464499545 | 89 | 65
1464499546 | 89 | 65
1464499547 | 89 | 66
1464499548 | 89 | 65
1464499549 | 89 | 65
1464499550 | 89 | 65
1464499551 | 89 | 65
1464499552 | 89 | 65
index.php:
</p>
<pre><code><html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel="stylesheet" href="jquery-ui.structure.min.css">
<link rel="stylesheet" href="jquery-ui.theme.min.css">
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd").datepicker("setDate", "-1");
$("#datepicker").datepicker().on("change", function (e) {
$.ajax({
url: 'getChart.php',
type: 'GET',
data: {dtpickerdate: $(this).val()},
contentType: 'application/json; charset=utf-8',
success: function (result) {
$("#chart").html(result);
}
});
});
});
$(document).ready(function() {
$.ajax({
url: 'getChart.php',
type: 'GET',
data: {dtpickerdate: $("#datepicker").val()},
contentType: 'application/json; charset=utf-8',
success: function (result) {
$("#chart").html(result);
}
});
});
</script>
</head>
<body>
Date: <input type="text" id="datepicker"><br>
<div id="chart" style="width: 100%; height: 97%"></div>
</body>
</html>
getChart.php:
</p>
<pre><code><?php
$dtpickerdate = isset($_GET['dtpickerdate']) ? $_GET['dtpickerdate'] : "2016-06-06";
$con = pg_connect("dbname=patient user=spo password=secretpass") or die("db connection failed!");
$d1 = (string)strtotime($dtpickerdate.' 12:00:00');
$nday = (int)substr($dtpickerdate, -2) + 1;
$ndat = substr($dtpickerdate, 0, 8).(string)$nday;
$d2 = (string)strtotime($ndat.' 12:00:00');
$sth = pg_query($con, "select * from stats where utc between ".$d1." and ".$d2);
$table['cols'] = array(
array(id => 'utc', label => 'Time', type => 'datetime'),
array(id => 'spo', label => 'spO2', type => 'number'),
array(id => 'hr', label => 'PulseRate', type => 'number')
);
while($r = pg_fetch_assoc($sth)) {
$temp = array();
$mon = (int)date("m", $r['utc']) - 1;
$mdat = "Date(".date("Y, ", $r['utc']).(string)$mon.date(", d, H, i, s)", $r['utc']);
$temp[] = array(v => (string) $mdat);
$temp[] = array(v => (int) $r['spo']);
$temp[] = array(v => (int) $r['hr']);
$rows[] = array(c => $temp);
}
$table['rows'] = $rows;
$json = json_encode($table);
//echo $json;
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$json?>);
var options = {
chartArea: {'width': '92%', 'height': '86%'},
title: 'spO2/hr monitor',
legend: { position: 'bottom' },
vAxis: {viewWindow:{max:100, min:50}, gridlines:{count:6}, minorGridlines:{count:4}},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 100%"></div>
</body>
</html>