morrisjs / morris.js

Pretty time-series line graphs
http://morrisjs.github.com/morris.js/
6.92k stars 1.23k forks source link

Hover Timestamp showing only date NOT time. #786

Closed t-abraham closed 5 years ago

t-abraham commented 5 years ago

Hello,

I am a new developer and perhaps I am missing out some points. The problem I am facing is that I have my Area Chart x axis data as timestamp and the timestamp are converted to data in the dataFormat field. The x axislables are done correctly and the graph being plotted perfectly but when I hover over a point in the plot, I get the respective values for the y-axis also the x-axis value (which is the datetimestamp) but these timestamps are converted to show only the date not the time (ex. "Wed Oct 09 2019"). I want to get the time too in the hover xlabel along with the y values as shown (ex. "Wed Oct 09 2019 15:45")

below are the pictures of the hover and the js code

Capture

Image from iOS

Please help me out. Thank you

Morris.Area({
    element: '{{ sequences[seq] }}',
    data: [{% for i in range(graph_data|length) %}{
        x: {% if (graph_data[i][0]) %}{{ graph_data[i][0] }}{% else %}'N/A'{% endif %},
        a: {% if (graph_data[i][seq+1]) and not (graph_data[i][seq+1]) == 'N/A' %}{{ graph_data[i][seq+1] }}{% else %}0{% endif %},
        b: 0
    }{% if not i == (graph_data|length-1) %}, {% endif %}{% endfor %}],
    xkey: 'x',
    ykeys: ['a', 'b'],
    dateFormat: function (x) { var d = new Date(x); return d.toDateString(); },
    labels: ['Recorded - {{ sequences[seq] }}', 'Prediction - {{ sequences[seq] }}'],
    xLabelAngle: 60,
    hideHover: 'auto',                  
    parseTime: true,
    resize: true
});
pierresh commented 5 years ago

Hello,

you can use the function hoverCallback()

t-abraham commented 5 years ago

I am sorry, I tried but may be i am doing it wrong. Can you please guide me