1

I am trying to make a widget for angular dashboard framework, sample widgets can be found here. I am struck at a point where I am trying to integrate tabletop.js in the widget. I somehow cannot get the data in the controller.

my code:

use strict;

angular.module('adf.widget.charts', ['adf.provider', 'highcharts-ng'])
  .config(function(dashboardProvider){
    var widget = {
      templateUrl: '{widgetsPath}/charts/src/view.html',
      reload: true,
      resolve: {
        /* @ngInject */
        urls: function(chartService, config){
          if (config.path){
            return chartService.getSpreadsheet(config.path);
          }
        }
      },
      edit: {
        templateUrl: '{widgetsPath}/charts/src/edit.html'
      }
  };

  dashboardProvider
      .widget('piechart', angular.extend({
        title: 'Custom Piechart',
        description: 'Creates custom Piechart with Google Sheets',
        controller: 'piechartCtrl'
        }, widget));
  });

service and controller

'use strict';

    angular.module('adf.widget.charts')
       .service('chartService', function ($q){
        return {
          getSpreadsheet: function init(path){
            var deferred = $q.defer();
            Tabletop.init({
              key: path,
              callback: function(data, Tabletop) {
                deferred.resolve([data, Tabletop]);
          },
              simpleSheet: true,
              debug: true
            });
          }
        }

      })


      .controller('piechartCtrl', function ($scope, urls) {
       $scope.urls = urls;
       console.log(data) //I get error here data is not defined

    });

edit.html

<form role="form">
  <div class="form-group">
    <label for="path">Google Spreadsheet URL</label>
    <input type="text" class="form-control" id="path" ng-model="config.path" placeholder="Enter URL">
  </div>
</form>

view.html

<div>
  <div class="alert alert-info" ng-if="!chartConfig">
    Please insert a repository path in the widget configuration
  </div>
  <div ng-if="chartConfig">
    <highchart id="chart1" config="chartConfig"></highchart>
      </div>
</div>

At this point I am just trying to console.log data from piechartCtrl but I am unable to do so. The only thing I get in the console is

You passed a new Google Spreadsheets url as the key! Attempting to parse. tabletop.js:400 Initializing with key 1voPzG2Sha-BN34bTK2eTe-yPtaAW2JZ16lZ3kaDWxCs

This means that the sheets are processed as I enter sheet url but I cannot get ahead from this point. Googlesheet URL

https://docs.google.com/spreadsheets/d/1voPzG2Sha-BN34bTK2eTe-yPtaAW2JZ16lZ3kaDWxCs/pubhtml

unicorn2
  • 844
  • 13
  • 30
Imo
  • 1,455
  • 4
  • 28
  • 53

1 Answers1

0

You can use $broadcast service and pass object in it. For example, you can broadcast event from a controller in following way:

$rootScope.$broadcast("sendingItemFromService",{"item": yourValue});

and in other controller, you can catch this even in following way:

$scope.$on("sendingItemFromService", function(event, args) {
console.log(args.item);
});
Mohammad Umair Khan
  • 410
  • 6
  • 14
  • first of all u need to return a promise if u r using $q service. U must return "defer.promise" at the end of ur "getSpreadsheet" function. Secondly, I am unable to understand how are u calling "getSpreadsheet" function? If you want data data from service in ur controller then either use the $broadcast method or in ur controller (where you want to use that value) call that service in following way: chartService.getSpreadsheet(path).then(function(data) {console.log(data)}) – Mohammad Umair Khan Jan 15 '16 at 12:28
  • Well I had already tried your second option but nothing happens when I try to do this .controller('piechartCtrl', ['$scope', 'chartService', function($scope, chartService) { $scope.getSheet = function() { chartService.getSpreadsheet(path).then(function(data) { console.log(data) }) } }]); no errors and nothing on console – Imo Jan 15 '16 at 12:37
  • try returning 'defer.promise' in ur service function. P.S. in ur 'getSpreadsheet()' function, u also need to specify an error callback function in which u shud return 'defer.reject(errorArgument)'. I am not familiar with angular dashboard framewrok and widgets stuff so i can't tell u the exact syntax of this error callback but its evident from ur code that an error callback function is missing. By specifying error callback, u mght be able to figure out the error reason which is being returned in defer.promise – Mohammad Umair Khan Jan 15 '16 at 12:52