cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper II
Helper II

Issue in Referring external Javscript files- PowerApps component Framework

 

Hi Team,

 

I am trying to configure Google Org chart for one of my requirement. https://developers.google.com/chart/interactive/docs/gallery/orgchart. Here while I am trying to refer the js file mentioned in the index.ts I am unable to get below error in screenshot. Could you please help on how to resolve this issue?

Tried to add a local copy of reference https://www.gstatic.com/charts/loader.js to a specific folder to  a folder still the issue didn't resolve.

Error : unable to get the reference of "google"

Any help will be really appreciated.

@HemantG  sir Could you please help me with this?

 

 

Capture.PNG

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Solution Sage
Solution Sage

Re: Issue in Referring external Javscript files- PowerApps component Framework

Hi @SarathMohan ,

 

There is a couple of things that are incorrect:

  • You don't need to call GoogleCharts.charts.load. Instead, use GoogleCharts.load. 
  • Function drawChart better to define outside init function.
  • Use GoogleCharts.api.visualization instead of GoogleCharts.visualization.
  • When you create a chart you need to reference proper container for it. In your code, you are trying to get the element with id "div", but it doesn't exist. Better to create a separate variable for it and reference it.
  • You don't need to append created chart to a container. Everything will be handled by the library.

 

Attached to this message you can find index.ts file with working code.

 

Hope this will help.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

View solution in original post

7 REPLIES 7
Highlighted
Solution Sage
Solution Sage

Re: Issue in Referring external Javscript files- PowerApps component Framework

Hi @SarathMohan ,

 

You need to install google-charts library using npm (you can find more about using it here)

npm i -D google-charts

Then you need to import it using the next line of code:

 

 

//@ts-ignore
import { GoogleCharts } from 'google-charts';

 

 

 You might notice that I am using ts-ignore flag - this is because google-charts doesn't have full type definition (there is a type definition for google.visualization, but I wasn't able to make it work).

After that, you can use GoogleCharts as a global variable: 

 

 

GoogleCharts.load('current', {packages: ['orgchart']});

 

 

One thing that I need to point out is when you will use visualizations you will need to use the next code:

 

 

GoogleCharts.api.visualization

 

instead:

google.visualization

 

Hope this will help.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.
Highlighted
Helper II
Helper II

Re: Issue in Referring external Javscript files- PowerApps component Framework

Thank you much for the help, however I am unable to load the component during start.

Could you please guide me on what I am missing? I may be wrong in initializing etc. Kindly help.

Attached the screenshot 1: Capture of the code I have written.

Attached the screenshot of error: Error loading control in the browser harness. error attached.

 

 

 

TIA

Regards,

Sarath Mohan

Highlighted
Solution Sage
Solution Sage

Re: Issue in Referring external Javscript files- PowerApps component Framework

Hi @SarathMohan ,

 

There is a couple of things that are incorrect:

  • You don't need to call GoogleCharts.charts.load. Instead, use GoogleCharts.load. 
  • Function drawChart better to define outside init function.
  • Use GoogleCharts.api.visualization instead of GoogleCharts.visualization.
  • When you create a chart you need to reference proper container for it. In your code, you are trying to get the element with id "div", but it doesn't exist. Better to create a separate variable for it and reference it.
  • You don't need to append created chart to a container. Everything will be handled by the library.

 

Attached to this message you can find index.ts file with working code.

 

Hope this will help.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

View solution in original post

Highlighted
Helper II
Helper II

Re: Issue in Referring external Javscript files- PowerApps component Framework

Thank you so much it has really helped. Could you please help me on how to open a form when I click on a node and update the data on the chart. Also how to retrieve the data from Common data service and show it in the Chart.

Any pointers on this will be really helpful.

 

Regards,

Sarath Mohan

Highlighted
Solution Sage
Solution Sage

Re: Issue in Referring external Javscript files- PowerApps component Framework

Hi @SarathMohan ,

 

Please read this doc on how to work with events in google charts. When you click on a node select event is firing, so you need to register some function to act on it (see example below). 

GoogleCharts.api.visualization.events.addListener(chart, 'select', handleSelect);

To receive selected data you can use getSelection method of the library (check docs). Please note that this method will return a row of data so you will need to process it.

 

Regarding getting data from CDS and open a form - I noticed that you already received reply in this ticket: https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/Help-required-for-referring-Entities-in-C...

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.
Highlighted
Helper II
Helper II

Re: Issue in Referring external Javscript files- PowerApps component Framework

Thanks you..

One more query on this on how to open a model window and populate the data inside that and once submitted I need to update the particular node. It might be very basic I am trying to work out a scenario on this part. As per the attached requirement

 

Could you please share some thoughts on this?

 

Regards,

Sarath Mohan

Highlighted
Impactful Individual
Impactful Individual

Re: Issue in Referring external Javscript files- PowerApps component Framework

Don't you have a separate question regarding that issue open.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Users online (11,054)