google.visualization.LineChart is not loading seco

Question

I am working on Angular/ionic Cordova project. I am using google.visualization.LineChart to display the chart in my project. First time when we come on the page where I have draw the chart, It is working properly. But when I further navigate to next ion-view and came back to the screen where I have drawn the chart, chart does not appear. Any idea why it is happening? here is my code:

$scope.$on('$ionicView.enter', function() {
    $ionicLoading.show({
        template: '<ion-spinner icon="spiral"></ion-spinner>',
        noBackdrop:false
    });
    serverRepo.salesMonthly().then(function(objS){
            $scope.monthlyData=objS.data;
            if(objS.data.orders == null){
                $ionicLoading.hide();
                alert('There is not data regarding Monthly Sale');
            }else{
                angular.forEach(objS.data.orders, function(value, key) {
                    objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn);
                    if(key == objS.data.orders.length-1){
                        $scope.data = objS.data;
                        drawChart();
                        console.log('drawChart Called');
                    }
                })
                $ionicLoading.hide();
            }

        },function(objE){
            console.log("Error:-\n"+JSON.stringify(objE));
            $ionicLoading.hide();
    });
});

function drawChart(){
    var options = {
        legend: { position: 'bottom' },
        curveType: 'function',
        titlePosition: 'in',
        axisTitlesPosition: 'in',
        hAxis: {
            textPosition: 'in',
            minValue: 0,
            textStyle:{color: "#fff"}
        },
        vAxis: {
            minValue: 0,
            maxValue: 13,
            textPosition: 'in',
            textStyle:{color: "#fff"},
            minorGridlines:{color: "#ccc"}
        },
        lineWidth: 6,
        fontSize:11,
        chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
        colors: ['#32BD76'],
        animation:{
            duration: 1500,
            easing: 'out',
            startup: true
        }
    };
    google.charts.setOnLoadCallback( function () {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'labels');
        data.addColumn('number', 'data');
        for(i = 0; i < $scope.data.labels.length; i++)
            data.addRow([$scope.data.labels[i], $scope.data.datasets.data[i]]);
        // Create and draw the visualization.
        $scope.myChart=new google.visualization.LineChart(document.getElementById('curve_chartmonthly'));
        $scope.myChart.draw(data, options);
        console.log('chart drawn.......');
    });

}

Answer 1

think the problem has to do with google.charts.setOnLoadCallback

which is called once per page load

try moving the code inside the callback to drawChart

then call drawChart from the callback

see following example...

$scope.$on('$ionicView.enter', function() {
    $ionicLoading.show({
        template: '<ion-spinner icon="spiral"></ion-spinner>',
        noBackdrop:false
    });
    serverRepo.salesMonthly().then(function(objS){
            $scope.monthlyData=objS.data;
            if(objS.data.orders == null){
                $ionicLoading.hide();
                alert('There is not data regarding Monthly Sale');
            }else{
                angular.forEach(objS.data.orders, function(value, key) {
                    objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn);
                    if(key == objS.data.orders.length-1){
                        $scope.data = objS.data;
                        drawChart();
                        console.log('drawChart Called');
                    }
                })
                $ionicLoading.hide();
            }

        },function(objE){
            console.log("Error:-\n"+JSON.stringify(objE));
            $ionicLoading.hide();
    });
});

function drawChart(){
    var options = {
        legend: { position: 'bottom' },
        curveType: 'function',
        titlePosition: 'in',
        axisTitlesPosition: 'in',
        hAxis: {
            textPosition: 'in',
            minValue: 0,
            textStyle:{color: "#fff"}
        },
        vAxis: {
            minValue: 0,
            maxValue: 13,
            textPosition: 'in',
            textStyle:{color: "#fff"},
            minorGridlines:{color: "#ccc"}
        },
        lineWidth: 6,
        fontSize:11,
        chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
        colors: ['#32BD76'],
        animation:{
            duration: 1500,
            easing: 'out',
            startup: true
        }
    };

    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'labels');
    data.addColumn('number', 'data');
    for(i = 0; i < $scope.data.labels.length; i++)
        data.addRow([$scope.data.labels[i], $scope.data.datasets.data[i]]);
    // Create and draw the visualization.
    $scope.myChart=new google.visualization.LineChart(document.getElementById('curve_chartmonthly'));
    $scope.myChart.draw(data, options);
    console.log('chart drawn.......');
}

google.charts.setOnLoadCallback(drawChart);

Answer 2

I have the same problem. I resolve change the ID reference for a class.

Ex: to

After, identify the element with jquery: from document.getElementById('your_chart_id') to $('.your_chart_id')[0]