How to convert unix style epoch timestamp to human readable time format ?

[happytm]

Thank you for your great code.

I am testing it with server running on ESP32 microcontroller. It is fast for my purpose.

I am generating csv file on ESP32 based on environment data received from several devices content of which looks like following:

Timestamp,Location,Voltage,RSSI,Temperature,Humidity,Pressure,Light 1621531505,6,2.8,-33,72,55,233,74 1621531506,26,2.9,-31,71,53,235,88 1621531508,36,2.8,-46,65,57,235,78 1621531512,46,3.0,-61,69,55,235,82

Is it possible to convert timestamp (first number of each line) in to human readable date and time format ? if so can you please show me an example of how to do it? It is done automatically here for example: https://leeoniya.github.io/uPlot/bench/uPlot.html using same type of dataset.

Thank you.

Code I am using is as follows:

<script type="text/javascript">

 $(function(){

        var renderers = $.extend(
                    $.pivotUtilities.renderers,
                    $.pivotUtilities.plotly_renderers,
                    $.pivotUtilities.d3_renderers,
                    $.pivotUtilities.export_renderers
                    );

        Papa.parse("sensors.csv", {
            download: true,
            skipEmptyLines: true,
            complete: function(parsed){
                $("#output").pivotUI(parsed.data, {

                    rows: [""], cols: ["Timestamp"],
                    aggregatorName: "List Unique Values",
                    vals: ["Temperature"],
                    rendererName: "Line Chart",             
                });
            }
        });

        var dragging = function(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    evt.originalEvent.dataTransfer.dropEffect = 'copy';
                    $("body").removeClass("whiteborder").addClass("greyborder");
                };

                var endDrag = function(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    evt.originalEvent.dataTransfer.dropEffect = 'copy';
                    $("body").removeClass("greyborder").addClass("whiteborder");
                };

                var dropped = function(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    $("body").removeClass("greyborder").addClass("whiteborder");
                    parseAndPivot(evt.originalEvent.dataTransfer.files[0]);
                };

                $("html")
                    .on("dragover", dragging)
                    .on("dragend", endDrag)
                    .on("dragexit", endDrag)
                    .on("dragleave", endDrag)
                    .on("drop", dropped);

     });
        </script>

[happytm]

I am using your nice graph plotting software for my home automation network project which shows graphs from whole network of sensors with very little javascipt programming.

Please help me with converting timestamp values to real date and time.

My project is at https://github.com/happytm/BatteryNode

Thanks.

[happytm]

For those looking to do the same as above I used following code to make Timestamp and Location easier to read ;

Thanks.

<script type="text/javascript">
    // This example loads the "Canadian Parliament 2012"
    // dataset from a CSV instead of from JSON.

    $(function(){

        var renderers = $.extend(
                    $.pivotUtilities.renderers,
                    $.pivotUtilities.plotly_renderers,
                    $.pivotUtilities.d3_renderers,
                    $.pivotUtilities.export_renderers
                    );

        Papa.parse("http://192.168.0.3/sensors.csv", {
            download: true,
            skipEmptyLines: true,

            complete: function(parsed){
            for (let i = 0; i < parsed.data.length; i ++) {

            var d = new Date(parsed.data[i][0]*1000);
            parsed.data[i][0] = (("00" + d.getFullYear()).slice(-2) +  ("00" + (d.getMonth() + 1)).slice(-2) +  ("00" + 
            d.getDate()).slice(-2) +  ("00" + d.getHours()).slice(-2) +  ("00" + d.getSeconds()).slice(-2));
            parsed.data[0][0] = "Timestamp";

                      if (parsed.data[i][1] == 6) {
                        parsed.data[i][1] = "Livingroom";
                      } else if (parsed.data[i][1] == 16) {
                        parsed.data[i][1] = "Kitchen";
                      } else if (parsed.data[i][1] == 26) {
                        parsed.data[i][1] = "Bedroom1";
                      } else if (parsed.data[i][1] == 36) {
                        parsed.data[i][1] = "Bedroom2";
                      } else if (parsed.data[i][1] == 46) {
                        parsed.data[i][1] = "Bedroom3";
                      } else if (parsed.data[i][1] == 56) {
                        parsed.data[i][1] = "Bedroom4";
                      } else if (parsed.data[i][1] == 66) {
                        parsed.data[i][1] = "Bathroom1";
                      } else if (parsed.data[i][1] == 76) {
                        parsed.data[i][1] = "Bathroom2";
                      } else if (parsed.data[i][1] == 86) {
                        parsed.data[i][1] = "Bathroom3";
                      } else if (parsed.data[i][1] == 96) {
                        parsed.data[i][1] = "Bathroom4";
                      } else if (parsed.data[i][1] == 106) {
                        parsed.data[i][1] = "Laundry";
                      } else if (parsed.data[i][1] == 116) {
                        parsed.data[i][1] = "Boiler Room";
                      } else if (parsed.data[i][1] == 126) {
                        parsed.data[i][1] = "Workshop";
                      } else if (parsed.data[i][1] == 136) {
                        parsed.data[i][1] = "Garage";
                      } else if (parsed.data[i][1] == 146) {
                        parsed.data[i][1] = "Office";
                      } else if (parsed.data[i][1] == 156) {
                        parsed.data[i][1] = "Tank";
                      } else if (parsed.data[i][1] == 166) {
                        parsed.data[i][1] = "Solar";
                      } else {
                        parsed.data[i][1] = "Unknown";
                        parsed.data[0][1] = "Location";
                      }  

                    //console.log(parsed.data[i][1]); // (13)arrays of values by sensor type
                }                

          $("#output").pivotUI(parsed.data, {

                    rows: ["Location"], cols: ["Timestamp"],
                    aggregatorName: "List Unique Values",
                    vals: ["Temperature"],
                    rendererName: "Line Chart",                 
                });
            }
        });

        var dragging = function(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    evt.originalEvent.dataTransfer.dropEffect = 'copy';
                    $("body").removeClass("whiteborder").addClass("greyborder");
                };

                var endDrag = function(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    evt.originalEvent.dataTransfer.dropEffect = 'copy';
                    $("body").removeClass("greyborder").addClass("whiteborder");
                };

                var dropped = function(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    $("body").removeClass("greyborder").addClass("whiteborder");
                    parseAndPivot(evt.originalEvent.dataTransfer.files[0]);
                };

                $("html")
                    .on("dragover", dragging)
                    .on("dragend", endDrag)
                    .on("dragexit", endDrag)
                    .on("dragleave", endDrag)
                    .on("drop", dropped);

     });

</script>