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([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.
<https://lh3.googleusercontent.com/-t8MD-PJi5kc/VzxAr22qZ7I/AAAAAAAAAEY/93mnr3RKsAk_MBe7iGCbbpQo4faAMcLxACLcB/s1600/Captura%2Bde%2Bpantalla%2Bde%2B2016-05-18%2B12%253A05%253A18.png>
I don't have any idea why is happend this!!! Please, help me!!! Thank you in
advance!!!
--
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/7a49f5dc-189b-41c7-9864-3bce190ae7b6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
