Hello,
Im a rookie at google chart and Angular JS. Been working with mostly
knockoutjs the last year.
Anyways, I found that angularjs combined with google chart might work for
some good looking visualization and Ive heard good things about angular.
What I dont know is how I should set up the architecture, ive done it like
described below.
Data that should be presented is stored in a database and I decided to
create a file "services.js" that would be responsible for fetching the data
from the server.
IE. a function inside services.js: I call an actionmethod from a controller
(MVC framework)
angular.module('serviceWeb.services', []).service('myService', function
($http) {
return {
getRmaCreatedTwelveMonthsAll: function () {
return $http.post('/Stats/RmaCreatedLastTwelveMonthsAll', {
toDate: null }).then(function (result) {
return result;
});
},
}
});
In my MVC view ive added a directive as following:
<div ng-controller="ChartController" class="charts_start">
<div id="allRmaChart" class="secondChart_start" *rma-created-all*
></div>
</div>
and in the directive file ive added:
angular.module('serviceWeb.directives', []).directive('rmaCreatedAll',
function (myService) {
return function ($scope, elm, attrs) {
var chart = new google.visualization.ComboChart(elm[0]);
myService.getRmaCreatedTwelveMonthsAll().then(function (result)
{
if (result && result.data && result.data != "") {
var resultFromJson =
angular.fromJson(result.data.result);
var rmaArray = [["Month", "Total", "Avarage"]];
var avarage = 0;
var total = 0;
$.each(resultFromJson, function (index, res) {
// Dont base the avarage on the data of the current
month due to misleading data.
if (resultFromJson.length != index+1) {
total += this.Total;
avarage = parseInt(total / (index + 1));
}
this.TranslatedMonth =
TranslatedMonth(this.MonthName);
var rmaItem =
[this.TranslatedMonth.toString().substr(0, 3) + "-" +
this.Year.toString().substr(2, 4), this.Total,0];
rmaArray.push(rmaItem);
});
for (var i in rmaArray) {
if (i == 0)
continue;
rmaArray[i][2] = avarage;
}
var googleRmaDataTable = new
google.visualization.arrayToDataTable(rmaArray);
var options = {
title: "Number of RMA's created the current year",
animation: {
duration: 1000,
easing: 'out',
},
vAxis: { title: "Antal" },
seriesType: "bars",
series: {
0: { visibleInLegend: false },
1: { type: "line", visibleInLegend: false }
},
tooltip: { isHtml: true },
focusTarget: 'category',
colors: ['#3079ed', '#FEB405']
};
chart.draw(googleRmaDataTable, options);
}
});
};
})
Since im a rookie I dont have a clue if this is the way to go about this.
Sometimes when I refresh the page i end upp with an error displayed where
the chart should be displayed: "cannot read property 'left' of undefined", and
I cant find what the problem might be.
I dont know why this error occurs and I believe that my design of the
architecture is bad..
Please help me and provide me with how I should load data from the server,
best practise.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" 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 http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
