New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I wanted to use external JS Google Chart API CDN in SPFx react webpart. Can any please tell me how we can do that. #3298

Closed
rahultrimukhe777 opened this Issue Jan 19, 2019 · 6 comments

Comments

Projects
None yet
3 participants
@rahultrimukhe777
Copy link

rahultrimukhe777 commented Jan 19, 2019

No description provided.

@msft-github-bot

This comment has been minimized.

Copy link
Collaborator

msft-github-bot commented Jan 19, 2019

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

@AJIXuMuK

This comment has been minimized.

Copy link
Contributor

AJIXuMuK commented Jan 20, 2019

Hi @rahultrimukhe777
I think you should you the approach that is described in the documentation

@rahultrimukhe777

This comment has been minimized.

Copy link
Author

rahultrimukhe777 commented Jan 20, 2019

Hi @rahultrimukhe777
I think you should you the approach that is described in the documentation

Thanks for the response, I have checked with this solution. I am able to add jquery as well as Bootstrap cdn and its totally working fine.

But when try to add CDN for google chart its getting loaded but not able to access the functionality.

Please find below code I wanted to use in react SPFx.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]);
    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>
@AJIXuMuK

This comment has been minimized.

Copy link
Contributor

AJIXuMuK commented Jan 20, 2019

@rahultrimukhe777
Here is a sample code.
I'm not using React here but plain JavaScript.
Basically, as per documentation, you need to reference external non-AMD module.
Then you should call

 google.charts.load 
google.charts.setOnLoadCallback

I did that in onInit of the web part.
Then you can actually render the chart.
Please, feel free to reuse the code if needed.

@rahultrimukhe777

This comment has been minimized.

Copy link
Author

rahultrimukhe777 commented Jan 20, 2019

@rahultrimukhe777
Here is a sample code.
I'm not using React here but plain JavaScript.
Basically, as per documentation, you need to reference external non-AMD module.
Then you should call

 google.charts.load 
google.charts.setOnLoadCallback

I did that in onInit of the web part.
Then you can actually render the chart.
Please, feel free to reuse the code if needed.

Thanks alot for taking this much efforts, I really appreciate your help :)

@AJIXuMuK

This comment has been minimized.

Copy link
Contributor

AJIXuMuK commented Jan 20, 2019

My pleasure!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment