Convert the date format from MM/DD/YYYY to YYYY-MM-DDT00:00:00.000Z in a list of dictionaries-CodePudding

I want to add my own data in a sample HTML chart. The javascript codes of the sample data is:

var data = [];
var visits = 10;
for (var i = 1; i < 50000; i  ) {
   visits  = Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
   data.push({
       date: new Date(2018, 0, i),
       value: visits
        });
      }

chart.data = data

I ran the output of the sample data with console.log(data) and found the sample data is the following list of dictionaries:

[{"date":"2018-11-10T05:00:00.000Z","value":-459},
{"date":"2018-11-11T05:00:00.000Z","value":-459},
{"date":"2018-11-12T05:00:00.000Z","value":-464}, 
...
{"date":"2020-11-22T05:00:00.000Z","value":-493}]

I used pandas to create a list of dictionaries as my own data. I changed my own data to match the format of the above sample data list, the following list is my own data:

rnow = 
[{'date': '01/02/2020', 'value': 13}, 
{'date': '01/03/2020', 'value': 2}, 
{'date': '01/06/2020', 'value': 5},
...
{'date': '01/07/2020', 'value': 6}]

I realized the date format is different from the sample data. I used the following code to change the date format to yyyy-mm-dd.

dfrnow['date'] = pd.to_datetime(dfrnow.date)
rnow = dfrnow.to_dict('records')

Now my data is shown as:

rnow = 
[{'date': Timestamp('2020-01-02 00:00:00'), 'value': 13}, 
{'date': Timestamp('2020-01-03 00:00:00'), 'value': 2}, 
{'date': Timestamp('2020-01-06 00:00:00'), 'value': 5},
...
{'date': Timestamp('2020-01-07 00:00:00'), 'value': 6}]

When I replace the sample data with my own data, the chart doesn't show up any data. Is that because it has this "Timestamp" thing shown in my list and how should I remove it? Or are there other better methods I can use to convert my dates?

(The following codes are all the js codes of this template chart. I listed them here just in case I missed anything.)

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

var data = [];
var visits = 10;
for (var i = 1; i < 50000; i  ) {
  visits  = Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
       data.push({
           date: new Date(2018, 0, i),
            value: visits
            });
      }

chart.data = {{rnow}};

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.minZoomCount = 5;

dateAxis.groupData = true;
dateAxis.groupCount = 500;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.fillOpacity = 0.5;

chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;

var scrollbarX = new am4core.Scrollbar();
scrollbarX.marginBottom = 20;
chart.scrollbarX = scrollbarX;

var selector = new am4plugins_rangeSelector.DateAxisRangeSelector();
selector.container = document.getElementById("selectordiv");
selector.axis = dateAxis;

CodePudding user response：

I solved it by:

rnow = dfrnow.to_dict('records')
    def new_date(date):
        return datetime.strptime(date, '%m/%d/%Y').strftime('%Y-%m-%dT00:00:00Z')
    for i in range (len(rnow)):
        rnow[i]['date'] = new_date(rnow[i]['date'])