I am struggling to successfully load a responsive Google Line Chart after an Ajax call. I have attempted to place the entire Google Chart code within the success part of the Ajax call, but it does not seem to work as expected. Below is my current Ajax code:
$( window ).on( "load", function() {
$.ajax({
url: url,
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
},
type: "POST",
data: {
'annual_capital_growth':annual_capital_growth,
'property': property,
'forcast_period': forcast_period,
},
context: this,
success:function(data) {
console.log(data.graphArray); /*This is where I inserted Google Charts Code*/
},
error: function(errorThrown){
console.log(errorThrown);
}
});
});
Here is the Google Chart Code that I am trying to incorporate:
Please note that my code is designed to be responsive and includes additional functions for window resizing.
google.load('visualization', '1', {
packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Years');
data.addColumn('number', 'Property Name');
data.addColumn('number', 'Compute Times');
data.addColumn('number', 'Compute Times2'); /*This is where I want to insert Ajax Data*/
console.log("--");
data.addRows([
['2018', 200000, 210000, 220000],
['2019', 210000, 220000, 220000],
['2020', 220000, 250000, 220000], /*This is where I want to insert Ajax Data*/
]);
console.log(data);
var options = {
height: 350,
legend: {
position: 'bottom'
},
hAxis: {
title: 'Years'
},
vAxis: {
title: 'Property Value'
},
backgroundColor: '#f1f8e9'
};
function resize() {
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize();
window.onresize = resize;
}