Google charts: duplicate calls in angular js

[cmi.gni.d...@gmail.com]

I've got a terrible problem and I don't know why. I have a web application divided in two parts, one part is public and the other part is private. The public part works fine with Google Charts, but private part works wrong because duplicate calls to other functions!!!

To represent chart graphics I have defined the next directive:

privateApp.directive("columnChart", function(){

return{

restrict: "A",

scope: {

titleChart: "=",

data: "=",

columns: "=",

min: "=",

max: "=",

vAxisTitle: "=",

hAxisTitle: "=",

tooltipColumn: "=",

isClicked: "=",

callbackFn: "&",

width: "=",

height: "="

},

link: function(scope, $elm, $attr){

var data = new google.visualization.DataTable();

//Definimos las columnas que va a tener nuestra tabla de datos

for (var i = 0; i < scope.columns.length; i++){

data.addColumn(scope.columns[i].tipo, scope.columns[i].nombreColumna);

};

var widthChart = 400;

var heightChart = 400;

if (scope.width != null)

widthChart = scope.width;

if (scope.height != null)

heightChart = scope.height;

scope.$watch("data", function (newValue, oldValue){

scope.options = {

width: widthChart,

height: heightChart,

bar: {groupWidth: "95%"},

title: scope.titleChart,

legend: {position: "none"},

annotations: {

alwaysOutside: true

},

chartArea : {left:50,top:50,width:'90%',height:'80%'},

vAxis: {title: scope.vAxisTitle},

hAxis: {title: scope.hAxisTitle, textPosition: "out"}

};

if (scope.data != null){

//Eliminamos datos del DataTable

data.removeRows(0, data.getNumberOfRows());

//Insertamos filas a la tabla

for (var i = scope.min; i <= scope.max; i++){

data.addRow(scope.data[i]);

};

var view = new google.visualization.DataView(data);

//view.setColumns(cols);

view.setColumns([0, 1,

                   {

calc: "stringify",

sourceColumn: 1,

type: "string",

role: "annotation"

                   },

                   {

calc: "stringify",

sourceColumn: scope.tooltipColumn,

type: "string",

role: "tooltip"

                   }]);

var chart = new google.visualization.ColumnChart($elm[0]);

//chart.draw(data, scope.options);

chart.draw(view, scope.options);

if (scope.isClicked){

//Detectamos el clic sobre el gráfico

google.visualization.events.addListener(chart, "click", selectHandler);

}

}

});

scope.$watch("min", function (newValue, oldValue){

scope.options = {

width: 400,

height: 400,

bar: {groupWidth: "95%"},

title: scope.titleChart,

legend: {position: "none"},

annotations: {

alwaysOutside: true

},

chartArea : {left:50,top:50,width:'90%',height:'80%'},

vAxis: {title: scope.vAxisTitle},

hAxis: {title: scope.hAxisTitle, textPosition: "out"}

};

if (scope.data != null){

//Eliminamos datos del DataTable

data.removeRows(0, data.getNumberOfRows());

//Insertamos nuevos datos en la tabla

for (var i = scope.min; i <= scope.max; i++){

data.addRow(scope.data[i]);

};

var view = new google.visualization.DataView(data);

view.setColumns([0, 1,

                   {

calc: "stringify",

sourceColumn: 1,

type: "string",

role: "annotation"

                   },

                   {

calc: "stringify",

sourceColumn: scope.tooltipColumn,

type: "string",

role: "tooltip"

                   }]);

var chart = new google.visualization.ColumnChart($elm[0]);

chart.draw(view, scope.options);

if (scope.isClicked){

//Detectamos el clic sobre el gráfico

google.visualization.events.addListener(chart, "click", selectHandler);

}

}

});

function selectHandler(e){

var index;

index = parseInt(e.targetID.substring("bar#0#".length, e.targetID.length));

scope.callbackFn({arg1: data.getValue(index, 4)});

//alert(data.getValue(index, 4));

}

}

};

});

And in the layout, I have added this code witch works fine in the public part and makes me to call twice functions when I load page or fire any event:

