Home forums Chart Support viewPort Max/Min with date value

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #25127

    I’m building a ocean tide chart.
    I have tides for 14 days on a spline area chart.
    The issue is it shows all 14 days at once.

    I need to be able to set the default view port of the chart to one day, with the users ability to pan/scroll on xAxis (left right) to other days.

    #25159

    @saltstrong,

    You can programmatically zoom into a region by setting viewportMinimum and viewportMaximum.

    To zoom into a certain region, there should be a minimum of 3-4 dataPoints – behavior is designed such that zooming is limited upto a certain region, so the user doesn’t end up zooming into a blank-region (region with no dataPoints). Due to this restriction, it’s not possible to pan chart as you zoom into the region with just 1 dataPoint.

    ——-
    Manoj Mohan
    Team CanvasJS

    #25165

    How would you setup a zoom for a date/time value on the xAxis?

    #25172

    @saltstrong,

    You can set the viewportMinimum as viewportMinimum: new Date(2019,03,14) and viewportMaximum as viewportMaximum:new Date(2019,04,14) to achieve zooming programmatically over data/time axisX type.

    ——-
    Manoj Mohan
    Team CanvasJS

    #32572

    Hey @Manoj Mohan

    Can you share a jsfiddle example that viewportMinimum works with time?

    I tried 2 different ways, one is have x value as timestamp, and set xValueType: “dateTime”. like following

    
      {
      "type": "line",
      "axisX": [
        {
          "viewportMaximum": 1611186373807,
          "viewportMinimum": 1611182782013
        }
      ],
    
      "data": [
        {
          "markerType": "circle",
         
          "type": "line",
          "xValueType": "dateTime",
          
         
          "dataPoints": [
            {
              "y": 101789,
              "x": 1611185700000,
            },
            {
              "y": 12834,
              "x": 1611186300000,
            }
          ],
    
        }
      ],
    
    }

    But it doesn’t set the range to my desired value. However if I comment out xValueType: "dateTime", it will work because x value got treated as number.

    I tried to set x and viewportMinimum to Date object like viewportMinimum: new Date(2019,03,14), but it still doesn’t work.

    #32580

    @canvasjsuser001,

    Thanks for reporting the use-case. We will fix this issue in our future versions. However, you can work-around the issue by setting minimum property of axisX as shown in this JSFiddle.

    —-
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.