Can't reset x-range with zoom enabled on dynamic data

I’m using $http.get() to obtain timeseries data for a candlestick chart, and then using $scope.api.updateWithData() to populate the chart.

If I leave zoom disabled, all works well. However if I turn it on, I get two problems:

• firstly - no zoom or pan actions actually work. The chart stubbornly stays at its normal zoom level, and instead the page (in Chrome) just tries to scroll
• secondly - if I start off with no $scope.data at all then I get an exception from line 571: cannot read property 'call' of undefined and still can’t move the graph, although the correct X range is used. If I start instead with an empty array (whether [] or [{values: []}] then the graph goes to the start of the unix epoch (1970/01/01) and then won’t pan.

I’m using 1.0.5, with code as follows:

    $scope.config = {
        refreshDataOnly: false
    };

    $scope.data = [{values: []}];

    $scope.options = { chart: {
        type: 'candlestickBarChart',
        x: function(d) { return d.date; },
        y: function(d) { return d.close; },
        xScale: d3.time.scale(),
        height: 600,
        xAxis: { axisLabel: 'Date and Time', showMaxMin: false,
            tickFormat: function(x) { return dateFormat(new Date(x * 1000))
        },
        yAxis: { axisLabel: 'QPS', showMaxMin: false,
            tickFormat: d3.format('.3r') },
        zoom: { enabled: true, horizontalOff: false, verticalOff: true },
        useInteractiveGuideline: false
    }};

    $http.get('....').then(function(res) {
        // mangle data into the required structure
        ...
        $scope.api.updateWithData(data);
    });

Please advise…

[allanelder]

Any update on a fix for this?

[raybellis]

I seem to have resolved this by placing a call to $scope.api.refresh() immediately before the call to .updateWithData(). Putting it after (which seemed to be the intuitive thing to do) didn’t work - it left me with a blank “No data” graph.