Bubble chart from Json

Hello there,
I have an API (suppose called MyApi) response in Json format like
the following example.
To draw the “Ex” chart for example,
what should i specify in the design of the chart
in my Bubble app, for:

  • Type of data
  • Data source (i suppose the returned Json from API)
  • Value expression (which are 1800, 1700, … in the example)
  • Label expression (which are “0”, “1”,…in the example) ?

Here’s an example of the returned Jason from API:
{
“In”: {
“0”: 2000,
“1”: 2010,
“2”: 2030,
“3”: 2050,
“4”: 1900,
“5”: 2200,
“6”: 2200,
“7”: 2100,
“8”: 2400,
“9”: 2430,
“10”: 2050,
“11”: 2600,
“12”: 2800,
“13”: 2500,
“14”: 2200,
“15”: 2300,
“16”: 2100,
“17”: 2600,
“18”: 3000,
“19”: 2700
},
“Ex”: {
“0”: 1800,
“1”: 1700,
“2”: 2200,
“3”: 2300,
“4”: 1600,
“5”: 800,
“6”: 1100,
“7”: 1500,
“8”: 1340,
“9”: 1220,
“10”: 1950,
“11”: 3200,
“12”: 1670,
“13”: 1220,
“14”: 1450,
“15”: 2040,
“16”: 3000,
“17”: 1600,
“18”: 1390,
“19”: 1770
},
“Cf”: {
“0”: 500,
“1”: 450,
“2”: 200,
“3”: 790,
“4”: 320,
“5”: 470,
“6”: 780,
“7”: 1000,
“8”: 900,
“9”: 340,
“10”: 210,
“11”: 330,
“12”: 370,
“13”: 210,
“14”: 660,
“15”: 780,
“16”: 130,
“17”: 320,
“18”: 900,
“19”: 380
}
}

Hey @bassam :wave:

Thanks for the post and good question!

If I’m understanding correctly, this JSON might make it difficult to chart this well. The reason for that is because these are stored almost like fields for the item. So picture an item called In that has a 0 field, 1 field, 2 field on and on. What the chart elements typically need is for all fields to actually be in the same place so it can reference a ‘field’ and it’s value.

Is it possible for the API to format their data differently? For instance, if the ‘In’ item could have an array of values with fields: Key and value, I think you’d be able to interact with this data much better.

It’s possible I’m misunderstanding the question though, feel free to reach out to us directly at Support@Bubble.io and we’d be happy to help get you pointed in the right direction.

Hi @bassam, as @Andrew.Vernon said, the data should come as arrays in the json in order to graph them, otherwise you won’t be able to do so.

Th JSON should look something like this (taking the last 5 values of each of your example):
{
“Label”:[15,16,17,18,19],
“In”: [2300,2100,2600,3000,2700],
“Ex”: [2040,3000,1600,1390,1770],
“Cf”: [780,130,320,900, 380],
}

If you aren’t able to format the json in the source, you might want to try and do it through Integromat as a “pre-processor” using their parse JSON and then send it to bubble. I haven’t done this before but it might work.

This topic was automatically closed after 70 days. New replies are no longer allowed.