AmCharts - zooming to selection snaps to nearest points instead of selected date range

Question

In the example CodePen, http://codepen.io/anon/pen/vKabjQ, I would like to select a blank area on the chart and not have it snap to the nearest points.

For example, given there is a dummy point 7 days from now, if I select either side of the 'now' line, it zooms to the dummy point instead of showing the 'now' line guide as I would expect.

Selection:

Actual Result:

Expected:

Another example: If I select points on the graph with some blank space included, AmCharts will ignore the date range I selected and truncate the selected range to the last point.

Result:

Note: If I instead use the zoom scrollbar to select the date ranges, it will happily select a blank area without snapping. I would like the selection logic to behave the same way.

CodePen code - http://codepen.io/anon/pen/vKabjQ:

var now = new Date();
var chartData = generateChartData(now);
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": chartData,
    "valueAxes": [{
      "includeAllValues": true
    }],
  "guides": [
    {
      "date": now,
      "lineColor": "#CCCCCC",
      "lineAlpha": 1,
      "lineThickness": 2,
      "dashLength": 10,
      "inside": true,
      "labelRotation": 90,
      "label": "now"
  }],
    "mouseWheelZoomEnabled": true,
    "graphs": [{
        "id": "g1",
        "valueField": "value",
    }],
    "chartScrollbar": {
        "graph": "g1",
        "scrollbarHeight": 50
    },
    "chartCursor": {
      "cursorPosition": "mouse"
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
    }
});

function generateChartData(now) {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 150);

    for (var i = 0; i < 100; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var value = Math.random();

        chartData.push({
            date: newDate,
            value: value
        });
    }

    var weekAhead = new Date(now);
    weekAhead.setDate(weekAhead.getDate() + 7)

    chartData.push({
      date: weekAhead,
      dummy: true
    });

    return chartData;
}

gerric gerric · Accepted Answer · 2016-08-01T08:40:25

This is actually a problem I faced multiple times now, as it seems that there's no property for the chartCursor to change this behaviour of getting the closest data points as selection range.

My workaround for this is configuring the chartCursor to stop zooming automatically and instead, hook up a custom handler on the zoomed event. Then you can access the actual selected time range from the cursor and manually zoom the chart.
It is necessary to get the two dates into the right order, so the zoom function will work properly.

chart.chartCursor.addListener("selected", function(o) {
    var start = Math.min(o.target.timestamp0, o.target.timestamp);
    var end = Math.max(o.target.timestamp0, o.target.timestamp);
    chart.zoom(start, end);
});

See this fiddle for a working demo.

AmCharts - zooming to selection snaps to nearest points instead of selected date range

1 Answers