Recently, I came across an issue where I received a console error stating:
Cannot read property 'getChartLayoutInterface' of undefined
After researching similar questions, it seems that the error is due to the Google Visualization API not loading. Below is the code I am using:
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "assets/main/getFrontData.php",
dataType: "json",
async: false,
type: 'post',
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
backgroundColor: 'none',
lineWidth: 4,
areaOpacity: .2,
legend: { position: 'none' },
colors: ['#007cb0'],
width: 550,
height: 300
}
// Create our data table out of JSON data loaded from server.
var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox();
$('#backgroundChart').css('background-position', boundingBox.left + "px " + boundingBox.top + "px").css('background-size', boundingBox.width + "px " + boundingBox.height + "px");
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
The goal is to add a background image in the graph of the same size. Any assistance on why this error is occurring would be greatly appreciated.