CODEWITHSUNDEEP
javascriptd3.js
Preethi
Preethi

Reputation: 339

d3.js- error in chrome

I'm trying to get a line graph by getting the datas from the external json file,

   <!DOCTYPE html>
  <meta charset="utf-8">
  <head>
   <style>

   body {
    font: 10px sans-serif;
     }

   .axis path,
   .axis line {
    fill: none;
    stroke: #000;
   shape-rendering: crispEdges;
   }

   .x.axis path {
     display: none;
    }

    .line {
     fill: none;
     stroke: steelblue;
     stroke-width: 1.5px;
      }

     </style>
     </head>
      <body>
     <script src="http://d3js.org/d3.v3.js"></script>
      <script>

      var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

       var parseDate = d3.time.format("%d-%b-%y").parse;

      var x = d3.time.scale()
     .range([0, width]);

       var y = d3.scale.linear()
         .range([height, 0]);

       var xAxis = d3.svg.axis()
        .scale(x)
         .orient("bottom");

        var yAxis = d3.svg.axis()
       .scale(y)
      .orient("left");

       var line = d3.svg.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.close); });

       var svg = d3.select("body").append("svg")
       .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        d3.json("data.json", function(error, data) {
        data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
        });

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain(d3.extent(data, function(d) { return d.close; }));

        svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

        svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
         .attr("dy", ".71em")
         .style("text-anchor", "end")
         .text("Price ($)");

          svg.append("path")
          .datum(data)
           .attr("class", "line")
           .attr("d", line);
          });

         </script>
         </body>
        </html>

In data.json

   [
 {"date":"1-May-12","close":582.13},
{"date":"30-Apr-12","close":583.98},
{"date":"27-Apr-12","close":603.00},
{"date":"26-Apr-12","close":607.70},
{"date":"25-Apr-12","close":610.00},
{"date":"24-Apr-12","close":560.28}
  ]

It works fine in firefox and safari. But not in chrome. I'm getting these errors:

XMLHttpRequest cannot load ../Graphs/data.json. Cross origin requests are only supported for HTTP. d3.v3.js:1878 xhr.send d3.v3.js:1878 xhr.(anonymous function) d3.v3.js:1864 d3_xhr d3.v3.js:1886 d3.json d3.v3.js:8954 (anonymous function) graph.html:63

Uncaught TypeError: Cannot call method 'forEach' of undefined graph.html:64 (anonymous function) graph.html:64 event d3.v3.js:419 respond d3.v3.js:1830 xhr.send d3.v3.js:1878 xhr.(anonymous function) d3.v3.js:1864 d3_xhr d3.v3.js:1886 d3.json d3.v3.js:8954 (anonymous function) graph.html:63

Uncaught NetworkError: A network error occurred. d3.v3.js:1878 xhr.send d3.v3.js:1878 xhr.(anonymous function) d3.v3.js:1864 d3_xhr d3.v3.js:1886 d3.json d3.v3.js:8954 (anonymous function)

Can anyone tel me what the problem is? Thanks.

Upvotes: 0

Views: 3212

Answers (1)

Piotr Stapp
Piotr Stapp

Reputation: 19830

The problem is because you do run this web page on server, but you are running it local (probably in chrome you have path like c:\XXXX\page.html). You have to make AJAX request to webserver in other case chrome will block it.

So you can:

  1. setup your page on local webserver
  2. disable chrome security (Cross origin requests are only supported for HTTP but it's not cross-domain)

Upvotes: 2

Related Questions