0

I am using angularjs with google charts. How do I get the http reponse passed to the "chart1.data" variable? Is I manually set chart1.data = {json oject} pasted below it works.

here is my controller:

var app = angular.module('myApp', ['googlechart'])
  app.controller('myController', function($scope, $log, $http) {
    $http.get("getCharts")
    .success(function(response) {
         var metrics = response.data;
     });



var chart1 = {};
chart1.type = "google.charts.Line";
chart1.displayed = false;
chart1.data = metrics;
$scope.myChart = chart1;


}).value('googleChartApiConfig', {
    version: '1.1',
    optionalSettings: {
      packages: ['line'],
      language: 'en'
    }



});

My http call returns the below and can see in firebug:

{"data": {"rows": [{"c": [{"v": "January"}, {"f": "42 items", "v": 19}, {"f": "Ony 12 items", "v": 12
}, {"f": "7 servers", "v": 7}, {"v": 4}]}, {"c": [{"v": "February"}, {"v": 13}, {"f": "1 unit (Out of
 stock this month)", "v": 1}, {"v": 12}, {"v": 2}]}, {"c": [{"v": "March"}, {"v": 24}, {"v": 5}, {"v"
: 11}, {"v": 6}]}], "cols": [{"p": {}, "type": "string", "id": "month", "label": "Month"}, {"p": {},
 "type": "number", "id": "laptop-id", "label": "Laptop"}, {"p": {}, "type": "number", "id": "desktop-id"
, "label": "Desktop"}, {"p": {}, "type": "number", "id": "server-id", "label": "Server"}, {"type": "number"
, "id": "cost-id", "label": "Shipping"}]}}

Here is my error:

Error: metrics is not defined
@http://127.0.0.1:5000/static/ng-lib/app.js:14:5
e@http://ajax.googleapis.

After edits I did this:

var metrics;
$http.get("getCharts")
.success(function(response) {
     metrics = response.data;
 });

I now get this erorr from firebug despite data being returned:

Chart not displayed due to error: Cannot draw chart: no data specified.. Full error object follows.
ng-goog...hart.js (line 361)
Object { id="google-visualization-errors-0",  message="Cannot draw chart: no data specified."}


GET http://127.0.0.1:5000/getCharts

200 OK
        9ms 
angular.min.js (line 92)
HeadersResponseJSON

{"data": {"rows": [{"c": [{"v": "January"}, {"f": "42 items", "v": 19}, {"f": "Ony 12 items", "v": 12
}, {"f": "7 servers", "v": 7}, {"v": 4}]}, {"c": [{"v": "February"}, {"v": 13}, {"f": "1 unit (Out of
 stock this month)", "v": 1}, {"v": 12}, {"v": 2}]}, {"c": [{"v": "March"}, {"v": 24}, {"v": 5}, {"v"
: 11}, {"v": 6}]}], "cols": [{"p": {}, "type": "string", "id": "month", "label": "Month"}, {"p": {},
 "type": "number", "id": "laptop-id", "label": "Laptop"}, {"p": {}, "type": "number", "id": "desktop-id"
, "label": "Desktop"}, {"p": {}, "type": "number", "id": "server-id", "label": "Server"}, {"type": "number"
, "id": "cost-id", "label": "Shipping"}]}}

Resolved by using the below:

var app = angular.module('myApp', ['googlechart'])
  app.controller('myController', function($scope, $log, $http) {

    $http.get("getCharts")
    .success(function(response) {
         metrics = response.data;
         var chart1 = {};
        chart1.type = "google.charts.Line";
        chart1.displayed = false;
        chart1.data = metrics;
        $scope.myChart = chart1;
     });
  }).value('googleChartApiConfig', {
    version: '1.1',
    optionalSettings: {
      packages: ['line'],
      language: 'en'
    }
  });
Tampa
  • 75,446
  • 119
  • 278
  • 425
  • the use of `var` inside the success function has made that variable scoped to only be available inside that function. – Claies Jul 10 '15 at 06:55
  • If I removed var I get the same error. – Tampa Jul 10 '15 at 06:57
  • right, because var is implicit; if you want the variable to be accessible in the outer function, it needs to be *declared* in the outer function, before you try to assign a value to it. see http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript – Claies Jul 10 '15 at 06:59
  • Thanks...now a new error. I am not sure I am using the http call correct. I do return json from my web server. – Tampa Jul 10 '15 at 07:06

0 Answers0