I want to Load a Google Line Chart(Responsive) after the Ajax Success. I tried to put whole Google Chart code inside Success part of Ajax call but nothing works. Here is my code for Ajax:
$( 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);
}
});
});
Now my Google Chart Code is this :
Please note, my code is a responsive code which has some extra functions in the bottom 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;
}
first, you're using an old version of google charts.
jsapi
should no longer be used, see update library loader code .
need to use the following library instead...
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load
statement.
and speaking of the load
statement,
it will wait for the page to load by default,
so you can use it in place of...
$( window ).on( "load"...
and $(document).ready
, etc...
recommend setup similar to following...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var options = {
height: 350,
legend: {
position: 'bottom'
},
hAxis: {
title: 'Years'
},
vAxis: {
title: 'Property Value'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
$.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
}).done(function (response, status, jqXHR) {
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');
data.addRows(response.graphArray);
function resize() {
chart.draw(data, options);
}
resize();
$(window).resize(resize);
}).fail(function (jqXHR, status, errorThrown) {
console.log(errorThrown);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.