Home forums Using CanvasJS a question about dateTime axisX

This topic contains 2 replies, has 2 voices, and was last updated by  hzqij 2 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #5635

    hzqij
    Participant

    hi, I have code like this:

    
    <!DOCTYPE HTML>
    <html>
    <head>  
    <script type="text/javascript">
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer",
        {
          title:{
            text: "Simple Date-Time Chart"
        },
        axisX:{
            title: "timeline",
            gridThickness: 1
        },
        axisY: {
            title: "Downloads"
        },
        data: [
        {        
            type: "area",
            dataPoints: [//array
            { x: new Date(2012, 01, 1), y: 26},
            { x: new Date(2012, 01, 2), y: 38},
            { x: new Date(2012, 01, 3), y: 43},
            { x: new Date(2012, 01, 4), y: 29},
            { x: new Date(2012, 01, 5), y: 41},
            { x: new Date(2012, 01, 8), y: 54},
            { x: new Date(2012, 01, 9), y: 66},
            { x: new Date(2012, 01, 10), y: 60},
            { x: new Date(2012, 01, 11), y: 53},
            { x: new Date(2012, 01, 12), y: 60}
    
            ]
        }
        ]
    });
    
        chart.render();
    }
    </script>
    <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
    </body>
    </html>
    

    when the chart render, the line between (2012, 01, 5) to (2012, 01, 8) have a three days interval,
    not like the line between (2012, 01, 1) to (2012, 01, 2) only have one day interval. I want to have
    a chart only one day interval, how can I do that ?

    thanks!

    ps: because like stock charts, only have five days datas one week, so I want draw a continue charts not include Saturday, Sunday, holiday, etc…

    • This topic was modified 2 years, 10 months ago by  hzqij.
    • This topic was modified 2 years, 10 months ago by  hzqij.
    #5638

    Sunil Urs
    Keymaster

    When you set date-time values to “x” it is not possible to skip weekends and holidays. Axis behaves linearly across the date range.

    In cases where you want to show only working days, then its better to use “label” instead of “x”. But it requires you to format the date/time into required string format before assigning. You can use libraries like momentjs to do the same. Here is a page on label


    Sunil Urs

    #5639

    hzqij
    Participant

    it works. thank you very much!

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

You must be logged in to reply to this topic.