Grabbing Data from and URL?

[angularjs-nvd3-directives]

Grabbing Data from and URL?

[cmaurer]

Yes. It is possible. I won't be able to push an example until later today/tonight.

Until then, try this.

1. create a scope variable on the controller for refreshInterval (for polling)

    $scope.refershInterval = 5;

1. Include $http as a dependency in the controller

function ExampleCtrl($scope, $http){

1. Create a function that uses the $http service, and then assigns the results to the $scope.exampleData you are charting

$scope.fetchData = function(){
  $http.get('some.url')
    .then(function(response){
       $scope.exampleData = response;
    });
}

1. at the end of the controller make a call to fetchData()
2. To poll, create a setInterval function at the very end of the controller and call fetchData() within it. Also, note the use of the $scope.$apply function within setInterval.

setInterval(function(){
                $scope.$apply(function(){
                    $scope.fetchData();
                })
            }, 15000);

[homerlex]

Thanks for the quick reply. I had come up with something similar (but I used d3.json() to get the data instead of $http).

The problem is that when you call $scope.fetchData() at the end of the controller nothing happens on the chart. If you use a timer (or interval) it does update the chart just fine.

Seems like some sort of initialization/timing issue.

[homerlex]

Ah - I was missing the $scope.refershInterval - it does work with that :-)

[homerlex]

Actually - found the real problem. My d3.json function needed to do an apply:

   $scope.setData = function (data) {
      console.log('set scope')
      d3.json('/app/something.json', function(data) {
        $scope.$apply(function() {
          $scope.exampleData2 = data;
          $scope.exampleData = data;
        })
      });     
    };

So, what is $scope.refershInterval ? (notice the typo ;-) )

[cmaurer]

I was using refreshInterval as a polling mechanism. To poll a backend and update the chart. Sorry for the typo. Not enough coffee yet. :)

[cmaurer]

actually, I think I had some grand visions of setting it dynamically with angular. I intended to pass it to setInterval. Thats what happens when you rush it. :)

[homerlex]

Any thought on the following?:

I'd like to have multiple charts on a given page. Each chart will have a different URL for getting the data. Obviously, having the URL hardcoded in the Controller is not optimal. Where would you suggest having the URL passed in? Would I need to instantiate a new instance of the controller for each chart and pass in the URL?

[cmaurer]

Let me think about the multiple url's.

However, on the multiple charts per page, take a look at the docs for a specific chart (http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html). There are multiple charts on the page.

The important thing to remember is to make the id unique (d3.js uses that for selection, updating, etc). Also, I am using one controller, but multiple 'invocations' of the same controller.

[cmaurer]

So on the same page I am using ExampleCtrl multiple times, with different configurations, and different id's (showYAxisExample, and colorExample).

<div ng-controller='ExampleCtrl'>
    <nvd3-line-chart data='exampleData' height='300' id='showYAxisExample' showXAxis='true' showYAxis='false' width='550'>
            <svg />
    </nvd3-line-chart>
</div>

and

<div ng-controller='ExampleCtrl'>
    <nvd3-line-chart color='colorFunction()' data='exampleData' height='300' id='colorExample' showXAxis='true' showYAxis='true' width='550'>
            <svg /></nvd3-line-chart>
</div>

[cmaurer]

The solution for multiple urls would depend on the frequency of changes to the urls. If the url's never, or hardly change, then I wouldn't waste a lot of time on it. I would make it as quick and painless as possible to change (json structure in one place?).

If it is going to change a lot, you are going to want to make it really easy to change.

My initial thoughts.

[cmaurer]

Just added a live data example using weather data from http://api.openweathermap.org

https://github.com/cmaurer/angularjs-nvd3-directives/blob/master/examples/liveData.example.html

[selvavalluvan]

Hi,
Actually I have a different problem. Would it be possible with the given solution.
I have a different way of JSON data sets. It looks like this.

Would it be possible to load the two data sets in the same graph.