<script type = "text/javascript">
    google.charts.setOnLoadCallback(function(){
        angular.bootstrap(document.body, ["privateProfileModule"]);
    });
    google.charts.load("current", {packages: ["corechart"]});
</script>

You can check on the next picture the duplicate calls to the functions and the final error that I get.

I don't have any idea why is happend this!!! Please, help me!!! Thank you in advance!!!

[cmi.gni.d...@gmail.com]

I want to add that if  use this code on the head of my layout like in public part where ir works.

<script type = "text/javascript">
    google.charts.setOnLoadCallback(function(){
        angular.bootstrap(document.body, ["privateProfileModule"]);
    });
    google.charts.load("current", {packages: ["corechart"]});
</script>

I can see the graphic but I get this error in firefox firebug and then you can see how calls to functions are duplicated:

Error: google.visualization is undefined
.link@http://gnsys.local/js/directives/private-google-chart-directives.js:80:8
$/<@http://gnsys.local/js/angular.min.js:73:31
aa@http://gnsys.local/js/angular.min.js:73:90
K@http://gnsys.local/js/angular.min.js:62:39
g@http://gnsys.local/js/angular.min.js:54:410
g@http://gnsys.local/js/angular.min.js:54:433
K@http://gnsys.local/js/angular.min.js:61:488
g@http://gnsys.local/js/angular.min.js:54:410
K@http://gnsys.local/js/angular.min.js:61:488
g@http://gnsys.local/js/angular.min.js:54:410
g@http://gnsys.local/js/angular.min.js:54:433
g@http://gnsys.local/js/angular.min.js:54:433
g@http://gnsys.local/js/angular.min.js:54:433
K@http://gnsys.local/js/angular.min.js:61:488
g@http://gnsys.local/js/angular.min.js:54:410
W/<@http://gnsys.local/js/angular.min.js:53:480
zc/d/</<@http://gnsys.local/js/angular.min.js:20:99
lf/this.$get</n.prototype.$eval@http://gnsys.local/js/angular.min.js:133:217
lf/this.$get</n.prototype.$apply@http://gnsys.local/js/angular.min.js:133:446
zc/d/<@http://gnsys.local/js/angular.min.js:20:57
e@http://gnsys.local/js/angular.min.js:39:191
zc/d@http://gnsys.local/js/angular.min.js:19:480
zc@http://gnsys.local/js/angular.min.js:20:274
Zd@http://gnsys.local/js/angular.min.js:19:83
@http://gnsys.local/js/angular.min.js:293:238
a@http://gnsys.local/js/angular.min.js:174:399
Hf/c@http://gnsys.local/js/angular.min.js:35:212
 <div class="ng-isolate-scope" column-chart="" columns="rightChart.columns" data="rightChart.data" title-chart="rightChart.title" min="rightChart.min" max="rightChart.max" v-axis-title="rightChart.vAxis.title" tooltip-column="3" is-clicked="false" width="450" height="450" style="width: 100%; height: 100%">
angular.min.js (línea 107)
GET http://gnsys.local/js/dirPagination.tpl.html
200 OK
 1ms
angular.min.js (línea 93)
POST http://gnsys.local/privado/report-querys-sql/reporteconsultas/rightpanel
200 OK
 84ms
angular.min.js (línea 93)
GET http://gnsys.local/js/dirPagination.tpl.html
200 OK
 295ms
angular.min.js (línea 93)
POST http://gnsys.local/privado/report-querys-sql/reporteconsultas/rightpanel
200 OK
 90ms
angular.min.js (línea 93)
Pagination directive: the pagination controls (id: tQuery) cannot be used without the corresponding pagination directive, which was not found at link time.

[Daniel LaLiberte]

I can't follow most of your code, but one thing you mention suggests a possible problem I can address.  You say:  

And in the layout, I have added this code witch works fine in the public part and makes me to call twice functions when I load page or fire any event:

<script type = "text/javascript">

    google.charts.setOnLoadCallback(function(){

        angular.bootstrap(document.body, ["privateProfileModule"]);

    });

    google.charts.load("current", {packages: ["corechart"]});

</script>

