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.
El miércoles, 18 de mayo de 2016, 12:18:20 (UTC+2), [email protected]
escribió:
>
> 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/1fe2da3c-e487-42dd-8739-464ba0216bca%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
