Adding query results to Apache echarts visualization (to the JSONcode)

The above-attached picture is of a visualization from the Apache echarts library. The code on their site had hard-coded values for the ‘data’ attribute.
However, I am required to add the value obtained from my PostgreSQL query result in place of the hard-coded ‘data’ value.
I am not able to figure out the correct way to do it.

I used the query inspector to get the response code and then extracted the value returned by my query ‘C’ into the variable ‘queryCResult’. However, that still gives a fixed value.
(For ex in my case it is as follows:

I read in chatgpt’s suggestion that this can be done via an API. That i can retrieve my panel JSON data and then extract the value of my query result and finally add it to my echart visualization code.
I would be immensely grateful for advice or guidance on this!!

Actually, I had also tried the geomap visualization from Apache echarts before and even then, I had the same doubt as I was not able to understand how to get my query results to display on the echarts visualization.

@saymeowmeow It’s described in the documentation and YouTube videos

YouTube Playlist

There is also examples on: