Home forums Using CanvasJS Date Format

Tagged: 

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

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

    liyen
    Member

    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

    Priyanka M S
    Member

    @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

    liyen
    Member

    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

    Priyanka M S
    Member

    @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

    liyen
    Member

    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

    Priyanka M S
    Member

    @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

    liyen
    Member

    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

    Priyanka M S
    Member

    @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

    liyen
    Member

    Hi Priyanka,

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

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

You must be logged in to reply to this topic.