Extract date and time from dynamodb timestamp data in javascript for scatter plot

Question

This is my date-time format "2018.01.16 14:35:40". I am getting this data from the dynamodb database as a string. Now, I need to extract the date and time as a number in 2 different variables to draw a scatter plot using javascript. To do so, I need to format this format to Date(2018,01,16) and Date(2018,01,16,14,35) format. First one is for date row in the x-axis and the second one is for time row in the y-axis. I am not finding any javascript function to do that. I am trying to use toLocaleDateString and toLocaleTimeString functions for that. But those are not working so. Here is my code,

    function onScan(err, data) {
            if (err) {
                document.getElementById('textarea').innerHTML += "Unable to scan the table: " + "\n" + JSON.stringify(err, undefined, 2);
            } else {
                var clickDate, clickTime;
                data.Items.forEach(function (iotButton) {
                    clickDate = iotButton.TimeStamp.toLocaleDateString(undefined, {
                        day: 'numeric',
                        month: 'numeric',
                        year: 'numeric'});

                    clickTime = iotButton.TimeStamp.toLocaleTimeString({
                    hour: '2-digit',
                            minute: '2-digit',
                    second: '2-digit'
                });

                drawChart(clickDate, clickTime);
            }
            );
        }
        }
    google.charts.load('current', {'packages': ['scatter']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart(clickDate, clickTime) {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Time');

        data.addRows([
            [clickDate, clickTime]
        ]);

        var options = {
            width: 700,
            height: 500,
            refreshInterval: 5,
            chart: {
                title: 'Rundzeiten nach Messzeitpunkt'
            },
            hAxis: {title: 'Date'},
            vAxis: {title: 'Time'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
    }

Can anybody give me the hints or solutions how can I extract date and time individually to show it in the scatter plot? Thanks in advance.

WhiteHat · Accepted Answer · 2018-01-16T15:44:13.380

first, i would recommend loading google before anything else.

then, use column type timeofday for y-axis.

then you can split the date string on various parts to add the rows.

see following snippet...

google.charts.load('current', {
  packages: ['scatter']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('timeofday', 'Time');

  var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

  var options = {
    width: 700,
    height: 500,
    chart: {
      title: 'Rundzeiten nach Messzeitpunkt'
    },
    hAxis: {title: 'Date'},
    vAxis: {title: 'Time'}
  };

  // execute method that calls onScan here

  function onScan(err, data) {
    if (err) {
      document.getElementById('textarea').innerHTML += "Unable to scan the table: " + "\n" + JSON.stringify(err, undefined, 2);
    } else {
      data.Items.forEach(function (iotButton) {
        var dateParts = iotButton.TimeStamp.split(' ');
        var clickDate = dateParts[0].split('.');
        var clickTime = dateParts[1].split(':');

        data.addRow([
          new Date(parseInt(clickDate[0]), parseInt(clickDate[1])-1, parseInt(clickDate[2])),
          [parseInt(clickTime[0]), parseInt(clickTime[1]), parseInt(clickTime[2])]
        ]);
      });
      chart.draw(data, google.charts.Scatter.convertOptions(options));
    }
  }
});

Thank you for your solution @WhiteHat. It looks your code is correct. But there is an error which is saying "data.addRow is not a function". I am not getting the idea of this error. — Mahbub, Jan 16 '18 at 21:21
Solved that problem. Due to the same variable "data" for my database value and the plot data, it is conflicting. So for onScan function parameter, I am using dbdata instead of data. So my foreach is now dbdata.Items.forEach. Rest of the things are correct. I have edited your code for the final code soultion. Thanks for the solution. — Mahbub, Jan 16 '18 at 21:49

Extract date and time from dynamodb timestamp data in javascript for scatter plot

1 Answers1