I am trying to use a Google Charting library which is hosted by Google.
Component
<aura:component implements="flexipage:availableForAllPageTypes">
<ltng:require scripts="{!$Resource.google_gantt_chart}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
<div aura:id="chart"></div>
</aura:component>
Resource google_gantt_chart
as been added to static resources. But it still trys to load the latest library from Google.
JavaScript Controller
({
afterScriptsLoaded: function (cmp, event, helper) {
google.charts.load('current', { 'packages': ['gantt'] });
google.charts.setOnLoadCallback(drawChart);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(cmp.find('chart'));
chart.draw(data, options);
}
})
But I am getting this error:
Access to XMLHttpRequest at
'https://www.gstatic.com/charts/46.2/loader.js' from origin
'https://example--sandbox.lightning.force.com' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header is present on
the requested resource.
I have set up CORS, Content Security Policy Trusted Sites and Remote Site Settings for the domain https://www.gstatic.com
yet I still get the error.
What can I do to fix this?