CODEWITHSUNDEEP
javascriptd3.jscharts
Vinod Louis
Vinod Louis

Reputation: 4876

Problems in rendering D3.js Area Chart

I was referring to the article from here http://bl.ocks.org/mbostock/3883195 I have my own data set replaced but get a rectangle drawn instead of area chart, I'm missing something but not able to catch the problem My Fiddle resides here https://jsfiddle.net/9ep4Lnbq/

var area = d3.svg.area()
 .x(function(d) { return x(d.stamp); })
 .y0(height)
 .y1(function(d) { return y(d.loc_total); });

Please help

Upvotes: 0

Views: 107

Answers (1)

Henry S
Henry S

Reputation: 3112

The chart is working fine. In fact it's not showing an exact rectangle, but the gradients are too small to see. The reason why the area chart looks like a rectangle is because that's what the data you're passing in creates:

You have 9 data points spread over a period of a couple of hours on Thu Dec 10 2015. The last point is 9944. You remaining 3 data points are spread over the next 4 months, but the 'loc_total' barely changes: 9944, 9952, 9948, 9952.

So you have variation in 'loc_total' in your early points, but the timescale is too short (a couple of hours out of 4 months) to see this in the chart. Then you have a few data points spread over the time series, but with not enough variation in 'loc_total'.

If you change a couple of the numbers, you can see it's working fine when I change a couple of 'loc_total' values: 

var data =[{
    "hash": "de4d2c909ec9e00106a147c81f13d2395aaa1d11",
    "stamp": "Mon Apr 18 16:12:52 UTC 2016",
    "loc_total": 9952
  },
  {
    "hash": "a3957595e859e5bf7ce4d50b9ef1f65afc2cbcb9",
    "stamp": "Mon Feb 15 13:52:37 UTC 2016",
    "loc_total": 6948
  },
  {
    "hash": "f8c8a2eecb4d90b4700313294b5cf32c5cd1fe1c",
    "stamp": "Mon Feb 15 09:38:41 UTC 2016",
    "loc_total": 9952
  },
  {
    "hash": "7405846a24596c8fdcadec8be1f392783d1517fc",
    "stamp": "Thu Dec 10 16:30:12 UTC 2015",
    "loc_total": 7944
  }
...

See: https://jsfiddle.net/henbox/9ep4Lnbq/1/

Upvotes: 1

Related Questions