使用 RGraph 从 Postgres 数据库轮询数据并使用 AJAX/JSON 更新

Question

我在这方面有点不深入，所以我希望有人有一些见解。 :)

我正在尝试使用 AJAX 更新 div。 AJAX 调用将下拉选择的值发送到 PHP 文件，该文件将执行 pgsql 查询以获取一些数据。我在 RGraph 教程中读到，此数据需要格式化为 JSON 格式，以便 RGraph 可以解释它，然后提供给运行 RGraph 视图的 JS。

这个问题实际上可能是 2 个独立的问题，但我还是要问：

~~是否有一种标准的方法来获取 PHP 中的查询结果并将其输出为 JSON 格式？~~
使用JSON数据的JS要在什么地方触发？我试过对一些初始数据进行硬编码，但图表似乎没有显示出来。但是，我知道 jQuery 正在正确执行 AJAX 调用，因为我看到 div 更新（中间有一条 "Loading..." 消息，然后返回空白，指示我是一个空响应），所以我想我只是没有正确地确定这个范围。

P.S。不，这次我没有犯 $_POST/$_GET 错误。

如有任何帮助，我们将不胜感激。谢谢！

编辑 1：得到这个。这实际上比我想象的要容易得多。但是，仍然没有正确确定范围。对 RGraph 如何抓取 JSON 对象并将其显示为图形，以及如何使用 AJAX 用新图形刷新 div 有什么帮助吗？

Answer 1

这里有一些基于 SVG 的 AJAX 演示页面：

这里有一堆指向 SVG 基本 AJAX 演示的链接，但现在演示不再在线 - 它们在下载存档中。所以在这里下载：https://www.rgraph.net/download.html#stable

这里有一个 JSON 文档页面：

https://www.rgraph.net/svg/docs/the-svg-ajax-functions.html

它的代码示例是这样的：

<script>
    GLOBALS = {};

    function draw()
    {
        RGraph.SVG.AJAX.getJSON('/ajax/getdata.html?json', function (json)
        {
            if (GLOBALS.bar) {
                RGraph.SVG.clear(GLOBALS.bar.svg);
            }

            GLOBALS.bar = new RGraph.SVG.Bar({
                id: 'chart-container',
                data: json.data,
                options: {
                    // Add your own options to configure the chart
                }
            }).draw();
        });
    }

    draw();
</script>

如果你按照这个例子，在你的网站上创建一个页面，从你的数据库中获取数据并像这个页面那样输出它：

https://www.rgraph.net/getdata.html?json

请注意，该页面没有 HTML 输出 - 只有 JSON.

然后您可以像上面的代码一样使用 RGraph.SVG.AJAX.getJSON() 函数获取该页面 - 从您的包含图表的网页 - 例如 foo.html 所以 foo.html 将包含上面的 RGraph 代码。

如果你想让它重复，那么你可以添加一个计时器，以便后续的提取更新它：

setTimeout(function ()
{
    draw();
}, 1000);

我认为这涵盖了一切。不过我可能遗漏了一些东西。

使用 RGraph 从 Postgres 数据库轮询数据并使用 AJAX/JSON 更新

Using RGraph to poll data from a Postgres DB and update using AJAX/JSON

php

ajax

jquery

json

rgraph