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 (http://www.chartjs.org ) and webviewer ,and now we can make 8 kinds chart :slight_smile:
bar, horizontalBar, stackedBar, line, doughnut, pie, radar, polarArea.
2018-03-21_104004
2018-03-21_104017
and the video:
https://youtu.be/rsCqcYTLxrs
And thanks to Taifun’s TaifunTool extension.

26 Likes

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

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

2 Likes

Do we need internet ?

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

2 Likes

this procedure image

should be like this image

else this has no sense…
image

3 Likes

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)

1 Like

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.

1 Like

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:

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

)

TIM截图20180328104931

2.open your app, copy the above 3 procedure to your app from backpack;

3.upload the 2 files(chart.html, chart.min.js) to assets:chart.zip (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

4 Likes

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

2 Likes

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: