viewPort Max/Min with date value

[Joseph Simonds]

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.

[Manoj Mohan]

@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

[Joseph Simonds]

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

[Manoj Mohan]

@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

[canvasjsUser001]

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.

[Manoj Mohan]

@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

[Manoj Mohan]

@canvasjsuser001,

We have released CanvasJS Chart v3.2.18 GA with this bug fix, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.

—
Manoj Mohan
Team CanvasJS

[Nydia]

I would like to ask if I zoomin, how can I get max value of viewport? Which datapoints in the viewport?

[Manoj Mohan]

@nydia,

You can use rangeChanged event to get to know the datapoint with maximum value within viewport on zooming/panning. Please take a look at this JSFiddle for an example on showing maximum datapoint within viewport using stripline.

—-
Manoj Mohan
Team CanvasJS