morrisjs / morris.js

Pretty time-series line graphs

Home Page:http://morrisjs.github.com/morris.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hover Timestamp showing only date NOT time.

t-abraham opened this issue · comments

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
});

Hello,

you can use the function hoverCallback()

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