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.
<https://lh3.googleusercontent.com/-Hj-XyKePHKo/VzxBVcxxITI/AAAAAAAAAEg/0yL_KxIxhSYeVwBL8mACTqL0EExfVwbcwCLcB/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/bf9bd242-c8d4-435f-929b-4ca86262db88%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
