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

Question

I'm a bit out of depth on this one so I hope someone has some insight. :)

I'm attempting to update a div using AJAX. The AJAX call sends a dropdown selection's value to a PHP file, which will be performing a pgsql query to grab some data. I've read in the RGraph tutorials that this data needs to be formatted to a JSON format so that RGraph can interpret it, and then fed to the JS that runs the RGraph views.

This question might actually be 2 separate questions, but I'll ask anyway:

1. Is there a standard way to grab the query's results in PHP and output them into a JSON format?
2. Where would I want to trigger the JS that uses the JSON data? I've tried hardcoding some initial data but the graphs don't seem to show up. However, I know the jQuery is performing the AJAX calls correctly because I see the div update (with an in-between "Loading..." message and then back to blank, indicating to me a null response), so I think I'm just not scoping this properly.

P.S. No, this time I'm not making a $_POST/$_GET mistake.

Any help would be appreciated. Thanks!

EDIT 1: Got this one. It was actually way easier than I thought. Still not scoping properly, however. Any help with how RGraph grabs a JSON object and displays it as a graph, and how to use AJAX to refresh the div with a new graph?

Answer 1

There's some SVG based AJAX demo pages here:

There was a bunch of links to the SVG basic AJAX demos here, but now the demos are no longer online - they are in the download archive. So download it here: https://www.rgraph.net/download.html#stable

There's a JSON documentation page here:

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

And the code example from it is this:

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

If you follow this example, create a page on your website that gets the data from your database and outputs it like this page does:

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

Note that there's no HTML output by that page - just the JSON.

Then you can fetch that page using the RGraph.SVG.AJAX.getJSON() function like the code above does - from your webpage that has the chart on it - eg foo.html So the foo.html is what would contain that RGraph code above.

And if you wanted it to repeat then you could add a timer so that subsequent fetches update it:

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

I think that covers everything. I've probably left something out though.