googlecharts php postgresql 时间戳格式日期时间轴清洁器答案

【问题标题】：googlecharts php postgresql timestamp format datetime axis cleanergooglecharts php postgresql 时间戳格式日期时间轴清洁器
【发布时间】：2017-01-02 11:45:09
【问题描述】：

我的应用程序准系统启动并运行，但底部轴上的日期格式很糟糕。 https://s28.postimg.org/fts5h6fel/app.jpg

这是我对底轴格式的目标： https://s28.postimg.org/57qwu5y3x/app2.jpg

有没有办法将 postgresql 中的时间戳用作 googlecharts 中的日期时间？

目前我的脚本将时间戳字段导入为字符串，否则它根本不起作用。

postgresql 数据库表： 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

这是我当前的网页：

<?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>

【问题讨论】：

标签： postgresql format timestamp axis pygooglechart

【解决方案1】：

如果这个答案可以帮助您解决您正在处理的问题，请点赞这篇文章，我是这个网站的新手。

得到它的工作：https://s28.postimg.org/6hwya5925/done.jpg

我最终在数据库中使用了 unix 时间戳，并将其用作主键，在任何需要修改时间戳的地方，我在必要时使用字符串操作。

新的 postgresql 数据库详细信息：

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

索引.php：

<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:

<?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>

【讨论】：

google 图表可以工作，但老实说对于我的数据集中的数据点数量来说太慢了，我正在切换到 dygraph