Home › forums › Chart Support › date time formatting issues
Hi,
I’m plotting a graph of temp/humidity date against time, and the graph shows the time/dae in full ISO format when you mouse over it. I tried using valueFormatString to reduce this to just date and time (dd/mm/yyyy hh:mm), but it doesn’t work (doesn’t throw any errors either). I’m also trying to plot the labels on the x axis as just date (in a dd/mm/yyyy format) but this only functions for the initial date, and then reports the equivalent of a 0 (01/01/1970).
I thought it might be an issue with the formatting of my text in the csv file, so changed that to ISO format, as below.
Data is being read from a CSV file – format: “2016-04-05 23:03:00,20.8,54.60%”
Any help greatly appreciated!
fiddle of javascript https://jsfiddle.net/4ve2ow2t/
We looked into your issue and observed that the ISO-format for date-time is Date(“YYYY-MM-DDTHH:MM:SS”), which is different from what you are using.
And your csv file is missing, so we were unable to have a look and know the exact format you are using.
Check this example
I couldn’t work out a way to upload the csv file, but it follows the format as below: (if you can tell me how to upload it to the fiddle I will)
2016-04-05 23:03:00,20.8,54.60%
Inputting that date format into your code works, and prints the date as expected, so I’m unsure as to why it won’t with my code using the same formatting values?
It would help us if you can refer this example where data is taken from csv and try to reproduce the issue in a fiddle.
Fiddle won’t let me use jquery.canvasjs.min.js as a http external resource (from here: https://canvasjs.com/assets/script/jquery.canvasjs.min.js) so I can’t replicate the issue with my fiddle.
HOWEVER – copy and pasting my code incl the data into your fiddle replicates the issue. http://jsfiddle.net/4bc9v3hd/14/
Note how the tooltip shows the full ISO datetime (I am trying to make it show only the date and time) and the legend shows on 01/01/1970 for all points.
We looked into the fiddle and observed that you are not providing x-values, so the date starts from Jan 1 1970 by default. As the axis is dateTime axis, we suggest you to use intervalType along with interval.
Here is the working fiddle with formatted-labels in “DD/MM/YYYY” format.
Brilliant, that has fixed the x axis issue. However the toltip still shows the full ISO date – I tried using xValueFormatString in data or valueFormatString in axisX to format this as “DD/MM/YYYY HH:mm” but neither affect it. Am i trying to format it in the wrong way?
Thanks!
You can use toolTipContent, to change the content of toolTip.
What is the syntax for formatting toolTipContent – i.e. {label} shows the same effect, {label: ‘formatstring’} shows no specific formatting either?
Further to that – using toolTip: {contentFormatter: function(e) {return CanvasJS.formatDate(e.value, "DD/MM/YYYY HH:mm");}, formats it correctly, but removes the y value (and the {label} the value is now. Adding content: "{label}: {y}" doesn’t add the y value either.
toolTip: {contentFormatter: function(e) {return CanvasJS.formatDate(e.value, "DD/MM/YYYY HH:mm");},
{label}
now
content: "{label}: {y}"
I’ve mostly resolved my issue now –
toolTip: { contentFormatter: function(e) { return CanvasJS.formatDate(e.entries[0].dataPoint.label, "DD/MM/YYYY HH:mm")+": "+e.entries[0].dataPoint.y; }, http://jsfiddle.net/4bc9v3hd/27/
toolTip: { contentFormatter: function(e) { return CanvasJS.formatDate(e.entries[0].dataPoint.label, "DD/MM/YYYY HH:mm")+": "+e.entries[0].dataPoint.y; },
Displays the text formatted correctly.
Could you point me in the direction of the colours etc to make it match the rest of theme1?
You can customize the tooltip border, font-color and background-color to fit your requirement.
You must be logged in to reply to this topic.