unable to get json feeds for Nvd3 chart

Question

I'm working with NVD3 charting library. I have created some basic charts from examples of different type of graphs/charts with some hard-code dummy data and its working fine. I'm able to render charts with the hard-coded data. Now I want to render charts with Json feeds coming from another URL but I'm having problem in fetching the json data from the url. So far I have tried different solutions from different websites but failed to get data. I have tried nvd3 library as

d3.json('http://nvd3.org/examples/cumulativeLineData.json', function(data) {
....
...
.
}   

but this didnt worked and giving following error on console on Chrome

Origin null is not allowed by Access-Control-Allow-Origin.

while FireFox is not giving any error and shows status "200 ok" but I'm still not able to get data from the file. then i tried

$.get("http://nvd3.org/examples/cumulativeLineData.json", function (jsonp) {
    var processImages = function (data) {
        alert('ok' + data);
    }   
});

but getting same results for both chrome and Firefox. I tried JsonP to get the file having data in json format like

$.ajax({
       url: 'http://nvd3.org/examples/cumulativeLineData.json',
       dataType: 'jsonp',
       success: function(dataWeGotViaJsonp){
            console.log("data we got "+dataWeGotViaJsonp);
       }
 });

but couldn't get data. It show no error nor any data. The json file i'm trying to access is directly accessible through browser (i.e. no lgin security etc is required to access it) and it contains data something like following

[
  {
    "key": "Series 1",
    "values": [ [ 1025409600000 , 0] , .... , [ 1330491600000 , 93.388148670744]]
  },
  {
    "key": "Series 2",
    "values": [ [ 1025409600000 , 0] , .... , [ 1330491600000 , -6.4417038470291]]
  },
  {
    "key": "Series 3",
    "values": [ [ 1025409600000 , 0] , .... , [ 1330491600000 , 86.946444823715]]
  },
  {
    "key": "Series 4",
    "values": [ [ 1025409600000 , -7.0674410638835] , .... , 61.099720234693]]
  }
]

I have tried many solutions but couldn't get it resolve. Am I missing something or doing something wrong? Any help will be highly apperciated.

Answer 1

By default, most browsers do not allow cross-domain requests. To enable cross-domain requests, have the server set the header Access-Control-Allow-Origin: *. For more details, see the W3C recommendation on Cross-Origin Resource Sharing. For IE9, d3.xhr uses the nonstandard XDomainRequest for cross-domain requests. See api reference D3 Requests. Hope it helps.