Johnathan Johnathan - 5 months ago 33
JSON Question

Live code examples of NVD3 does not accept my JSON

I am trying to uses my JSON file in the Live code editor of NVD3 for the stacked area chart: http://nvd3.org/livecode/index.html#codemirrorNav
Here is my JSON file:

[{"key":"SSB","values":[]},{"key":"GEN","values":[]},{"key":"LYM","values":[]},{"key":"LUD","values":[]},{"key":"GCC","values":[[1433116800000,1],[1434326400000,2],[1434499200000,2],[1434931200000,1],[1435536000000,1],[1437436800000,1],[1437523200000,1],[1439164800000,1],[1439251200000,1],[1439942400000,1],[1440288000000,1],[1465257600000,3]]},{"key":"MAC","values":[[1465257600000,1]]},{"key":"MMB","values":[[1420156800000,2],[1420416000000,1],[1420502400000,4],[1420588800000,1],[1420675200000,2],[1420761600000,1],[1421020800000,2],[1421107200000,6],[1421193600000,3],[1421280000000,3],[1421366400000,2],[1421625600000,7],[1421712000000,4],[1421798400000,1],[1421884800000,3],[1421971200000,4],[1422230400000,3],[1422316800000,5],[1422403200000,3],[1422489600000,3],[1422576000000,6],[1422921600000,8],[1423008000000,10],[1423094400000,8],[1423180800000,17],[1423267200000,1],[1423353600000,2],[1423440000000,3],[1423526400000,2],[1423699200000,5],[1423785600000,3],[1424131200000,6],[1424217600000,4],[1424304000000,5],[1424390400000,2],[1424563200000,1],[1424736000000,2],[1424822400000,2],[1424995200000,8],[1425340800000,7],[1425427200000,4],[1425513600000,2],[1425600000000,5],[1425772800000,1],[1425859200000,3],[1425945600000,4],[1426032000000,6],[1426118400000,3],[1426204800000,2],[1426377600000,1],[1426550400000,5],[1426636800000,2],[1426723200000,1],[1426809600000,14],[1426982400000,1],[1427068800000,1],[1427155200000,4],[1427241600000,2],[1427328000000,8],[1427414400000,13],[1427500800000,1],[1427587200000,1],[1428624000000,1],[1429833600000,2],[1436313600000,1],[1458000000000,1],[1458864000000,1],[1465257600000,3]]}]


I replace the sample JSON with mine, NVD3 recognizes the key elements but not the data.

enter image description here

I am confused because I have used online JSON formatters to look at the structures of both JSON files and didn't see a difference. I am pretty sure that I am making an obvious error. I would greatly appreciate the community's feedback! Thank you!

EDIT:

The graph that I am trying to achieve:

enter image description here

Answer

The problem is that JSON expected by nvd3 is in this form:

values:[{x:0, y:10},{x:1, y:20} ... ]

you are passing is in this form

,{"key":"GCC","values":[[1433116800000,1],[1434326400000,2], ...

That is the reason why its not working:

FIX: You will need to change your JSON in the expected format:

var myData = [{
    "key": "SSB",
    "values": []
  }, {
    "key": "GEN",
    "values": []
  }, {
    "key": "LYM",
    "values": []
  }, {
    "key": "LUD",
    "values": []
  }, {
    "key": "GCC",
    "values": [
      [1433116800000, 1],
      [1434326400000, 2],
      [1434499200000, 2],
      [1434931200000, 1],
      [1435536000000, 1], ...
  //change into the format expected by nvd3
  myData.forEach(function(d){
    d.values = d.values.map(function(value){
      return {x:value[0], y:value[1]};
    })
  });

working code here