Converting API data to be displayed on charts

Hi All

Sorry if this is a long post I have tried my hardest to figure this out before asking but I need some help/guidance on how to get API data to display on Charts.

Here is some sample data and fields that i can pull from the API

{
“data”: [
{
“group”: “https://www.*.com/api/v2/groups/328823/",
“state”: “offline”,
},
{
“group”: "https://www.
.com/api/v2/groups/275089/”,
“state”: “offline”,
},

Basically the API reports on a number of devices that are divided into a number of groups and i am hoping to have a 1 bar chart per group reporting on how many devices in that group are online or offline.

I’ve tried a view different ways but get stuck

Way 1.

Created an API date source and then used this as a data source in my chart (asslso tried a serve connect as a source to)

but I get no values when i try and find them

Way 2 , User server Actions to grab the data from the API Every 30 seconds and put it into a database, then use Database Queries to do counts of the state of each device in each Group.

Created a schedule to run my API server action every 30 secs

I have set the server action as so

Did think of using Database Multi Update instead, as the data will be updated every 30 seconds, but just want it working via Database Insert first)

However, the data does not seem to appear in the database

So I’m stuck on getting this working

I know there’s allot to process here and have tried doing it myself, but any help here will be appreciated :slight_smile:

Thanks

Craig

Hi.
I have not read you post completely.
Based on the title, it seems you need some way to convert the API response data in a format that your Chart can understand as input.
We are doing this extensively using the cool RunJS module here 🚀 RunJS 1.3.1.
We don’t have a chart step like you do, be we are manupulating JSON data to be output-ed in a sepcific format on client side using this module.

I HAVE read your post completely.

I’m wondering exactly what your chart is supposed to look like.
Don’t know about you, but when I have something like this to do, I mock up the chart and get it working with data (like in excel) and then I know exactly how the data need to look (when I build those rows) coming from my app.

make sense?
I start with the end product and data, then I know what I have to come up with programmatically to generate the same data.

Because from 2 sample rows that you’ve supplied, I have no idea what you’re aiming for.

Hi All

Sorry, it’s been so long (personal circumstances mean I have been unable to get back to this till now) and Appreciates all the feedback

I feel the way I explained it had not been that great so I will try to explain it again, please bare with me I’m not that much of a great explainer :smiley:

  1. I have an API set up (named: ADevices) to pull data off devices to different locations

Blockquote{
“data”: [
{
“account”: “https://www.cradlepointecm.com/api/v2/accounts/81801/”,
“actual_firmware”: “https://www.cradlepointecm.com/api/v2/firmwares/4547/”,
“asset_id”: “340259880273”,
“config_status”: “suspended”,
“configuration_manager”: “https://www.cradlepointecm.com/api/v2/routers/659252/configuration_manager/”,
“created_at”: “2017-08-14T15:50:56.275460+00:00”,
“custom1”: “Cradlepoint Only Store”,
“custom2”: null,
“description”: “Store ID: 02037”,
“device_type”: “router”,
“full_product_name”: “CBA850”,
“group”: “https://www.cradlepointecm.com/api/v2/groups/231128/”,
“id”: “659252”,
“ipv4_address”: “31.94.0.31”,
“lans”: “https://www.cradlepointecm.com/api/v2/routers/659252/lans/”,
“last_known_location”: null,
“locality”: “US/Mountain”,
“mac”: “00:30:44:28:B4:55”,
“name”: “Cambridge 1”,
“overlay_network_binding”: “https://www.cradlepointecm.com/api/v2/routers/659252/overlay_network_binding/”,
“product”: “https://www.cradlepointecm.com/api/v2/products/27/”,
“reboot_required”: false,
“resource_url”: “https://www.cradlepointecm.com/api/v2/routers/659252/”,
“serial_number”: “MM160481901585”,
"state": “online”,
“state_updated_at”: “2023-01-31T07:56:49.769717+00:00”,
“target_firmware”: “https://www.cradlepointecm.com/api/v2/firmwares/4547/”,
“updated_at”: “2023-01-25T09:15:41.149320+00:00”,
“upgrade_pending”: false
},
{
“account”: “https://www.cradlepointecm.com/api/v2/accounts/81801/”,
“actual_firmware”: “https://www.cradlepointecm.com/api/v2/firmwares/4547/”,
“asset_id”: “07398208862”,
“config_status”: “synched”,
“configuration_manager”: “https://www.cradlepointecm.com/api/v2/routers/1724942/configuration_manager/”,
“created_at”: “2020-02-28T17:08:01.498023+00:00”,
“custom1”: “Cradlepoint Only Store”,
“custom2”: “”,
“description”: “Store ID: 02037”,
“device_type”: “router”,
“full_product_name”: “CBA850”,
“group”: “https://www.cradlepointecm.com/api/v2/groups/231128/”,
“id”: “1724942”,
“ipv4_address”: “213.205.194.59”,
“lans”: “https://www.cradlepointecm.com/api/v2/routers/1724942/lans/”,
“last_known_location”: null,
“locality”: “US/Mountain”,
“mac”: “00:30:44:40:38:EB”,
“name”: “Cambridge 2”,
“overlay_network_binding”: “https://www.cradlepointecm.com/api/v2/routers/1724942/overlay_network_binding/”,
“product”: “https://www.cradlepointecm.com/api/v2/products/27/”,
“reboot_required”: false,
“resource_url”: “https://www.cradlepointecm.com/api/v2/routers/1724942/”,
“serial_number”: “MM190313500598”,
"state": “online”,
“state_updated_at”: “2023-01-28T16:02:50.870686+00:00”,
“target_firmware”: “https://www.cradlepointecm.com/api/v2/firmwares/4547/”,
“updated_at”: “2023-01-25T09:17:47.559311+00:00”,
“upgrade_pending”: false

  1. There are two states a device can be in (Offline and Online) I want to be able to show just the number of devices offline and offline on the API data this is shown by “State” , the Graph should look something like the below (pardon my really bad mock-up :D)

  1. I thought there might be a couple of ways to do this,

By Making a table on the page and then somehow getting the chart to count the states from this

Or by using a Verible like on Help with Chart Group By Count - Wappler General / How To - Wappler Community

my take on this is

However, does not seem to work or maybe I’m using the Chart interface incorrectly

Hope this explains it well

Any help regarding making the chart work i would greatly appreciate

Any help regarding this would be great, if my explanation is confusing please let me know, :slight_smile:

In your server connect, do two Set Values: devices_online, devices_offline

In each Set Value use the where formatter to filter only the devices whose state is online (offline for the 2nd Set Value), and then use the .count() formatter to get the number of such devices

Don’t know exactly how to chart but that should give you an idea

1 Like