AmCharts to display Data Provider information - (Custom Javascript in Embed Component) #12143
SufiSR
started this conversation in
Show and tell
Replies: 1 comment
-
Nice work @SufiSR and a fantastic write up! |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Disclaimer
I am a user of Budibase, not a maintainer.
This article follows the discussion #6839
The challenge
We are using Budibase internally not only for forms and workflows but also to gather information from multiple sources and produce and display statistics and KPIs. While Budibase provides some Charts most of them are rather "static" and we have run into various challenges with them (e.g. no second X Axis). We have used AmCharts in the past as it has a vast catalogue of charts as well as very flexible displaying options.
The Solution
Based on the other article it is possible to inject javascript code using the example:
I do understand that this is not too pretty but it does solve my problem (as I am personally not able to create my own components (too much knowledge missing - I am not a developer after all). Plus, I believe that a charting library like AmCharts or HighCharts as a component would be a lot of work.
Injecting the external scripts
AmCharts expects it's own scripts to be in the DOM. I failed with various approaches injecting the scripts. They would show, but they wouldn't be properly loaded (or not loaded on time). Eventually, I managed to properly load the scripts with this code. Please note that you need to make sure to work with a specific set of quotation marks.
Next step was to add the generic code for charts that is used by AMCharts for the configuration as found in their documentation
Grabbing the data from a Data Provider
I did not manage to get the data from the data provider directly into the script (neither the $-Javascript style would work nor the {{ Data Provider.Rows }} style.
Therefore, I decided to use another embed (also better for using it with other data) where I would run the transformations and then just add it as non-displayed text within a new div in the DOM:
I used the Budibase Sample Database Jobs Table for this example:
This then allows me to retrieve the data in my injection script:
And here is the result:
![image](https://private-user-images.githubusercontent.com/83453553/277099640-c420a1b3-297c-41c6-86d3-9fc56adb1851.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA5MjUxNTQsIm5iZiI6MTcyMDkyNDg1NCwicGF0aCI6Ii84MzQ1MzU1My8yNzcwOTk2NDAtYzQyMGExYjMtMjk3Yy00MWM2LTg2ZDMtOWZjNTZhZGIxODUxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE0VDAyNDA1NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYzZGM5YjdlMjI1NjI0MzAwNTUyOGU0MGVmOTkzYTljOTMwNGRiMWE3NDgxZDFmNTA4M2RlNDdjNmUyY2Q2ZjEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.geKBFFg-98QxoGpWPTVvQuWFGhDWBoqtqhctDGWSJVk)
Full Code for Injection (Second Embed)
Beta Was this translation helpful? Give feedback.
All reactions