Create elegant Waffle Charts in AppSheet

AppSheet Tips & Tricks
, ,
1

The word waffle instantly reminds us of the popular sweet or dessert we enjoy for a breakfast.:slightly_smiling_face:

But the name Waffle is also used to denote a type of chart. We can search the internet to know more about these type of charts. Simply search by the term “Waffle charts”

In AppSheet we can enhance the user experience by making use of some additional SVG code to present a data analysis in a visually appealing manner to the app users in the form of waffle charts. The sample app shared below demonstrates waffle charts I created using some SVG code.

In the sample app, please tap on the action on the left to simultaneously change the percentages on each of the individual waffle chart.

Here is a GIF from the app demonstrating the changes in chart values with action.

Waffle Charts GIF

The sample app is available at

Please tap on the dashboard view as highlighted in red in the screenshot below to user test it.

image
image1918×842 69.9 KB

Hope the sample app gives some food for thought in the form of waffles (charts) :slightly_smiling_face:

15 Likes
2

You are a treasure, @Suvrutt_Gurjar!

8 Likes
3

Thank you very much @steve for your kind words. Any appreciation from you is special.

I am humbly aware that there are many platform experts such as you in the community who are very knowledgeable. You and they all always inspire us with your so excellent contributions.

7 Likes
4

Elegant indeed! :heart_eyes:

Nice one @Suvrutt_Gurjar! It’s always amazed me how powerful SVGs are, and how little they’re used - hopefully this opens up the doors to more people!

5 Likes
5

Thank you very much Matt. You are spot on about the potential of SVGs.

2 Likes