Beautiful chart maker


#1

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.


[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
#2

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

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


#3

Do we need internet ?


#4

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


#5

this procedure image

should be like this image

else this has no sense…
image


#6

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


#7

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)


#8

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?


#9

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.


#10

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


#11

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


#12

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


#13

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


#14

Your Example is awesome. Thank you!


#15

what do you mean by import frim mobile?


#16

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


#17

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


#18

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


#19

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


#20

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