Datatime from CSV file to plot in Highstock JS error

Question

I am trying to display a graph of historical stock prices of companies on my web app using Highcharts stockChart. The timestamp with stock price data is being loaded from a CSV file. The problem I'm facing is with the datetime conversion. In the CSV file, there is only date in the form of strings from 5 years daily. This string, I'm converting to datetime object using strptime() and converting this into timestamp to be sent as a parameter to stockChart in javascript. But the problem is this - the CSV file has daily dates from 2014-2019 but in the graph, after conversion, it is displaying only two days in 1970.

I think it might be some kind of conversion problem relating to timezones.

Python backend code (Django views.py function)

csvFile = company + ".csv"

        file = open(csvFile)
        reader = csv.reader(file)
        data = list(reader)
        prices = []
        for row in data:
            temp = []
            temp.append(datetime.timestamp(datetime.strptime((row[0]) + " 09:30:00 +0000", '%Y-%m-%d %H:%M:%S %z')))
            temp.append(float(row[1]))
            prices.append(temp)

        arg = {'symbol':company, 'prices':prices}
        return render(request, 'history.html', arg)

JavaScript code

<script type="text/javascript">

// Create the chart
Highcharts.stockChart('container', {

  time: {
    useUTC: false
  },

  rangeSelector: {
    buttons: [{
      count: 7,
      type: 'day',
      text: '1W'
    }, {
      count: 1,
      type: 'month',
      text: '1M'
    }, {
      count: 6,
      type: 'month',
      text: '6M'
    }, {
      count: 1,
      type: 'year',
      text: '1Y'
    }, {
      count: 2,
      type: 'year',
      text: '2Y'
    }, {
      type: 'all',
      text: 'All'
    }],
    inputEnabled: true,
    selected: 1
  },

  title: {
    text: 'Historical Stock prices'
  },

  exporting: {
    enabled: true
  },

  series: [{
    name: "{{ symbol }}",
    data: {{ prices }},
    tooltip: {
                valueDecimals: 2
            }
  }]
});

</script>

The CSV file has dates from 2014-2019 [

But in the graph, only two days of 1970 is displayed. [

I'm guessing its a problem with datetime conversion to timestamp. Can someone help me out here?

Answer 1

Highcharts uses time in milliseconds since 1970 as the only datetime unit.

That means that your code

datetime.timestamp(datetime.strptime((row[0]) + " 09:30:00 +0000", '%Y-%m-%d %H:%M:%S %z'))

Needs to return milliseconds, not seconds.

The easiest fix is to simply do:

datetime.timestamp(datetime.strptime((row[0]) + " 09:30:00 +0000", '%Y-%m-%d %H:%M:%S %z'))*1000

This answer has some other ways you can convert datetime to milliseconds depending on what python version you are running.

Your finished prices array should look like this:

[
  [1553588587236, 38.84],
  [1553588588236, 31.31],
  ...
]