Home forums Using CanvasJS Date Format

Tagged: 

This topic contains 10 replies, has 4 voices, and was last updated by  Vishwas R 2 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #20923

    Hi, I have extracted data from database into this format:

    array(4) { [0]=> array(2) { [“label”]=> string(7) “2018-05” [“y”]=> float(26350) } [1]=> array(2) { [“label”]=> string(7) “2018-06” [“y”]=> float(500) } [2]=> array(2) { [“label”]=> string(7) “2018-07” [“y”]=> float(0) } [3]=> array(2) { [“label”]=> string(7) “2018-09” [“y”]=> float(300) } }

    When I build the chart, I noticed the month “2018-08” is missing because there’s no data from database.

    I wish make the X-axis to show the month properly. Can I know how to edit my script so the month can display properly? I have seen this tutorial but have not figure out the solution yet. https://canvasjs.com/docs/charts/methods/canvasjs/format-date/

    Please advise. Thanks.

    #20931

    @liyen,

    If the month “2018-05” is occupying some space on chart, you can use scaleBreaks to remove the occupied space.

    If this doesn’t solve your requirement, can you kindly create and share jsfiddle with sample data so that we can understand your requirement better and help you out.

    __
    Priyanka M S
    Team CanvasJS

    #20939

    Hi Priyanka,

    I extracted the data from database using this tutorial:

    Chart Data from Database

    The data looks like below:

    dataPoints: [
    { x: 2018-05, y: 71 },
    { x: 2018-06, y: 55 },
    { x: 2018-07, y: 50 },
    { x: 2018-09, y: 65 },
    ]

    Any way to show no data for 2018-08?

    p/s: I’m not sure how to put it on jsfiddle

    #20950

    @liyen,

    Can you please share a static HTML page over onedrive or Google drive, so that we can take a look at the chart options you are using, understand your scenario better and help you out?

    __
    Priyanka M S
    Team CanvasJS

    #20958

    Hi Priyanka,

    Thanks for your reply :)

    I have uploaded a simplified html file here:
    https://goo.gl/s5ZdfT

    There’s no data for July from the database, but I wish to show it on the chart…

    #20963

    @liyen,

    Using x-value instead of label for dataPoints, should work fine in this case. Please take a look at this jsfiddle

    __
    Priyanka M S
    Team CanvasJS

    #20966

    Hi Priyanka,

    May I know how to put the new Date() into the array?

    array_push($dataPoints, array(“x”=> $row->x, “y”=> $row->y));

    I tried the below, it is not working:

    array_push($dataPoints, array(“x”=> “new Date(\””.$row->x.”\”)”, “y”=> $row->y));

    Thanks.

    #20968

    @liyen,

    Convert $row->x to PHP timestamp from string, later converting it to javascript timestamp and assigning that value to dataPoint x-value along with setting xValueType to ‘dateTime’ should work fine in your case. array_push($dataPoints, array(“x”=> strtotime($row->x) * 1000, “y”=> $row->y));

    __
    Priyanka M S
    Team CanvasJS

    #20986

    Hi Priyanka,

    Thanks for your sharing, I’m able to get it display properly now :)

    #24367

    Hi Priyanka,

    After using your function : array_push($dataPoints, array(“x”=> strtotime($row->x) * 1000, “y”=> $row->y));
    Now I get thoses numbers on my x-axis how do i change back to date format ?

    #24368

    @babyschoco,

    Setting xValueType to ‘dateTime’ should work fine in your case, as you are passing timestamp as x-value. If this doesn’t solve your issue, kindly create a sample project and share it with us via Google-Drive or Onedrive so that we can look into the code, understand it better and help you out?


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.