parse time stamps on JavaScript

Question

I have a simple flask app:

from flask import Flask
from flask import render_template


app = Flask(__name__)


@app.route("/")
def time_chart():
    data = [('2023-01-25T17:30:00.000000000', 30448.96679688), ('2023-01-25T17:45:00.000000000', 29294.3515625), ('2023-01-25T18:00:00.000000000', 27275.02539062), ('2023-01-25T18:15:00.000000000', 24812.61523438), ('2023-01-25T18:30:00.000000000', 22755.69140625), ('2023-01-25T18:45:00.000000000', 20561.11132812), ('2023-01-25T19:00:00.000000000', 18987.63085938), ('2023-01-25T19:15:00.000000000', 17539.5859375), ('2023-01-25T19:30:00.000000000', 17016.4765625), ('2023-01-25T19:45:00.000000000', 16894.22070312), ('2023-01-25T20:00:00.000000000', 17029.96875), ('2023-01-25T20:15:00.000000000', 17259.77539062), ('2023-01-25T20:30:00.000000000', 17193.86328125), ('2023-01-25T20:45:00.000000000', 16616.23242188), ('2023-01-25T21:00:00.000000000', 16088.16894531), ('2023-01-25T21:15:00.000000000', 15797.39746094), ('2023-01-25T21:30:00.000000000', 15362.96875), ('2023-01-25T21:45:00.000000000', 15336.35644531), ('2023-01-25T22:00:00.000000000', 15960.28125), ('2023-01-25T22:15:00.000000000', 16042.6640625), ('2023-01-25T22:30:00.000000000', 16146.38378906), ('2023-01-25T22:45:00.000000000', 16110.25097656), ('2023-01-25T23:00:00.000000000', 16836.08984375), ('2023-01-25T23:15:00.000000000', 16890.60546875), ('2023-01-25T23:30:00.000000000', 16788.99414062), ('2023-01-25T23:45:00.000000000', 16439.90625), ('2023-01-26T00:00:00.000000000', 16228.85058594), ('2023-01-26T00:15:00.000000000', 16230.30078125), ('2023-01-26T00:30:00.000000000', 16338.36816406), ('2023-01-26T00:45:00.000000000', 16460.6171875), ('2023-01-26T01:00:00.000000000', 16493.234375), ('2023-01-26T01:15:00.000000000', 16447.67773438), ('2023-01-26T01:30:00.000000000', 16415.74804688), ('2023-01-26T01:45:00.000000000', 16474.99609375), ('2023-01-26T02:00:00.000000000', 16542.4296875), ('2023-01-26T02:15:00.000000000', 16596.86328125), ('2023-01-26T02:30:00.000000000', 16532.21484375), ('2023-01-26T02:45:00.000000000', 16566.72851562), ('2023-01-26T03:00:00.000000000', 16635.7109375), ('2023-01-26T03:15:00.000000000', 16655.14453125), ('2023-01-26T03:30:00.000000000', 16731.29101562), ('2023-01-26T03:45:00.000000000', 16817.42578125), ('2023-01-26T04:00:00.000000000', 16874.3203125), ('2023-01-26T04:15:00.000000000', 16911.72265625), ('2023-01-26T04:30:00.000000000', 17007.70898438), ('2023-01-26T04:45:00.000000000', 17199.2734375), ('2023-01-26T05:00:00.000000000', 17390.16796875), ('2023-01-26T05:15:00.000000000', 17606.35742188),
            ('2023-01-26T05:30:00.000000000', 17879.546875), ('2023-01-26T05:45:00.000000000', 17932.6171875), ('2023-01-26T06:00:00.000000000', 17968.68554688), ('2023-01-26T06:15:00.000000000', 18349.8125), ('2023-01-26T06:30:00.000000000', 19083.18164062), ('2023-01-26T06:45:00.000000000', 19592.9140625), ('2023-01-26T07:00:00.000000000', 20821.75390625), ('2023-01-26T07:15:00.000000000', 21279.56835938), ('2023-01-26T07:30:00.000000000', 20830.5625), ('2023-01-26T07:45:00.000000000', 20592.80664062), ('2023-01-26T08:00:00.000000000', 20698.85742188), ('2023-01-26T08:15:00.000000000', 20476.5), ('2023-01-26T08:30:00.000000000', 20408.54101562), ('2023-01-26T08:45:00.000000000', 20521.22265625), ('2023-01-26T09:00:00.000000000', 20445.13085938), ('2023-01-26T09:15:00.000000000', 20959.30078125), ('2023-01-26T09:30:00.000000000', 22306.59960938), ('2023-01-26T09:45:00.000000000', 23099.64648438), ('2023-01-26T10:00:00.000000000', 23235.52929688), ('2023-01-26T10:15:00.000000000', 23080.86132812), ('2023-01-26T10:30:00.000000000', 22585.5859375), ('2023-01-26T10:45:00.000000000', 22174.94726562), ('2023-01-26T11:00:00.000000000', 22105.2109375), ('2023-01-26T11:15:00.000000000', 22566.296875), ('2023-01-26T11:30:00.000000000', 23031.3984375), ('2023-01-26T11:45:00.000000000', 23978.91210938), ('2023-01-26T12:00:00.000000000', 24852.0625), ('2023-01-26T12:15:00.000000000', 25741.0078125), ('2023-01-26T12:30:00.000000000', 25965.08789062), ('2023-01-26T12:45:00.000000000', 26317.12695312), ('2023-01-26T13:00:00.000000000', 26347.44726562), ('2023-01-26T13:15:00.000000000', 26394.00390625), ('2023-01-26T13:30:00.000000000', 25856.28125), ('2023-01-26T13:45:00.000000000', 24980.40039062), ('2023-01-26T14:00:00.000000000', 25305.16210938), ('2023-01-26T14:15:00.000000000', 25720.41601562), ('2023-01-26T14:30:00.000000000', 26291.81054688), ('2023-01-26T14:45:00.000000000', 26779.45703125), ('2023-01-26T15:00:00.000000000', 27066.55664062), ('2023-01-26T15:15:00.000000000', 26940.08984375), ('2023-01-26T15:30:00.000000000', 26779.62695312), ('2023-01-26T15:45:00.000000000', 27590.7109375), ('2023-01-26T16:00:00.000000000', 28469.65429688), ('2023-01-26T16:15:00.000000000', 28869.4453125), ('2023-01-26T16:30:00.000000000', 29026.6875), ('2023-01-26T16:45:00.000000000', 29544.50585938), ('2023-01-26T17:00:00.000000000', 30271.54296875), ('2023-01-26T17:15:00.000000000', 31040.04882812)]
    
    labels = [row[0] for row in data]
    values = [row[1] for row in data]
    return render_template('graph.html', labels=labels, values=values)


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=5000)

