I designed a google scripts to produce an object with keys that relate to arrays of data. It looks like this:
{
Global: [
{
x: "2020-01-21T21:00:00.000Z",
y: 330
},
{
x: "2020-01-22T11:00:00.000Z",
y: 555
},
{
x: "2020-01-23T11:00:00.000Z",
y: 654
},
{
x: "2020-01-23T23:00:00.000Z",
y: 881
},
{
x: "2020-01-24T11:00:00.000Z",
y: 941
},
{
x: "2020-01-24T23:00:00.000Z",
y: 1353
},
{
x: "2020-01-25T11:00:00.000Z",
y: 1434
},
{
x: "2020-01-25T21:00:00.000Z",
y: 2014
},
{
x: "2020-01-26T10:00:00.000Z",
y: 2118
},
{
x: "2020-01-26T22:00:00.000Z",
y: 2794
},
{
x: "2020-01-27T08:00:00.000Z",
y: 2886
},
{
x: "2020-01-27T18:00:00.000Z",
y: 2926
},
{
x: "2020-01-27T19:30:00.000Z",
y: 4473
},
{
x: "2020-01-28T12:00:00.000Z",
y: 4690
},
{
x: "2020-01-28T17:00:00.000Z",
y: 5578
},
{
x: "2020-01-28T22:00:00.000Z",
y: 6057
},
{
x: "2020-01-29T12:30:00.000Z",
y: 6165
},
{
x: "2020-01-29T13:30:00.000Z",
y: 6165
},
{
x: "2020-01-29T20:00:00.000Z",
y: 7782
},
{
x: "2020-01-30T10:00:00.000Z",
y: 8234
},
{
x: "2020-01-31T13:00:00.000Z",
y: 9927
},
{
x: "2020-01-31T18:00:00.000Z",
y: 11374
},
{
x: "2020-02-01T09:00:00.000Z",
y: 12024
},
{
x: "2020-02-02T20:00:00.000Z",
y: 17294
},
{
x: "2020-02-03T20:00:00.000Z",
y: 20198
},
{
x: "2020-02-04T08:40:00.000Z",
y: 20589
},
{
x: "2020-02-04T21:00:00.000Z",
y: 24503
},
{
x: "2020-02-05T08:00:00.000Z",
y: 24607
},
{
x: "2020-02-05T22:00:00.000Z",
y: 28274
},
{
x: "2020-02-06T08:00:00.000Z",
y: 28344
},
{
x: "2020-02-06T13:20:00.000Z",
y: 28353
},
{
x: "2020-02-07T19:13:00.000Z",
y: 31532
},
{
x: "2020-02-07T21:50:00.000Z",
y: 34899
},
{
x: "2020-02-08T21:04:00.000Z",
y: 34963
},
{
x: "2020-02-08T22:04:00.000Z",
y: 37549
},
{
x: "",
y: 0
},
{
x: "",
y: 0
},
{ },
{ },
{ },
{ },
{ }
],
China: [
{
x: "2020-01-21T21:00:00.000Z",
y: 325
},
{
x: "2020-01-22T11:00:00.000Z",
y: 547
},
{
x: "2020-01-23T11:00:00.000Z",
y: 639
},
{
x: "2020-01-23T23:00:00.000Z",
y: 865
},
{
x: "2020-01-24T11:00:00.000Z",
y: 916
},
{
x: "2020-01-24T23:00:00.000Z",
y: 1320
},
{
x: "2020-01-25T11:00:00.000Z",
y: 1399
},
{
x: "2020-01-25T21:00:00.000Z",
y: 1979
},
{
x: "2020-01-26T10:00:00.000Z",
y: 2062
},
{
x: "2020-01-26T22:00:00.000Z",
y: 2737
},
{
x: "2020-01-27T08:00:00.000Z",
y: 2825
},
{
x: "2020-01-27T18:00:00.000Z",
y: 2863
},
{
x: "2020-01-27T19:30:00.000Z",
y: 4409
},
{
x: "2020-01-28T12:00:00.000Z",
y: 4610
},
{
x: "2020-01-28T17:00:00.000Z",
y: 5494
},
{
x: "2020-01-28T22:00:00.000Z",
y: 5970
},
{
x: "2020-01-29T12:30:00.000Z",
y: 6070
},
{
x: "2020-01-29T13:30:00.000Z",
y: 6070
},
{
x: "2020-01-29T20:00:00.000Z",
y: 7678
},
{
x: "2020-01-30T10:00:00.000Z",
y: 8124
},
{
x: "2020-01-31T13:00:00.000Z",
y: 9783
},
{
x: "2020-01-31T18:00:00.000Z",
y: 11221
},
{
x: "2020-02-01T09:00:00.000Z",
y: 11860
},
{
x: "2020-02-02T20:00:00.000Z",
y: 17114
},
{
x: "2020-02-03T20:00:00.000Z",
y: 20014
},
{
x: "2020-02-04T08:40:00.000Z",
y: 20400
},
{
x: "2020-02-04T21:00:00.000Z",
y: 24290
},
{
x: "2020-02-05T08:00:00.000Z",
y: 24391
},
{
x: "2020-02-05T22:00:00.000Z",
y: 28017
},
{
x: "2020-02-06T08:00:00.000Z",
y: 28085
},
{
x: "2020-02-06T13:20:00.000Z",
y: 28088
},
{
x: "2020-02-07T19:13:00.000Z",
y: 31215
},
{
x: "2020-02-07T21:50:00.000Z",
y: 34569
},
{
x: "2020-02-08T21:04:00.000Z",
y: 34620
},
{
x: "2020-02-08T22:04:00.000Z",
y: 37198
},
{
x: "",
y: 0
},
{
x: "",
y: 0
},
{ },
{ },
{ },
{ },
{ }
],
Other: [
{
x: "2020-01-21T21:00:00.000Z",
y: 5
},
{
x: "2020-01-22T11:00:00.000Z",
y: 8
},
{
x: "2020-01-23T11:00:00.000Z",
y: 15
},
{
x: "2020-01-23T23:00:00.000Z",
y: 16
},
{
x: "2020-01-24T11:00:00.000Z",
y: 25
},
{
x: "2020-01-24T23:00:00.000Z",
y: 33
},
{
x: "2020-01-25T11:00:00.000Z",
y: 35
},
{
x: "2020-01-25T21:00:00.000Z",
y: 35
},
{
x: "2020-01-26T10:00:00.000Z",
y: 56
},
{
x: "2020-01-26T22:00:00.000Z",
y: 57
},
{
x: "2020-01-27T08:00:00.000Z",
y: 61
},
{
x: "2020-01-27T18:00:00.000Z",
y: 63
},
{
x: "2020-01-27T19:30:00.000Z",
y: 64
},
{
x: "2020-01-28T12:00:00.000Z",
y: 80
},
{
x: "2020-01-28T17:00:00.000Z",
y: 84
},
{
x: "2020-01-28T22:00:00.000Z",
y: 87
},
{
x: "2020-01-29T12:30:00.000Z",
y: 95
},
{
x: "2020-01-29T13:30:00.000Z",
y: 95
},
{
x: "2020-01-29T20:00:00.000Z",
y: 104
},
{
x: "2020-01-30T10:00:00.000Z",
y: 110
},
{
x: "2020-01-31T13:00:00.000Z",
y: 144
},
{
x: "2020-01-31T18:00:00.000Z",
y: 153
},
{
x: "2020-02-01T09:00:00.000Z",
y: 164
},
{
x: "2020-02-02T20:00:00.000Z",
y: 180
},
{
x: "2020-02-03T20:00:00.000Z",
y: 184
},
{
x: "2020-02-04T08:40:00.000Z",
y: 189
},
{
x: "2020-02-04T21:00:00.000Z",
y: 213
},
{
x: "2020-02-05T08:00:00.000Z",
y: 216
},
{
x: "2020-02-05T22:00:00.000Z",
y: 257
},
{
x: "2020-02-06T08:00:00.000Z",
y: 259
},
{
x: "2020-02-06T13:20:00.000Z",
y: 265
},
{
x: "2020-02-07T19:13:00.000Z",
y: 317
},
{
x: "2020-02-07T21:50:00.000Z",
y: 330
},
{
x: "2020-02-08T21:04:00.000Z",
y: 343
},
{
x: "2020-02-08T22:04:00.000Z",
y: 351
},
{
x: "",
y: 0
},
{
x: "",
y: 0
},
{ },
{ },
{ },
{ },
{ }
]
}
Chart JS has no problem accessing the data and plotting a graph when I don't use an object and output only one array (say the Global Data). When I try and put all the data into one object (so I don't have to send multiple variables to my local JS) the graph doesn't appear. Here is what I am working with:
Google Sheets Scripts
function doGet() {
var result = {};
var infected = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('graph').getDataRange().getValues();
result = makeObject(infected);
return ContentService.createTextOutput(JSON.stringify(result)).setMimeType(ContentService.MimeType.JSON);
}
function makeObject(multiArr) {
var obj = {};
var countrystats = {};
var headers = multiArr.shift();
for(var i = 0; i < headers.length; i++){
countrystats[i] = multiArr.map(function(app) {
return app[i];
})}
// for(var m = 0; m < countrystats[1].length; m++){
// obj[countrystats[1][m]] = 0;
// }
//DATA
for(var j = 5; j < headers.length; j++){
obj[j-5] = countrystats[j][113];
}
var China = {};
for(var j = 5; j < headers.length; j++){
China[j-5] = countrystats[j][114];
}
var Other = {};
for(var j = 5; j < headers.length; j++){
Other[j-5] = countrystats[j][115];
}
// //TIME
// for(var j = 5; j < headers.length; j++){
//
// obj[j-5] = countrystats[j][113];
//
// }
var TimeData = [];
for(var i = 0; i < headers.length; i++){
TimeData[i] = {}
}
for(var i = 0; i < headers.length; i++){
TimeData[i] = {
x: headers[i+5],
y: obj[i]
}
}
var TimeDataChina = []
for(var i = 0; i < headers.length; i++){
TimeDataChina[i] = {
x: headers[i+5],
y: China[i]
}
}
var TimeDataOther = []
for(var i = 0; i < headers.length; i++){
TimeDataOther[i] = {
x: headers[i+5],
y: Other[i]
}
}
var TimeDataAll = {};
TimeDataAll['Global'] = TimeData;
TimeDataAll['China'] = TimeDataChina;
TimeDataAll['Other'] = TimeDataOther;
return TimeDataAll;
}
Local JS
var TotalConfirmed;
var TotalDeaths;
var TotalRecovered;
var TimeData = [];
var FinalOutPut = [];
var TimeDataChina = [];
var TimeDataGlobal = [];
var TimeDataOther = [];
var dateArr;
var out3 = {};
var UpdatesFullName = {};
var infected_dataINT = {};
const url4 = "https://script.google.com/macros/s/AKfycbyZhlnhAjULalpihvgKOQUVfPY6yIvBAniq9rz6fg21NHdFkw-j/exec";
// Declare an async function
const getData4 = async () => {
// Use the await keyword to let JS know this variable has some latency so it should wait for it to be filled
// When the variable is fetched, use the .then() callback to carry on
const DataJSON = await fetch(url4).then(response =>
response.json()
)
return await DataJSON
};
console.log(getData4());
getData4().then(result => {
console.log("Update Information");
TimeData = result;
console.log(TimeData);
FinalOutPut = result;
TimeDataGlobal = TimeData['Global'];
TimeDataChina = TimeData['China'];
TimeDataOther = TimeData['Other'];
console.log(TimeDataGlobal);
console.log(TimeDataChina);
console.log(TimeDataOther);
var TodaysDate = moment();
if (TimeData.length){
console.log("Array has values");
console.log(TimeData.length);
// renderChart();
var timeFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
function newDate(days) {
return moment().add(days, 'd').toDate();
}
function newDateString(days) {
return moment().add(days, 'd').format(timeFormat);
}
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Total Infections Over Time',
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
fill: false,
lineTension: 0,
data: TimeDataGlobal,
},
{
label: 'Confirmed - China',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
fill: false,
lineTension: 0,
data: TimeDataChina,
},
{
label: 'Confirmed - Other',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
fill: false,
lineTension: 0,
data: TimeDataOther,
}
]
},
options: {
title: {
text: 'Chart.js Time Scale'
},
scales: {
xAxes: [{
gridLines: {
// display: false ,
color: "#333333"
},
ticks: {
min: '2020-01-21T21:00:00.000Z',
max: TodaysDate,
},
type: 'time',
bounds: 'ticks',
distribution: 'linear',
time: {
unit: 'day',
parser: timeFormat,
// round: 'day'
tooltipFormat: 'll HH:mm',
displayFormats: {
quarter: 'MMM D'
}
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
},
gridLines: {
// display: false ,
color: "#333333"
},
}]
},
},
});
console.log("Chart Updated");
}
})
// .then(result => {
// renderChart();
// })
console.log(FinalOutPut)
Any help figuring out the problem is greatly appreciated. Kind Regards, Camden
