Page 1 of 1

Update charts when using dropdown item (custom dashboard)

Posted: Thu Jan 19, 2023 9:02 pm
by Iurywsl

in my custom dashboard I have graphs (charts) powered by sql queries, and I have a dropdown with a period with dates (30,60,90 days). How can I make it so that when I change the date, the new sql query with my filter is automatically read by the graphics? I tried to use ajax to update, but the error.


Re: Update charts when using dropdown item (custom dashboard)

Posted: Thu Jan 19, 2023 10:17 pm
by arbei

You can see Chart.js docs on Updating Charts.


Re: Update charts when using dropdown item (custom dashboard)

Posted: Fri Jan 20, 2023 4:16 am
by Iurywsl

the problem is not with the chart, the problem is getting the new query with the filter after changing the dropdown

//select dashboard medicas avaliacao normal
                $sql = "select avaliacao.data, avaliacao.peso, avaliacao.gordura_corporal, avaliacao.massa_muscular, avaliacao.massa_gorda, avaliacao.bmr_basal, avaliacao.agua_corporal FROM avaliacao WHERE avaliacao.id_usuario=" . CurrentUserId() . " " . $filtro_sql . " order BY avaliacao.data asc";
                $peso_grafico = ExecuteQuery($sql);
                $data = [];
                if ($peso_grafico->rowCount() > 0) { // check condition: if record count is greater than 0
                    while ($row = $peso_grafico->fetch()) { // begin of loop
                        $data[] = $row;
                    } // end of loop
                    // display the result
                } else { // if there are no result
                } // end of check condition
                foreach ($peso_grafico as $row) {
                    $data[] = $row;
                }

I need to run this query. but as I'm doing a javascript event(dropdown), I can't get the new "filter"($filtro_sql) variable in the php code.


Re: Update charts when using dropdown item (custom dashboard)

Posted: Fri Jan 20, 2023 10:56 am
by arbei

Iurywsl wrote:

I tried to use ajax to update

If you use Ajax, you need to Create Your Own API Action, when the dropdown changes, get the new value, pass to your API action, in which you use the server side code you posted above to get the new data and return it as JSON. On the client side your JavaScript receieve the new data and update the chart.


Re: Update charts when using dropdown item (custom dashboard)

Posted: Sat Jan 21, 2023 8:09 am
by Iurywsl

thanks for the tip.
but I've never used api action, I'm doing a test and it's giving an error. 404 (Not Found)

function Api_Action($app)
{
      $app->get('/hello/{name}', function ($request, $response, $args) {
        $name = $args["name"] ?? null; // Get the input value
        if ($name !== null) {
            $response = $response->write("Hello, " . $name); // Write to response
        }
        return $response; 
    });
}

``
<script>
$.get("/Hello/Chai", function (res) {
console.log(res); // Show the result in console
});
</script>


error. 404 (Not Found)

Re: Update charts when using dropdown item (custom dashboard)

Posted: Sat Jan 21, 2023 8:25 am
by Iurywsl

I forgot to include the "api/", now is working. thanks