A simple graph.html to render a chart:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Electrical Load Forecast</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>

<canvas id="lineChart" width="900" height="400"></canvas>
<script>
    var ctx = document.getElementById("lineChart").getContext("2d");
    var lineChart = new Chart(ctx, {
        type: "line",
        data: {
            labels: {{ labels | safe }},
            datasets: [
                {
                    label: "Electricity Watts",
                    data: {{ values | safe }},
                    fill : true,
                    borderColor: "rgb(75,192,192)",
                    lineTension: 0.5
                }
            ]
    },
    options: {
        responsive: true
    }
});
</script>

</body>

</html>

It looks like this:

But is it possible to parse the time stamp so the X-Axis is more human readable in the chart? What should I do any tips greatly appreciated.

Does this answer your question? [Chart.js - Formatting Y axis](https://stackoverflow.com/questions/20371867/chart-js-formatting-y-axis) — robere2, Jan 25 '23 at 18:20
yeah thanks I think I can run with that thanks for the links guys — bbartling, Jan 25 '23 at 18:26
Could anyone give me a tip on what JavaScript function I should be using Parse a Time stamp like this: `2023-01-26T05:30:00.000000000` or should I just handle that in the backend in Python which I know better than JavaScript...to make it more like `1-26-23 5:30 AM` — bbartling, Jan 25 '23 at 18:31

parse time stamps on JavaScript

0 Answers0