Plot live data via airtable on graph

Hi All,

I want to plot a graph via airtable data.

X axis = Appliance Name like AC, oven, Iron box and so on…
Y1 Value = Watt
Y2 value = KWH

Y1 and Y2 value is working fine but when it comes to appliance name its not taking data from Airtable as I get a error message as Ac is not defined.

Your input is highly appreciable.

Sharing the Airtable view

Also sharing the project link
Thunkable

Regards,
Sasi Preetha

Can you show the entire quickchart url you are producing here?

https://quickchart.io/chart?c={type:‘bar’,data:{labels:[
app variable applist
], datasets:[{label:‘Watt’,data:[
app variable watty
],fill:false,borderColor:‘blue’},{label:‘KWH’,data:[
app variable kwhy
],fill:false,borderColor:‘green’}]}}

Here it is Jared.

Regards,
Sasi Preetha

You’ve included variable blocks in the url so @jared isn’t going to be able to access the quickchart. Can you post a full url that includes sample values for those two variable blocks?

You should be able to copy and paste the url into a browser and view the chart. But if I do that with what you posted, it displays an error because of the missing data.

2 Likes

chart (1000×600) (quickchart.io)

Sharing the information tatiang.

so , what I am expecting is the X axis from the airtable live data. Y1 and Y2 also from airtable live data too.

Kindly assist.

for purposes of debugging, please add a temporary input text field in screen1graph, then in the block when_screen1graph_opens, instead of setting the URL, set the input text field to the full join block.
then run preview and cut-n-paste the full contents of the input text field into this thread. it will give us an idea if your url string is valid or not.

1 Like

Ok .

Here is the url string https://quickchart.io/chart?c={type:‘bar’,data:{labels:[‘ac’,‘microwave’,‘cooler’,‘heater’,‘iron’], datasets:[{label:‘Watt’,data:,fill:false,borderColor:‘blue’},{label:‘KWH’,data:,fill:false,borderColor:‘green’}]}}

Here data fields are empty where I have pulled data from airtable(via variable) thus its empty.

You can see that you are plotting no data. Try populating app variable watty with the list of values for watty (eg. 3,4,5,6,7) and do the same for kwhr. Preview again but cut n paste the url to the BROWSER.

Does this setup work in quickchart.io when you use their sandbox builder?

here’s the chart i get
image

after using this url string (with hardcoded data values)

https://quickchart.io/chart?c={type:‘bar’,data:{labels:[‘ac’,‘microwave’,‘cooler’,‘heater’,‘iron’], datasets:[{label:‘Watt’,data:[3,4,5,6,7],fill:false,borderColor:‘blue’},{label:‘KWH’,data:[2,2,5,5,3],fill:false,borderColor:‘green’}]}}

IMPORTANT NOTE:
when pasting code segments or cut-n-pasted strings to this forum, make sure you highlight it as preformatted text to retain the original coding. if not, a pair of apostrophes become a back tick and forward tick symbols! for example the code above becomes:

https://quickchart.io/chart?c={type:‘bar’,data:{labels:[‘ac’,‘microwave’,‘cooler’,‘heater’,‘iron’], datasets:[{label:‘Watt’,data:[3,4,5,6,7],fill:false,borderColor:‘blue’},{label:‘KWH’,data:[2,2,5,5,3],fill:false,borderColor:‘green’}]}}

if you cut-n-paste the string above to the browser, it results in invalid token error, but if you cut-n-paste the preformatted string to the browser, it works - you get a chart!

OTHER OBSERVATIONS
in this example, you are trying to compare apples and oranges - watt is a measure of rate, while KWH is a measure of amount of work, and they’re two different things - ie. the units are different. you were lucky the amounts for both dimensions were in the same ballpark. you can use a combo chart - bar chart for watt, line chart for KWH but this method assumes both dimensions are in the same unit, they use the same y-axis. in the end you might have to use 2 charts, labelled appropriately…

5 Likes

Thank you so much for your detailed explanation:)

You are completely correct interms of Watt and KWH as both are two different things. I am trying with random value and name.

The actual output should be Energy consumed(y1) vs Energy cost(y2) for each appliance, so Watt and KWH will be replaced with Energy Consumed and Energy Cost per day for an appliance.

I am able to get the chart if I put the value directly.

But what I am expecting is I want the data from Airtable and that should fit Y1 & Y2 … also the appliance(x axis) name should be automatically populated from Airtable which did not happen. Is that possible?

Your valuable input and guidance is much appreciated.

PS: I make sure I use preformatted text option

Regards,
Sasi Preetha

Yes, It is Jared

Adding to my previous reply… I put label to see whether it takes data from Airtable and found it is reading data but when it comes to plotting error, I get an error as “Chart Error:ReferenceError:AC is not defined” where AC is the appliance name of my first entry in the airtable.

When do we get such error?

1 Like

Your problem is with the way you are passing data to the chart.

The chart expect data in the form of series of numbers separated by commas but not getting that from you.

Can you add a label to your screen and show your variables in the label and copy the image here to see what format are you passing to the chart?

can you send us a picture of what your airtable looks like. does it look like this?
image
or this
image


Here is the snapshot of my airtable.


Screenshot which gets data from Airtable and reflects on the labels.

Sharing my blocks too


when you’re building app variable applist, make sure you enclose each value in single quotes.
right now the resulting list is AC,Iron,Clothes, etc. you want it as ‘AC’,‘Iron’,‘Clothes’, etc
then simply plug the variable names in the correct place in the join block for building the url string

1 Like

Yes, this is the problem I noticed from the code.