Beautiful chart maker


Hi there.
Today I want to share with you how to make beautiful chart.
the aia :Chartjs2.aia (74.2 KB)
I used the open source chartjs ( ) and webviewer ,and now we can make 8 kinds chart :slight_smile:
bar, horizontalBar, stackedBar, line, doughnut, pie, radar, polarArea.
and the video:
And thanks to Taifun’s TaifunTool extension.

[FREE] Extension ComponentToImage
How to store any data on tinydb daily and retrieve theme as weekdays data on a bar-graph?
Accounts manager (A personal finances app)
Web viewer screenshot taking share
Store data of whole month and show as graph

Can you add some different screenshots? They all look the same now.

Edit: Oh wait i have to click on them. :sunglasses::grin:


Do we need internet ?


no sir,we don’t need internet. I upload the .html file and .js file to asset.


this procedure image

should be like this image

else this has no sense…


Sorry, I made a mistake. I will modify this asap since I am away from the computor.


There is no need to, I am attaching a slightly modified version of your aia with this corrected as well… :wink:
Chartjs2(1).aia (74.3 KB)


For anyone that has not noticed not all charts display all series of data. Pie, doughnut & polar charts show the data for income only. All the rest display all 3 series (income, outcome, balance).

Also from my understanding there is the possibility to have mixed type of charts (i.e. column & line) but this needs reading time that I don’t have now. Anyone else interested to see this through?


yes, for doughnut, pie and polar,the javascript in the html only accept the first data serial , even you give it more.
any way, you can modify the javascript in the .html file to accept 2 or more, even can show mixed type chart.
any one is welcomed to change it as you wish, since here is open-sourced.


that is my intention my friend when I find some time. :wink:


brother how to use chart2.aia with pretty picture chart like that


USAGE: this aia file Chartjs3.aia (82.8 KB), copy procedure “ShowChart”, “MakeWebString”,“Join” to backpack;


TIM截图20180328104931 your app, copy the above 3 procedure to your app from backpack;

3.upload the 2 files(chart.html, chart.min.js) to (47.8 KB) (remember to unzip this file before uploading )

  1. upload TaifunTool, and add it to design

  2. organize your data like this:

  3. done


Brother kevinkun ,whether it can directly import from mobile or have to use computer


Your Example is awesome. Thank you!


what do you mean by import frim mobile?


I mean, can i use with mobile phone to import chartjs3.aia file because i want to try using it with mobile phone, usually i use with computer


I think the queation is, can you use thunkable with mobile phone ? if yes, then yes to your question.


Thank you so much
I took your application again. This time I used a csv file to project the data


I need to show dynamic Firebase data at the graph, how i can do this?


after got data from firebase,orgnize the data like this: