Problem with draw() for angularjs cordova project

[Anjaney Mishra]

Hello,

I am working on a cordova project(using Angularjs and ionic framework). I am using google.visualization.LineChart in my project. I am facing a problem with draw(). Use Case: I am making a service call on page load. The data which I am getting in response from the service, that is used to draw the chart. First time when we come on this screen chart is showing properly in my <ion-view>. But once I navigate to the child view of that view(where chart is drawn), and came back to the same <ion-view>, Chart does not drawn. 

Expected Result: Chart should be shown every time when I come to the screen.

Here is my code for this:

First code for service to get data which will be used to draw the chart: 

this.salesMonthly = function() {

         var deff = $q.defer();

         $http({

               method: "Get",

               url: baseUrl + "Sales/Monthly",

               headers: {

               'Authorization': 'Bearer ' + localStorage.getItem("chemist_access_token"),

               'Content-Type': 'application/json'

               }

               }).then(function(objS) {

                       deff.resolve(objS);

                       }, function(objE) {

                       errorHandler.serverErrorhandler(objE);

                       deff.reject(objE);

                       });

         return deff.promise;

         };

Second Code used in my controller file: 

first of all called api to get data on ionicView Enter and then called draw() to draw the chart

$scope.$on('$ionicView.enter', function() {

        $ionicLoading.show({

            template: '<ion-spinner icon="spiral"></ion-spinner>',

            noBackdrop:false

        });

        serverRepo.salesMonthly().then(function(objS){

                console.log("salesMonthly :"+JSON.stringify(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.......');

        });

    }

Could any one Please help me?

[Daniel LaLiberte]

Hi Anjaney,

It is difficult to tell otherwise what might be happening with your use of AngularJS and ionic framework, so it would be good to see an actual web page that demonstrates the problem you are seeing.  

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/4ab7091c-78fd-4be8-b45e-650641520ac7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Anjaney Mishra]

Hi Daniel,

I can share you My template file(.html) and controller file(.js). Also I am sharing JSON response which I am getting from the service API. I have attached two images also. 1.png is the file in which I am drawing the Chart. When we click on any list item(below the Chart), we navigate to the second screen i.e. 2.png. Till Now everything is fine. But when we click on bach arrow of the 2.png, and came back on 1.png, screen looks like 3.png. It means chart is not getting drawn. I am surprised why this is happening?

Hope my this explanation will help you to understand the problem.

Thanks.

Anjaney Mishra