0

I created a D3.js chart and it renders properly in Firefox but it shows a cross-origin error with an uncaught progress event error in Chrome.

The script and csv are as follows: 

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

<head>
    <style>

    .axis {
      font: 10px sans-serif;
    }

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

  .d3-tip {
  line-height: 1;
  box-shadow: 0 0 5px #999999;
  font-weight: normal;
  font-size: 12px;
  padding: 12px;
  background: #FFFFFF;
  color: #000;
  border-radius: 2px;
}


    </style>
</head>

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<script>

function filter_Data(d) {
  if (d.getDate(d.date) % 2 ==0)
   {
    return true;
  }
}

var margin = {top: 120, right: 20, bottom: 70, left: 140},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%m/%d/%Y").parse
var formatTime = d3.time.format("%d %b, %Y");

var x = d3.scale.ordinal().rangeRoundBands([0, width], .5);

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%a, %b %d"));

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

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Date:</strong> <span style='color:Black'>" + formatTime(d.date) + "</span>" + "</br><strong>Amount Spent:</strong> $<span style='color:Black'>" + d.value;
  })

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 + ")");

svg.call(tip);

d3.csv("bar-data.csv", function(error, data) {


    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });

  var data2 = data.filter(function(d) {
    return filter_Data(d.date)
  });


  x.domain(data2.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data2, function(d) { return d.value; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-60)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -55)
      .attr("x", -90)
      .attr("dy", "0.71em")
      .text("Amount Spent ($)");

  svg.selectAll("bar")
      .data(data2)
    .enter().append("rect")
      .style("fill", "#6760C3")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)


});

</script>

</body>

CSV:

date,value
1/1/2018,53
1/2/2018,165
1/3/2018,269
1/4/2018,344
1/5/2018,376
1/6/2018,410
1/7/2018,421
1/8/2018,405
1/9/2018,376
1/10/2018,359
1/11/2018,392
1/12/2018,433
1/13/2018,455
1/14/2018,478

The .csv file and the .html file are in the same folder and it renders properly on firefox as shown in the image below.firefox rendering Can someone help me understand why chrome wont render it?

Samyak Jain
  • 117
  • 2
  • 11

0 Answers0