On first time zooming data is missing in angular dygraph

Question

When I zooming first time when graph is loaded, data is missing in angular dygraph. Here are screenshots

after zooming

Here is my code

function getPopUpGraph() {
        $scope.currentZoom = 1;
        $scope.popUpGraph = {};
        $scope.popUpGraph = {
            data: [],
            options: {
                labels: ["Date", $scope.selectedDataPoint.LegendName, "TrendLine"],
                showPopover: false,
                //customBars: true,
                legend: "onmouseover",
                highlightSeriesOpts: {
                    strokeWidth: 2,
                    strokeBorderWidth: 1
                },
                animatedZooms: true,
                interactionModel: Dygraph.defaultInteractionModel,
                showRangeSelector: true,
                rangeSelectorPlotLineWidth: 1,
                rangeSelectorPlotStrokeColor: 'gray',
                rangeSelectorPlotFillColor: 'gray',
                highlightCircleSize: 4,
                rangeSelectorAlpha: 0.9,
                rangeSelectorForegroundLineWidth: 1.25,
                rangeSelectorForegroundStrokeColor: 'dark gray',
                visibility: [true, false],
                series: {
                    'TrendLine': {
                        strokePattern: [3, 2, 3, 2]
                    },
                },
                //xlabel: 'Date',
                ylabel: $scope.selectedDataPoint.Unit,
                title: $scope.selectedDataPoint.LegendName,
                legendEnabled: false,
                colors: ["#ff0000"],
                valueRange: null,
                height: 300,
                resizeEnabled: true,
                strokeWidth: 2,
                axes: {
                    x: {
                        axisLabelFormatter: function (d, gran) {
                            if ($scope.currentZoomLevel.name == '12h') {
                                return $filter('date')(d, 'h:mm a');
                            }
                            else
                                return $filter('date')(d, 'MMM dd h:mm');
                        },
                        valueFormatter: function (ms) {
                            return $filter('date')(ms, 'M/d/yy h:mm a');
                        }
                    }
                },
                drawCallback: function (g, is_initial) {
                    if (g.dateWindow_)
                        myPopUpRange(g.dateWindow_)
                }
            }
        }
        $scope.getPopGraphData($scope.currentZoom, 0);
    }

Data is fetching from $scope.getPopGraphData function.

Iam calling some other functions in this main function. I think this is not a problem. In angular dygraph's demo , after zooming , range selector also changing. So data is showing correctly. In my case range selector is not changing on first time zooming. Any solution? Thanks in advance...

Answer 1

I found the solution. In getPopUpGraph() function , there is a drawback function is calling. On disable the myPopUpRange() function, it is now working properly. myPopUpRange() is used for resetting the x axis value. But there is no need, as dygraph automatically assign the x axis range.