Inspiration

I have many times encountered situations when I needed to share data from my Airtable base with customers. Sharing views is great but data is consumed much better when visualized.

Many times I have ended up using screenshots of Chart block and placing this on presentation. The dream was to be able to convert some of that chart data into a dashboard or at least a link/image that I can easily share.

What it does

The Aircharts block takes data from a view. It allows selecting the name column for the x-axis and up to 3 series of values. This interface is actually for me a more intuitive way of selecting data and gives me full control over axis labels and values. Ability to select a view also allows me to filter and sort data inside of the view, exactly the way I need for the chart.

Once the data is selected the block generates an image using quickchart.io and user can either copy link to the chart or save the image/link to Airtable.

How I built it

This is the first time I have touched anything React and probably 4th time using JavaScript (first 3 times was actually inside of Airtable's Scripting Block), so actually very slowly and with lots of research. I have started out with the simple chart example and modified it using ideas from other custom blocks examples.

Challenges I ran into

Not knowing React... Getting the data in and out to GlobalConfig was a bit problematic, also building layout in the boxes and making it look the correct way was time-consuming.

Accomplishments that I'm proud of

Being able to ship complete, functional block that does something useful. 2 weeks ago I had no clue if this is even going to be possible.

What I learned

A lot of React concepts and also that there is much more to discover to fully use all capabilities.

What's next for Aircharts

It would be great to be able to convert it long term into a dashboard, that companies could share with their clients. This dashboard could contain data from multiple views, different charts and dial as well as be auto - updated in regular intervals

Built With

Share this project:

Updates