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?
--
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 [email protected].
To post to this group, send email to [email protected].
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.
