Hi,
I'm trying to implement the calendar chart from the google chart library https://developers.google.com/chart/interactive/docs/gallery/calendar
However, when I try to implement it, I seem to get an error 'Cannot read property 'DataTable' of undefined'
After carefully debugging, I have found out that the library itself DOES load as I can use certain google code however, it is missing a file called 'library-preload.js' when calling the chart function.
'failed to load 'lib/googleChart/library-preload' (failed to load 'lib/googleChart/library-preload.js' from /webapp/lib/googleChart/library-preload.js:' I have tried multiple ways of implementing the library just in case this was the problem such as implementing the library via HTML and into the manifest.json file, however, I still get the same error.
Many thanks.
Attached as listed;
- code where the library is loaded.
- Init
- the function called to load the chart (line 3 is where i get the error - 'Cannot read property 'DataTable' of undefined')
- Screenshot of Library directory
- Screenshot of the error in debugger
sap.ui.getCore().loadLibrary("lib.googleChart", "/webapp/lib/googleChart/");
onInit: function () { google.charts.load("current", {packages:["calendar"]}); google.charts.setOnLoadCallback(this.drawChart()); },
drawChart: function() { debugger; var dataTable = new google.visualization.DataTable(); //... dataTable.addColumn({ type: 'date', id: 'Date' }); dataTable.addColumn({ type: 'number', id: 'Won/Loss' }); dataTable.addRows([ [ new Date(2012, 3, 13), 37032 ], [ new Date(2012, 3, 14), 38024 ], [ new Date(2012, 3, 15), 38024 ], [ new Date(2012, 3, 16), 38108 ], [ new Date(2012, 3, 17), 38229 ], // Many rows omitted for brevity. [ new Date(2013, 9, 4), 38177 ], [ new Date(2013, 9, 5), 38705 ], [ new Date(2013, 9, 12), 38210 ], [ new Date(2013, 9, 13), 38029 ], [ new Date(2013, 9, 19), 38823 ], [ new Date(2013, 9, 23), 38345 ], [ new Date(2013, 9, 24), 38436 ], [ new Date(2013, 9, 30), 38447 ] ]); var calender = this.getView().byId("calenderChart"); //var chart = new google.visualization.Calendar(calender); var options = { title: "Red Sox Attendance", height: 350, }; chart.draw(dataTable, options); },