Use result of get function within a javascript - charts

Question

I'm trying to impliment a google chart like the no dependancies one shown here
To get this to work with my data I'm importing the data for the rows like so..
$.get('http://104.12.156.29:8011/java/servlet/UTRICKC5.I00120s', function (data2) {
console.log(data2);});
This pulls what I need... but how can I replace the data.addrows block with what I'm pulling in?
For reference, what I'm getting shown in the console is this;
['Task 1', 'Task 1','Team 1',new Date(2014 , 02, 01), new Date(2014 , 02, 10), null, 50, null],
['Task 2', 'Task 2','Team 2',new Date(2014 , 03, 01), new Date(2014 , 04, 01), null, 1, null]
So I pretty just need to find a way of getting this to "render" as part of my javascript.
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
$.get('http://http://104.12.156.29:8011/java/servlet/UTRICKC5.I00120s', function (data2) {
console.log(data2);});
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

Answer 1

first, recommend formatting the data as json, as found here...
{
"cols": [
{"label": "Task ID", "type": "string"},
{"label": "Task Name", "type": "string"},
{"label": "Resource", "type": "string"},
{"label": "Start Date", "type": "date"},
{"label": "End Date", "type": "date"},
{"label": "Duration", "type": "number"},
{"label": "Percent Complete", "type": "number"},
{"label": "Dependencies", "type": "string"}
],
"rows": [
{"c":[{"v": "Task 1"}, {"v": "Task 1"}, {"v": "Team 1"}, {"v": "Date(2014, 2, 1)"}, {"v": "Date(2014, 2, 10)"}, {"v": null}, {"v": 50}, {"v": null}]},
{"c":[{"v": "Task 2"}, {"v": "Task 2"}, {"v": "Team 2"}, {"v": "Date(2014, 3, 1)"}, {"v": "Date(2014, 4, 1)"}, {"v": null}, {"v": 1}, {"v": null}]}
]
}
this will allow you to create the data table directly, without client-side manipulation.
and it is the fastest way to load the data table.
next, both $.get and $.ajax are asynchronous,
which means you will need to wait until the data is received,
before trying to create the data table and draw the chart.
recommend using $.ajax so you can specify the dataType as json.
see following working snippet,
here, I use the fail promise method so the snippet will work,
you can remove on your server and just keep the done method.
google.charts.load('current', {
packages: ['gantt']
}).then(function () {
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
$.ajax({
url: 'http://104.12.156.29:8011/java/servlet/UTRICKC5.I00120s',
dataType: 'json'
}).done(drawChart).fail(function () {
var chartData = {
"cols": [
{"label": "Task ID", "type": "string"},
{"label": "Task Name", "type": "string"},
{"label": "Resource", "type": "string"},
{"label": "Start Date", "type": "date"},
{"label": "End Date", "type": "date"},
{"label": "Duration", "type": "number"},
{"label": "Percent Complete", "type": "number"},
{"label": "Dependencies", "type": "string"}
],
"rows": [
{"c":[{"v": "Task 1"}, {"v": "Task 1"}, {"v": "Team 1"}, {"v": "Date(2014, 2, 1)"}, {"v": "Date(2014, 2, 10)"}, {"v": null}, {"v": 50}, {"v": null}]},
{"c":[{"v": "Task 2"}, {"v": "Task 2"}, {"v": "Team 2"}, {"v": "Date(2014, 3, 1)"}, {"v": "Date(2014, 4, 1)"}, {"v": null}, {"v": 1}, {"v": null}]}
]
};
drawChart(chartData);
});
function drawChart(chartData) {
var data = new google.visualization.DataTable(chartData);
chart.draw(data, options);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>