Home forums Using CanvasJS date time formatting issues

This topic contains 11 replies, has 2 voices, and was last updated by  Vishwas R 7 months, 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #10150

    mmfc
    Member

    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/

    #10153

    Vishwas R
    Keymaster

    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

    #10156

    mmfc
    Member

    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?

    #10162

    Vishwas R
    Keymaster

    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.

    #10164

    mmfc
    Member

    Fiddle won’t let me use jquery.canvasjs.min.js as a http external resource (from here: http://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.

    #10172

    Vishwas R
    Keymaster

    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.

    #10183

    mmfc
    Member

    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!

    #10331

    Vishwas R
    Keymaster

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

    #10332

    mmfc
    Member

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

    #10333

    mmfc
    Member

    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 7 months, 3 weeks ago by  mmfc.
    • This reply was modified 7 months, 3 weeks ago by  mmfc.
    #10336

    mmfc
    Member

    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?

    #10389

    Vishwas R
    Keymaster

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.