Issue rendering data from a Notion DB on Table and Chart components

[Carlos_Hidalgo]

Hello Retool Community,

So, I've been trying to link up a Notion database with Retool. Managed to set up the Notion HQ resource and even pull data with a query. But I can't seem to get that data into a Retool table.

{
  "object":"database",
  "id":"5324e0d4-ca28-4c63-9e3d-d603b0fedbb0",
  "cover":null,
  "icon":null,
 "created_time": "2024-03-19T09:37:00.000Z",
 "created_by": {
   "object": "user",
    "id":"37013b6c-5ce6-4043-8a98-e0729a0582ed"
  },
 "last_edited_by": {
   "object": "user",
    "id":"854bb358-280f-45e4-849c-bfa1062b7b6b"
  },
 "last_edited_time": "2024-04-23T11:55:00.000Z",
  "title": [
    {
     "type": "text",
     "text": {
       "content": "Perfiles de usuario - BBDD",
       "link": null
      },
     "annotations": {
       "bold": false,
       "italic": false,
       "strikethrough": false,
       "underline": false,
       "code": false,
       "color": "default"
      },
     "plain_text": "Perfiles de usuario - BBDD",
     "href": null
    }
  ],
 "description": [],
 "is_inline": true,
 "properties": {
    "Edad":{
      "id":"CdIx",
     "name": "Edad",
     "type": "select",
     "select": {
       "options": [
          {
           "id": "bpL_",
           "name": "Adultos mayores",
           "color": "brown",
           "description": null
          },
          {
           "id": "C<xs",
           "name": "Adultos jóvenes",
           "color": "pink",
           "description": null
          },
          {
           "id": "G\\MG",
           "name": "Mix de edades",
           "color": "green",
           "description": null
          },
          {
           "id": "_KY}",
           "name": "Sin info",
           "color": "default",
           "description": null
          }
        ]
      }
    },
    "Perfil LitC:Edad ": {
      "id":"E%7DbG",
     "name": "Perfil LitC: Edad ",
     "type": "formula",
     "formula": {
       "expression":"if({{notion:block_property:CdIx:00000000-0000-0000-0000-000000000000:535446f0-9224-47f9-adcc-715d5ca1679a}}== \"Adultos jóvenes\", \"Persona joven: Libertad\",if({{notion:block_property:CdIx:00000000-0000-0000-0000-000000000000:535446f0-9224-47f9-adcc-715d5ca1679a}}== \"Adultos mayores\", \"Persona mayor:Agobio\",\"-\"))"
      }
    },
    ...
 (The rest of theNotion database response)
    ...
  }

If anyone has experience with integrating Notion databases with Retool or has encountered a similar issue, I would greatly appreciate your help. Specifically, I'm looking for suggestions on how to properly format the response from Notion so that it can be displayed in a Retool table.

[Paulo]

Hi @Carlos_Hidalgo, I would like to confirm the following:

• Are there any issues connecting to the resource?
• Is the object you shared the output of a query within Retool and you would like to display on a table?
  These details would help us confirm the next steps in order to achieve what you would like to build with Retool.

[Carlos_Hidalgo]

Hi! In the end, I managed to do it with a POST call instead of GET, and I was able to pass that data to a table. Now my question is how could I pass one of those data fields to, for example, a chart. Like, to know the percentage of "Nationality."

[Paulo]

Follow this doc:

Visualize data with the Chart component | Retool Docs

Note: We may need to format our data in order to render it on the Chart component.

I recommend going over the Plotly JS docs for the chart of your preference as well:

Basic

Chat GPT is very helpful with Plotly, just paste the JSON objects you have for Data source & Layout, and give it specific directions on what is that you intend to change:

[Carlos_Hidalgo]

Hello! I think I managed to create the chart, but I want it to pick up the values from the table. To do this, I created a JavaScript query to fetch the data from the Notion query.

Now it seems like it's not picking up those values because the percentage for each one is the same. Am I doing something wrong?

I use this on Data: [
{
"labels": ["España ", "Europa ", "Latinoamerica ", "Americana ", "Sin info", "Asia "],
"values": {{query4.data.values}},
"type": "pie"
}
]

[Paulo]

There is an interesting key that labels and values are nested into:

For testing purposes, can you set the data of your Plotly object to:

[{
"labels": {{query4.data.labels}}
"values": {{query4.data.values}},
"type": "pie"
}]

If we lose the labels doing so, share a screenshot of the state of that query by opening it on the State tab.