date time formatting issues

[mmfcMember]

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/

[Vishwas RKeymaster]

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

[mmfcMember]

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?

[Vishwas RKeymaster]

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.

[mmfcMember]

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.

[Vishwas RKeymaster]

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.

[mmfcMember]

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!

[Vishwas RKeymaster]

You can use toolTipContent, to change the content of toolTip.

[mmfcMember]

What is the syntax for formatting toolTipContent – i.e. {label} shows the same effect, {label: ‘formatstring’} shows no specific formatting either?

[mmfcMember]

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.

• This reply was modified 2 years, 5 months ago by  mmfc.
• This reply was modified 2 years, 5 months ago by  mmfc.

[mmfcMember]

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/

Displays the text formatted correctly.

Could you point me in the direction of the colours etc to make it match the rest of theme1?

[Vishwas RKeymaster]

You can customize the tooltip border, font-color and background-color to fit your requirement.

[Author]

Posts