CODEWITHSUNDEEP
javascriptarraysobjectgoogle-apps-scriptchart.js
CWrecker
CWrecker

Reputation: 509

Chart JS can't access data from array within an object

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

Upvotes: 1

Views: 247

Answers (1)

CWrecker
CWrecker

Reputation: 509

The problem was I mixed data types. I set timedata as an array in my local JS files, while it was being outputed as an object in my google scripts.

Upvotes: 1

Related Questions