Failed to load the script

Forge
1

Hi i am trying to use react-google-charts in my forge app trying to create a simple chart

i am getting the error

useLoadScript.ts:54 Failed to load script: https://www.gstatic.com/charts/loader.js

i have added the permissions as well as i have tried adding the url in backend/fetch

permissions:

scopes:
  - read:jira-work
  - read:jira-user
content:
  scripts:
  - 'unsafe-inline'
  styles:
    - unsafe-inline
2

@Ankitkharola1 hi!
I believe that you need to add permissions like this:

permissions:
  external:
    scripts:
      - 'https://www.example-dev.com/script.js'

You can find more information about Atlassian Forge permissions here:

3

hi @alex_sam Thank you for your response i tried that as well permissions:
external:
scripts:
- ‘myurlloader.js’
- i can see in the console i am getting error CSP violation detected for ‘script-src-elem’ while serving content at http://localhost:8000/
For an app to share data with external resources or use custom CSP, follow the steps in: https://go.atlassian.com/forge-content-security-and-egress-controls

4

You said there was a problem with https://www.gstatic.com/charts/loader.js script but you added ‘myurlloader.js’. I do not quite understand why. if you could create an example of your code and push to github and share the repo link, it would be easier to understand.

5

Sorry for that i think comment was not allowing me to post tow links so i changed it there i am using permissions:
external:
scripts:
- ‘https://www.gstatic.com/charts/loader.js’
scopes:
- read:jira-work
- read:jira-user
content:
scripts:
- ‘unsafe-inline’
styles:
- unsafe-inline

6

https://bitbucket.org/ankitkharola/react-google-charts/src/master/mycharts/src/App.js

7

@Ankitkharola1 if I try to open the link I have a message repository not found.

8

Just want to mention, that there is a chart component planned for Forge UI. It is not released yet, but maybe worth to consider.

Also can highly recommend Vega Lite A High-Level Grammar of Interactive Graphics | Vega-Lite as a Javascript data visualization library, where you can define the layout and functionality of your visualization via config JSON.

9

Hi @alex_sam i apologise for that Bitbucket please can you check if you are able to access this?

10

Hello sir @Holger i was going through the documentation of Vega Lite it has a lot of data visualization charts. i was looking for a library where i could make a Gantt chart like jira timeline i think Vega lite doesnt have a built-in component for that.

11

Yes, Vega lite does not have a default Gantt chart. But a simple Gantt chart example with start and end date you can find here. It is basically a horizontal bar chart with defined start and end value. You can easily add color.

And I didn’t found and example for dependencies between activities, critical path throughout activities and expand/collapse of sub-activities. Would be some more complex code to create in Vega Lite and I didn’t found an example.

12

Thank you sir @Holger