Display time in html report

I am trying to make a custom html report and went through the forum and manuals. But the time still cannot show up. The html code comes for the template from the forum with pic attached. The file ends with shtm. And the html received in email was also attached (second pic). The value in 2nd pic makes sense so the overall connection should be good.
Capture
Capture2

Thank you very much

The time still cannot show up where? Can you give me any more details about what exactly you are trying to display?

Thanks,
Kyle

Kyle,
My final objective is to send a weekly report with a chart plotted by the value of a tag in the last 7 days and the time when this chart is generated. The one shown above is just a small test for me to understand how to use each function. As you can see, I can display the current value of a tag (value), but the time info (Data created) doesn’t show up.

Thank you
Tony

Gotcha, you will want to use Export Block descriptors for that. Here is the manual for EBDs:

Refer to this example: HOW TO: Create advanced custom HTML reports

image

Kyle

Kyle,
Thanks for the detailed guidance. I followed the example and changed a little bit to fulfill my need. There are three problems I found in my report (snapshot was attached). Just a little background, the tag name I’d like to plot is called “Operating_temp” and I plotted data from the last 5 min.

Problem (1): The “Data Created” still doesn’t show up.
(2): The chart doesn’t show up.
(3): The info at the very bottom should have been hidden but it shows up.

The .shtm file was also attached.
Thank you very much!
Tony


temp.shtm (4.9 KB)

Hi Tony,

There must be some mistakes in your code. If we load your code and the example code,side by side completely independent of the Flexy, you will see that the chart shows up in the example, but not in your code.

I would love to be able to help you more, and I will try, but we are not developers like the developers in our solution center who do custom projects for customers. We deal with a range of issues involving the operation of our devices.

I will continue to look at this and see if I can find the issues, but I won’t have much time available to spend on it today, as there are a lot of other customers with issues I also need to assist today.

Thanks for understanding,
Kyle

Hi Kyle,

I completely understand the situation. Actually I figured out the reason why the chart didn’t show up in the html file and the issue has been resolved.

The only other problem I have is the display of x axis in the chart (time stamp). Currently only hour/min/second shows up. This is a confusing point because I plan to show data from last week. So the date info is important to me. Do you have any suggestions on this issue?

Thank you very much
Tony

Change the following code:

            // Split timestamp and data into separate arrays
            var maximum = 0;
            var labels = [], data = [];
            for (var i = 0; i < responseData.length; i++) {
                var d = new Date();
                d.setUTCSeconds(responseData[i][0]);
                var date = d.toTimeString().slice(0, 8);
                labels.push(date);
                data.push(responseData[i][1]);
                if (responseData[i][1] > maximum) {
                    maximum = responseData[i][1];
                }
            }

Use:

var today = new Date();
var date = today.getFullYear()+’-’+(today.getMonth()+1)+’-’+today.getDate();
var time = today.getHours() + “:” + today.getMinutes() + “:” + today.getSeconds();
var dateTime = date+’ '+time;

See: https://tecadmin.net/get-current-date-time-javascript/

Actually, after posting that I realized it wouldn’t work because that code would take the current time and date instead of recorded one. The command “TIME$” in the Flexy outputs the data like this:

 21/01/2019 10:57:02

The code you are using looks like it’s taking the timestamp and splitting it from the data (Tank Level), so you would have to go back and see if you can include the date. Hopefully I will have more time to look at this later.

Kyle

Kyle,

Just want to follow up and conclude this topic.

If both date(d/m/y) and time(h/m/s) are required, please change the column number from 0 to 1 as suggested in the pic below, and use this as x-axis label directly.

Thanks Kyle!

Capture

Nice! Thanks for sharing that. I’m glad you got it working right!

Kyle

Hi dxttony,

why you can not use toLocaleString() function in JavaScript. This function give you perfect format as you want. Like if i want MM/DD/YYYY, HH:MM:SS format I can get it using following code.

// Parse our locale string to [date, time]
var date = new Date().toLocaleString('en-US',{hour12:false}).split(" ");

// Now we can access our time at date[1], and monthdayyear @ date[0]
var time = date[1];
var mdy = date[0];

// We then parse  the mdy into parts
mdy = mdy.split('/');
var month = parseInt(mdy[0]);
var day = parseInt(mdy[1]);
var year = parseInt(mdy[2]);

// Putting it all together
var formattedDate = year + '-' + month + '-' + day + ' ' + time;

Also if you want to do same thing manually you might follow date time in Javascript. I suggest go with toLocaleString() function. It is very powerful. Thanks
`