Home forums Using CanvasJS axisX as datetime

This topic contains 4 replies, has 2 voices, and was last updated by  nkfNovalume 2 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22366

    nkfNovalume
    Member

    I’m trying to do a linegraph with multiple lines and an axisX in the form of datetime

    this has been coded in php with refrence to

    Line Chart

    Chart with Multiple Axes

    I’m getting the data from a DB but have been able to replicate the problem. (see link for zipped file)
    https://drive.google.com/file/d/1B1cAGwRkZ8qvsJKFEyVF9hJa2nKCNlIm/view?usp=sharing

    The issue im having is that it only takes the axisX from one line even though the two types of data starts and ends in roughly the same time
    i know i am able to add another axisX but i also want to be able to add +7 different lines with different datetime data.

    is there any way to merge the axisX so it will put the dots from the data relative to their respected position on the axisX datetime or anything else that would make my graph not look like the replicated problem

    #22370

    Priyanka M S
    Member

    @nkfnovalume,

    Labels are displayed on the axis at every interval. The interval is calculated automatically if it is not specified and the labels are displayed accordingly to make the labels look less clumsy and more readable, due to which few labels will be skipped.

    However, by setting appropriate interval and intervalType in axisX according to your dataPoints, you can get all the labels displayed with less readability!

    __
    Priyanka M S
    Team CanvasJS

    #22372

    nkfNovalume
    Member

    Changing the interval type isn’t working. the issue is that im having troubble getting the chart to accept a date property for the x-axis. the chart can take a date property from javascript Date(YYYY, MM, DD, HH, ii, SS) however it can’t take anything from php other than a number. it therefor puts my php dates on x-axis dates that arent correct because its trying to put them as if they were numbers (taking their position on the chart using their position in the array as the number) and therefor if i have two arrays with different length but they both start and end on same dates, it will make the shorter array apear shorter on the graph i.e. end it sooner than supposed.

    i can’t see any other fix for this than trying to obtain the data in javascript somehow and enter it there as javascript Date.

    • This reply was modified 2 months, 3 weeks ago by  nkfNovalume.
    • This reply was modified 2 months, 3 weeks ago by  nkfNovalume.
    #22380

    Priyanka M S
    Member

    @nkfnovalume,

    Converting PHP date to javascript timestamp and then passing those values to dataPoints along with setting xValueType to dateTime at dataSeries level should work fine in your case.

    __
    Priyanka M S
    Team CanvasJS

    #22381

    nkfNovalume
    Member

    This fixed my issue, thank you.

    i passed a string to time earlier in my php using
    $time = strtotime($row['Timestamp']);

    sending that directly to the graph in an array with the key “x” and ofc the value “y” and setting the data’s xValueType to dateTime has fixed the problem
    i now get the graph how it want it and can give it the data i feel like :)

    • This reply was modified 2 months, 3 weeks ago by  nkfNovalume.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.