Passing JSON data url instead of data

[angularjs-nvd3-directives]

Passing JSON data url instead of data

[cmaurer]

Can you post a quick example of what you are trying to accomplish?

[cmaurer]

I don't understand why you would use d3.json?

[vikaskonsam]

We got it working by some modifications in the directives. We are not yet sure if this is the proper way to go. Any suggestions?

<nvd3-stacked-area-chart
data = "exampleData" // we do not want to make use of this.
dataurl="{{widget.query.url}}" // eg. URL of json data file
width="550"
height="260"
showLabels = "true"
xaxistickformat="xDateFormat()"
xaxislabel="{{widget.xAxisLabel}}"
yaxislabel="{{widget.yAxisLabel}}"
><svg></svg>
</nvd3-stacked-area-chart>

In the directives.

scope.$watch('dataurl', function(dataurl){
getData(dataurl, createChart) // AJAX load the data and createChart accordingly
}, (attrs.objectequality === undefined ? false : (attrs.objectequality === "true")));

getData function.

function getData(dataurl, callback){
d3.json(dataurl, function(data){
callback.call(this,data);
})
};

[cmaurer]

@vikaskonsam, this would not be considered an Angular solution. Look at the liveData.example.html in the examples directory.

Instead of using d3.json, use an Angular service (resource, etc), to get the json data from your endpoint, then assign that data to the $scope variable you are using for your data.

By combining the fetching of data within the directive, you are mixing concerns, which complicates the code.

The following is from the liveData example using Angular's service constructs.

function fetchData(){
                openWeatherService.getForecast(5506956, 'imperial')
                        .success(function(response){
                            var dta = [{key:"Las Vegas Weather", values:[]}];
                                dta[0].values = response.list.map(function(d){
                                return [d.dt, d.main.temp];
                            });
                            $scope.exampleData = dta;
                        });
            }

Does this make sense?

Chris

[vikaskonsam]

@cmaurer - yes, it make sense putting the data in the scope. We have tried your suggestion and have successfully implemented it. Thank you.

However, we do have a concern with this approach:

We have a dashboard screen with multiple charts. The server will send an initial list with which we will be generating the charts.

Eg.

[
      {
         "id":1,
         "title":"Some title",
         "type":"simpleLineChart",
         "query":{
            "url":"url to fetch chart data"
         }
      },
      {
         "id":2,
         "title":"Some title",
         "type":"stackedAreaChart",
         "query":{
            "url":"url to fetch chart data"
         }
      },
      {
        ....
      }
   ]

We will have to iterate through this entire list, get the url and fetch the data for the chart and add it to the scope. This may increase the initial load time. The dashboard may not come alive unless all the data is fetched.

With the other approach presented earlier the charts are self sufficient and have the mechanism of fetching the data by itself, making use of the dataurl passed as an attribute. This approach will help in asynchronous loading of the charts.

What are your thoughts on these approaches? Which one would you opt for?

[cmaurer]

@vikaskonsam

The dashboard may not come alive unless all the data is fetched,
Are you thinking that none of the charts will show up until all of the data for every chart has been returned?

With the other approach presented earlier the charts are self sufficient and have the mechanism of fetching the data by itself
Without knowing more about your application, I will have difficulty providing a concrete answer. However, it is true the other approach will make the charts 'self sufficient'. However, how important is self-sufficiency compared to other aspects of your app.

How well does that approach fit within the goals of Angular.js? Directives are intended to be reusable across a wide variety of uses. The more you add to it for a specific use in one application, the harder it is to reuse. The more you decouple, the more reuse you typically get.

What I would suggest is to take a look at some examples (other than charting), where they are combining a number of directives together. In your iteration example, look at the ng-repeat directive and templates. I saw a good example that helped to solidify some of these concepts for me. I will try to find it and post the link.

[cmaurer]

@vikaskonsam

Are you still having issues? Did my comment help?

Thanks,
Chris

[vikaskonsam]

@cmaurer ,

Sorry for the late reply..
We did some testing at our end of both the approaches and have decided to go with the approach you had suggested earlier (the one where we add the data to the $scope).

Reason - we wanted to have the data in the $scope from which it can be accessed to show in a table format.

Thank you for your suggestions. They did help us a lot.
Vikas

[cmaurer]

Cool. Glad it worked out.

Chris

[SandeepApsingekar]

Hi,

I would like to know how do you pass json data as url. Can you give me an example. Because instead of sending the data in the code, I want to send it as a json file. Is it possible. I really appreciate your help.

Thanks!

Regards,
Sandeep