If google.charts.load() is called more than one time, it will complain that you are calling it more than one time.   This is currently a limitation that we plan to resolve, but for now, you can only call google.charts.load() one time in a page.   If you are not loading any more packages, then there is no need to call it anyway.  But if you do need more than one package, you currently have to load everything you will need in one call.

If that doesn't help resolve your problem, I suggest you construct a much simpler case, as simple as possible, to narrow down the problem.  If you can post it on jsfiddle so we can see it in operation, then we will have a chance of debugging it.

--
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/1fe2da3c-e487-42dd-8739-464ba0216bca%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[cmi.gni.d...@gmail.com]

Thank you Daniel for your answer!!! I'm try to explain better. In my web application I have defined two modules "privateProfileModule" and "publicProfileModule". In every page of "publicProfileModule"

I call this code on the head of the page:

<script type = "text/javascript">
    google.charts.

setOnLoadCallback(function(){
        angular.bootstrap(document.body, ["publicProfileModule"]);
    });
    google.charts.load("current", {packages: ["corechart"]});
</script>

And works fine!!!

But, today, I have tried to add a google chart to my module "privateProfileModule" adding the same code to the head but modifying the name of the module to "privateProfileModule". 

<script type = "text/javascript">
    google.charts.setOnLoadCallback(function(){
        angular.bootstrap(document.body, ["privateProfileModule"]);
    });
    google.charts.load("current", {packages: ["corechart"]});
</script>

And works wrong!!! Duplicating the calls to the function when I load the page for first time. And when I make clic over a button. Furthermore, other directives doesn't work. Despite of this 

bad operation I can see the column chart, but If I try to make a search throuh searcher which is in the same page, then the function which makes the search is called twice.

If I comment the line with "angular.bootstrap(document.body, ["privateProfileModule"]) I've got the same error from google visualization, I don't see the column chart and when I load the page

all the functions called are called just only once.

 

But If I comment google.charts.load("current", {packages: ["corechart"]}) line. I don't see the column chart , I get the same google visualization error and the functions called when the page is loaded are called just one time.

Is there any way to see the result of my directive which build a colum chart without calling angular.bootstrap(document.body, ["privateProfileModule"]); or doing it in another way?

Thanks Daniel for your appreciated help!!! 

[cmi.gni.d...@gmail.com]

I have made another test and I put an alert in google.charts.setOnLoadCallback;

 

<script type = "text/javascript">

google.charts.setOnLoadCallback(function(){

alert("inside of setOnLoadCallback");

angular.bootstrap(document.body, ["privateProfileModule"]);

});

google.charts.load("current", {packages: ["corechart"]});

</script>

And whe I see the alert I've got this exit in firebug's console:

angular.min.js (línea 107)

GET http://gnsys.local/js/dirPagination.tpl.html

200 OK

1ms

angular.min.js (línea 93)

POST http://gnsys.local/privado/report-querys-sql/reporteconsultas/rightpanel

200 OK

112ms

angular.min.js (línea 93)

Where I've got the visualization error and the functions are called first time. I accept the alert and I've got this others calls:

GET http://gnsys.local/js/dirPagination.tpl.html

200 OK

0ms	angular.min.js (línea 93)

POST http://gnsys.local/privado/report-querys-sql/reporteconsultas/rightpanel

200 OK

56ms	angular.min.js (línea 93)

Pagination directive: the pagination controls (id: tQuery) cannot be used without the corresponding pagination directive, which was not found at link time.

I'm desesperated :(

[Daniel LaLiberte]

You seem to be missing what I am saying, and I don't see how I can help given what you are saying.  Please point me to a page that demonstrates the problem.

You may not call google.charts.load() more than one time in a single page.  Are you doing that?  

--

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/89e18fb9-dfef-46b3-a8b7-7949186712e7%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[cmi.gni.d...@gmail.com]

Sorry Daniel, I have tried to explain better the problem. I'm not calling more than one time.

I'm developing at local, how can I send my page?

Thanks in advance, Daniel!!! 

[Daniel LaLiberte]

Can you set up a simple example at http://jsfiddle.net/ or another online js ide: https://designshack.net/articles/css/5-online-playgrounds-for-html-css-and-javascript-compared/

--

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/b62c682e-2a95-43de-97ed-edaa200c563e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.